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}
|