forked from pzavolinsky/elmx
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (116 loc) · 3.85 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>TryElmx</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style type="text/css">
.title { padding: 5px; }
.test { margin-bottom: 60px; }
textarea { font-family:monospace; white-space: pre; width: 100%; }
</style>
</head>
<body>
<div id="main" class="container"></div>
<script src="cheatsheet/elmx-bundle.min.js"></script>
<script src="cheatsheet/elm.js"></script>
<script>
var app = Elm.Main.embed(document.getElementById('main'));
app.ports.compileCode.subscribe(function(args) {
var id = args[0];
var code = args[1];
if (!id) return;
var elm;
try {
elm = parseElmx(code);
}
catch (e) {
elm = 'oops!'
console.log(e);
}
app.ports.codeCompiled.send([ id, elm ]);
});
function test(title, code) {
return [ title, code.join('\n') ];
}
function title(s) {
return [ '=' + s, '' ]
}
setTimeout(function() {
app.ports.init.send(
[ title('Playground')
, test('',
[ '-- type elmx here'
, '-- or check the examples below'
])
, title('Tags')
, test('Empty tag',
[ 'someSpace : Html msg'
, 'someSpace = <br/>'
])
, test('Simple tag',
[ 'greeting : Html msg'
, 'greeting = <div>Hi</div>'
])
, test('Nested constant tag',
[ 'fancyGreeting : Html msg'
, 'fancyGreeting ='
, ' <div>'
, ' <h1>Hi</h1>'
, ' </div>'
])
, test('Nested Html',
[ 'wrap : Html msg -> Html msg'
, 'wrap item = <li>{item}</li>'
])
, test('Nested list of Html',
[ 'listOf : List (Html msg) -> Html msg'
, 'listOf items = <ul>{:items}</ul>'
])
, test('Nested text',
[ 'title : String -> Html msg'
, 'title what = <h1>{=what}</h1>'
])
, title('Attributes')
, test('Constant attribute',
[ 'niceGreeting : Html msg'
, 'niceGreeting = <div class="nice">Hi</div>'
])
, test('Expression attribute',
[ 'customGreeting : String -> Html msg'
, 'customGreeting class = <div class={class}>Hi</div>'
])
, test('Attribute attribute',
[ 'attrGreeting : Attribute msg -> Html msg'
, 'attrGreeting attr = <div {attr}>Hi</div>'
])
, test('Attribute list',
[ 'attrsGreeting : List (Attribute msg) -> Html msg'
, 'attrsGreeting attrs = <div {:attrs}>Hi</div>'
])
, test('Handler attribute',
[ 'tagInput : (String -> msg) -> Html msg'
, 'tagInput tagFn = <input {onInput tagFn}/>'
])
, title('Keyed children')
, test('Explicitly keyed',
[ 'import Html.Keyed -- remember this!'
, ''
, 'keyedList : List (String, Html.Html msg) -> Html.Html msg'
, 'keyedList items = <ul keyed>{:items}</ul>'
])
, test('Implicitly keyed',
[ 'import Html.Keyed -- remember this!'
, ''
, 'keyedList : List (String, Html.Html msg) -> Html.Html msg'
, 'keyedList items ='
, ' <ul>'
, ' <li key="i1">If one child has a key the parent is keyed</li>'
, ' {:items}'
, ' </ul>'
])
]);
}, 1);
</script>
</body>
</html>