link_interactive for hybrid pages
s-ol
3 years ago
4 | 4 |
for k,v in pairs extra
|
5 | 5 |
attr[k] = v
|
6 | 6 |
|
7 | |
tourl = (path) ->
|
|
7 |
tourl = (path, _view) ->
|
8 | 8 |
path ..= '/'
|
9 | 9 |
if STATIC and STATIC.root
|
10 | 10 |
path = STATIC.root .. path
|
|
11 |
if _view
|
|
12 |
path ..= _view
|
11 | 13 |
path
|
12 | 14 |
|
13 | 15 |
(elements) ->
|
|
41 | 43 |
BROWSER\navigate path
|
42 | 44 |
a name, opts
|
43 | 45 |
|
44 | |
link_to = (fileder, name, origin, attr) ->
|
|
46 |
link_to = (fileder, name, origin, attr, _view) ->
|
45 | 47 |
fileder = find_fileder fileder, origin
|
46 | 48 |
|
47 | 49 |
name or= fileder\get 'title: mmm/dom'
|
|
51 | 53 |
a name, merge attr, :href, target: '_blank'
|
52 | 54 |
else
|
53 | 55 |
a name, merge attr, {
|
54 | |
href: tourl fileder.path
|
|
56 |
href: tourl fileder.path, _view
|
55 | 57 |
onclick: if MODE == 'CLIENT' then (e) =>
|
56 | 58 |
e\preventDefault!
|
57 | 59 |
BROWSER\navigate fileder.path
|
58 | 60 |
}
|
|
61 |
|
|
62 |
interactive_link = (text, view=':text/html+interactive') ->
|
|
63 |
assert MODE == 'SERVER'
|
|
64 |
path = BROWSER.path
|
|
65 |
path = table.concat path, '/' if 'table' == type BROWSER.path
|
|
66 |
a text, href: tourl path, view
|
59 | 67 |
|
60 | 68 |
embed = (fileder, name='', origin, opts={}) ->
|
61 | 69 |
if opts.raw
|
|
134 | 142 |
{
|
135 | 143 |
:find_fileder
|
136 | 144 |
:link_to
|
|
145 |
:interactive_link
|
137 | 146 |
:navigate_to
|
138 | 147 |
:embed
|
139 | 148 |
}
|
0 | |
import div from require 'mmm.dom'
|
|
0 |
import div, a from require 'mmm.dom'
|
|
1 |
import interactive_link from (require 'mmm.mmmfs.util') require 'mmm.dom'
|
1 | 2 |
|
2 | 3 |
if MODE ~= 'CLIENT'
|
3 | 4 |
class Dummy
|
4 | 5 |
render: =>
|
5 | |
div 'Interactive Example not available with Server-Side rendering', style:
|
6 | |
position: 'relative'
|
7 | |
resize: 'horizontal'
|
8 | |
overflow: 'hidden'
|
|
6 |
div {
|
|
7 |
style:
|
|
8 |
position: 'relative'
|
|
9 |
resize: 'horizontal'
|
|
10 |
overflow: 'hidden'
|
9 | 11 |
|
10 | |
width: '480px'
|
11 | |
height: '270px'
|
12 | |
'min-width': '270px'
|
13 | |
'max-width': '100%'
|
|
12 |
width: '480px'
|
|
13 |
height: '270px'
|
|
14 |
'min-width': '270px'
|
|
15 |
'max-width': '100%'
|
14 | 16 |
|
15 | |
margin: 'auto'
|
16 | |
padding: '10px'
|
17 | |
boxSizing: 'border-box'
|
18 | |
background: 'var(--gray-bright)'
|
|
17 |
margin: 'auto'
|
|
18 |
padding: '10px'
|
|
19 |
boxSizing: 'border-box'
|
|
20 |
background: 'var(--gray-bright)'
|
|
21 |
|
|
22 |
interactive_link '(click here for the interactive version of this article)'
|
|
23 |
}
|
19 | 24 |
|
20 | 25 |
return {
|
21 | 26 |
UIDemo: Dummy
|
root/research/realities/_web_view: type
less
more
0 | 0 |
import elements from require 'mmm.component'
|
1 | 1 |
import h1, h2, p, a, i, div, ol, li, br, hr, span, button, section, article from elements
|
|
2 |
import interactive_link from (require 'mmm.mmmfs.util') elements
|
2 | 3 |
|
3 | 4 |
_content = div!
|
4 | 5 |
append = _content\append
|
|
10 | 11 |
display: 'inline-block',
|
11 | 12 |
width: '150px',
|
12 | 13 |
height: '80px',
|
13 | |
'line-height': '80px',
|
|
14 |
padding: '12px'
|
|
15 |
'line-height': '20px',
|
|
16 |
'box-sizing': 'border-box'
|
14 | 17 |
color: '#fff',
|
15 | 18 |
background: '#666',
|
16 | 19 |
}
|
|
22 | 25 |
|
23 | 26 |
render: =>
|
24 | 27 |
rplc = with div id: @id, :style
|
25 | |
\append '(diagram goes here)'
|
|
28 |
\append interactive_link 'click for interactive version'
|
26 | 29 |
-- \append "<script type=\"text/lua\">
|
27 | 30 |
-- local rplc = js.global.document:getElementById('#{@id}');
|
28 | 31 |
-- local fn = #{compile @func}
|