/
box.js
78 lines (73 loc) · 1.84 KB
/
box.js
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
elm = require('elm');
var EXPAND_BOTH = { x: 1.0, y: 1.0 };
var FILL_BOTH = { x: -1.0, y: -1.0 };
var icon_count = 0;
var selected = null;
function icon(key, before) {
return elm.Button({
key: key,
style: 'anchor',
before: before,
label: '#' + icon_count,
on_click: function() {
for (var i in items.elements)
items.elements[i].style = 'anchor';
this.style = '';
selected = this;
print('Item ' + selected.label + ' selected');
}
});
}
var win = elm.realise(elm.Window({
title: "Box example",
width: 480,
height: 240,
elements: {
background: elm.Background({
weight: EXPAND_BOTH,
resize: true
}),
box: elm.Box({
elements: {
control: elm.Box({
horizontal: true,
elements: {
append: elm.Button({
label: "Append",
on_click: function() {
items.elements[icon_count] = icon(icon_count);
icon_count++;
}
}),
pack_before: elm.Button({
label: "Pack Before",
on_click: function() {
if (selected) {
items.elements[icon_count] = icon(icon_count, selected.key);
icon_count++;
}
}
}),
replace: elm.Button({
label: "Replace",
on_click: function() {
if (selected) {
items.elements[selected.key] = icon(selected.key);
icon_count++;
}
}
})
}
}),
items: elm.Box({
align: FILL_BOTH,
weight: EXPAND_BOTH,
resize: true,
horizontal: true,
elements: {}
})
}
})
}
}));
var items = win.elements.box.elements.items;