@@ -21,47 +21,67 @@ Elm.Native.Graphics.Input.make = function(elm) {
2121 return { _:{}, signal:signal, handle:signal };
2222 }
2323
24− function renderDropDown(signal, values) {
25− return function(_) {
26− var entries = List.toArray(values);
27−
28− var drop = newNode('select');
29− drop.style.border = '0 solid';
30− drop.style.pointerEvents = 'auto';
31− drop.style.display = 'block';
32− for (var i = 0; i < entries.length; ++i) {
33− var option = newNode('option');
34− var name = entries[i]._0;
35− option.value = name;
36− option.innerHTML = name;
37− drop.appendChild(option);
38− }
39− drop.addEventListener('change', function() {
40− elm.notify(signal.id, entries[drop.selectedIndex]._1);
41− });
42−
43− var t = drop.cloneNode(true);
44− t.style.visibility = "hidden";
24+ function renderDropDown(model) {
25+ var drop = newNode('select');
26+ drop.style.border = '0 solid';
27+ drop.style.pointerEvents = 'auto';
28+ drop.style.display = 'block';
29+
30+ drop.elm_signal = model.signal;
31+ drop.elm_values = List.toArray(model.values);
32+ var values = drop.elm_values;
33+
34+ for (var i = 0; i < values.length; ++i) {
35+ var option = newNode('option');
36+ var name = values[i]._0;
37+ option.value = name;
38+ option.innerHTML = name;
39+ drop.appendChild(option);
40+ }
41+ drop.addEventListener('change', function() {
42+ elm.notify(drop.elm_signal.id, drop.elm_values[drop.selectedIndex]._1);
43+ });
4544
46− elm.node.appendChild(t);
47− var style = window.getComputedStyle(t, null);
48− var w = Math.ceil(style.getPropertyValue("width").slice(0,-2) - 0);
49− var h = Math.ceil(style.getPropertyValue("height").slice(0,-2) - 0);
50− elm.node.removeChild(t);
51− return drop;
52− };
45+ return drop;
5346 }
5447
5548 function updateDropDown(node, oldModel, newModel) {
49+ node.elm_signal = newModel.signal;
50+ node.elm_values = List.toArray(newModel.values);
51+
52+ var values = node.elm_values;
53+ var kids = node.childNodes;
54+ var kidsLength = kids.length;
55+
56+ var i = 0;
57+ for (; i < kidsLength && i < values.length; ++i) {
58+ var option = kids[i];
59+ var name = values[i]._0;
60+ option.value = name;
61+ option.innerHTML = name;
62+ }
63+ for (; i < kidsLength; ++i) {
64+ node.removeChild(node.lastChild);
65+ }
66+ for (; i < values.length; ++i) {
67+ var option = newNode('option');
68+ var name = values[i]._0;
69+ option.value = name;
70+ option.innerHTML = name;
71+ node.appendChild(option);
72+ }
5673 }
5774
5875 function dropDown(signal, values) {
5976 return A3(newElement, 100, 24, {
6077 ctor: 'Custom',
6178 type: 'DropDown',
62− render: renderDropDown(signal,values),
79+ render: renderDropDown,
6380 update: updateDropDown,
64− model: {}
81+ model: {
82+ signal: signal,
83+ values: values
84+ }
6585 });
6686 }
6787