@@ -15,188 +15,184 @@ Elm.Native.Graphics.Input.make = function(elm) {
1515 var Utils = Elm.Native.Utils.make(elm);
1616 var Tuple2 = Utils.Tuple2;
1717
18− function dropDown(values) {
19− var entries = JS.fromList(values);
20− var events = Signal.constant(entries[0]._1);
21−
22− var drop = newNode('select');
23− drop.style.border = '0 solid';
24− for (var i = 0; i < entries.length; ++i) {
25− var option = newNode('option');
26− var name = JS.fromString(entries[i]._0);
27− option.value = name;
28− option.innerHTML = name;
29− drop.appendChild(option);
30− }
31− drop.addEventListener('change', function() {
32− elm.notify(events.id, entries[drop.selectedIndex]._1);
33− });
18+ function input(initialValue) {
19+ var sig = Signal.constant(initialValue);
20+ return Tuple2(sig, sig);
21+ }
3422
35− var t = drop.cloneNode(true);
36− t.style.visibility = "hidden";
23+ function renderDropDown(signal, values) {
24+ return function(_) {
25+ var entries = JS.fromList(values);
26+
27+ var drop = newNode('select');
28+ drop.style.border = '0 solid';
29+ for (var i = 0; i < entries.length; ++i) {
30+ var option = newNode('option');
31+ var name = JS.fromString(entries[i]._0);
32+ option.value = name;
33+ option.innerHTML = name;
34+ drop.appendChild(option);
35+ }
36+ drop.addEventListener('change', function() {
37+ elm.notify(signal.id, entries[drop.selectedIndex]._1);
38+ });
3739
38− elm.node.appendChild(t);
39− var style = window.getComputedStyle(t, null);
40− var w = Math.ceil(style.getPropertyValue("width").slice(0,-2) - 0);
41− var h = Math.ceil(style.getPropertyValue("height").slice(0,-2) - 0);
42− elm.node.removeChild(t);
43−
44− var element = A3(newElement, w, h, {
40+ var t = drop.cloneNode(true);
41+ t.style.visibility = "hidden";
42+
43+ elm.node.appendChild(t);
44+ var style = window.getComputedStyle(t, null);
45+ var w = Math.ceil(style.getPropertyValue("width").slice(0,-2) - 0);
46+ var h = Math.ceil(style.getPropertyValue("height").slice(0,-2) - 0);
47+ elm.node.removeChild(t);
48+ return drop;
49+ };
50+ }
51+
52+ function updateDropDown(node, oldModel, newModel) {
53+ }
54+
55+ function dropDown(signal, values) {
56+ return A3(newElement, w, h, {
4557 ctor: 'Custom',
4658 type: 'DropDown',
47− render: function render(model) { return drop; },
48− update: function update(node, oldModel, newModel) {},
59+ render: renderDropDown(signal,values),
60+ update: updateDropDown,
4961 model: {}
5062 });
51−
52− return Tuple2(Signal.constant(element), events);
5363 }
5464
55− function buttons(defaultValue) {
56− var events = Signal.constant(defaultValue);
57−
58− function render(model) {
59− var b = newNode('button');
60− b.style.display = 'block';
61− b.elmEvent = model.event;
62− function click() { elm.notify(events.id, b.elmEvent); }
63− b.addEventListener('click', click);
64− b.innerHTML = model.text;
65− return b;
66− }
67−
68− function update(node, oldModel, newModel) {
69− node.elmEvent = newModel.event;
70− var txt = newModel.text;
71− if (oldModel.text !== txt) node.innerHTML = txt;
72− }
73−
74− function button(evnt, txt) {
75− return A3(newElement, 100, 40, {
76− ctor: 'Custom',
77− type: 'Button',
78− render: render,
79− update: update,
80− model: { event:evnt, text:JS.fromString(txt) }
81− });
65+ function renderButton(model) {
66+ var node = newNode('button');
67+ node.style.display = 'block';
68+ node.elm_signal = model.signal;
69+ node.elm_value = model.value;
70+ function click() {
71+ elm.notify(node.elm_signal.id, node.elm_value);
8272 }
73+ node.addEventListener('click', click);
74+ node.innerHTML = model.text;
75+ return node;
76+ }
8377
84− return { _:{}, button:F2(button), events:events };
78+ function updateButton(node, oldModel, newModel) {
79+ node.elm_signal = newModel.signal;
80+ node.elm_value = nemModel.value;
81+ var txt = newModel.text;
82+ if (oldModel.text !== txt) node.innerHTML = txt;
8583 }
8684
87− function customButtons(defaultValue) {
88− var events = Signal.constant(defaultValue);
85+ function button(signal, value, text) {
86+ return A3(newElement, 100, 40, {
87+ ctor: 'Custom',
88+ type: 'Button',
89+ render: renderButton,
90+ update: updateButton,
91+ model: { signal:signal, value:value, text:JS.fromString(text) }
92+ });
93+ }
8994
90− function render(model) {
91− var btn = newNode('div');
92− btn.elmEvent = model.event;
95+ function renderCustomButton(model) {
96+ var btn = newNode('div');
97+ btn.elm_value = model.value;
9398
94− btn.elmUp = Render.render(model.up);
95− btn.elmHover = Render.render(model.hover);
96− btn.elmDown = Render.render(model.down);
99+ btn.elm_up = Render.render(model.up);
100+ btn.elm_hover = Render.render(model.hover);
101+ btn.elm_down = Render.render(model.down);
97102
98− function replace(node) {
99− if (node !== btn.firstChild) btn.replaceChild(node, btn.firstChild);
100− }
101− var overCount = 0;
102− function over(e) {
103− if (overCount++ > 0) return;
104− replace(btn.elmHover);
105− }
106− function out(e) {
107− if (btn.contains(e.toElement || e.relatedTarget)) return;
108− overCount = 0;
109− replace(btn.elmUp);
110− }
111− function up() {
112− replace(btn.elmHover);
113− elm.notify(events.id, btn.elmEvent);
103+ function replace(node) {
104+ if (node !== btn.firstChild) {
105+ btn.replaceChild(node, btn.firstChild);
114106 }
115− function down() { replace(btn.elmDown); }
116− btn.addEventListener('mouseover', over);
117− btn.addEventListener('mouseout' , out);
118− btn.addEventListener('mousedown', down);
119− btn.addEventListener('mouseup' , up);
120−
121− btn.appendChild(btn.elmUp);
122−
123− var clicker = newNode('div');
124− clicker.style.width = btn.elmUp.style.width;
125− clicker.style.height = btn.elmUp.style.height;
126− clicker.style.position = 'absolute';
127− clicker.style.top = 0;
128− btn.appendChild(clicker);
129−
130− return btn;
131107 }
132−
133− function update(node, oldModel, newModel) {
134− node.elmEvent = newModel.event;
135− Render.update(node.elmUp, oldModel.up, newModel.up)
136− Render.update(node.elmHover, oldModel.hover, newModel.hover)
137− Render.update(node.elmDown, oldModel.down, newModel.down)
108+ var overCount = 0;
109+ function over(e) {
110+ if (overCount++ > 0) return;
111+ replace(btn.elm_hover);
138112 }
139−
140− function button(evnt, up, hover, down) {
141− return A3(newElement,
142− Math.max(up.props.width, hover.props.width, down.props.width),
143− Math.max(up.props.height, hover.props.height, down.props.height),
144− { ctor: 'Custom',
145− type: 'CustomButton',
146− render: render,
147− update: update,
148− model: { event:evnt, up:up, hover:hover, down:down }
149− });
113+ function out(e) {
114+ if (btn.contains(e.toElement || e.relatedTarget)) return;
115+ overCount = 0;
116+ replace(btn.elm_up);
117+ }
118+ function up() {
119+ replace(btn.elm_hover);
120+ elm.notify(btn.elm_signal.id, btn.elm_value);
150121 }
122+ function down() {
123+ replace(btn.elm_down);
124+ }
125+ btn.addEventListener('mouseover', over);
126+ btn.addEventListener('mouseout' , out);
127+ btn.addEventListener('mousedown', down);
128+ btn.addEventListener('mouseup' , up);
151129
152− return { _:{}, customButton:F4(button), events:events };
153− }
130+ btn.appendChild(btn.elm_up);
154131
132+ var clicker = newNode('div');
133+ clicker.style.width = btn.elm_up.style.width;
134+ clicker.style.height = btn.elm_up.style.height;
135+ clicker.style.position = 'absolute';
136+ clicker.style.top = 0;
137+ btn.appendChild(clicker);
155138
156− function hoverables(defaultValue) {
157− var events = Signal.constant(defaultValue);
158− function hoverable(handler, elem) {
159− function onHover(bool) {
160− elm.notify(events.id, handler(bool));
161− }
162− var props = Utils.replace([['hover',onHover]], elem.props);
163− return { props:props, element:elem.element };
164− }
165− return { _:{}, hoverable:F2(hoverable), events:events };
139+ return btn;
166140 }
167141
142+ function updateCustomButton(node, oldModel, newModel) {
143+ node.elm_signal = newModel.signal;
144+ node.elm_value = newModel.value;
145+ Render.update(node.elm_up, oldModel.up, newModel.up)
146+ Render.update(node.elm_hover, oldModel.hover, newModel.hover)
147+ Render.update(node.elm_down, oldModel.down, newModel.down)
148+ }
168149
169− function checkboxes(defaultValue) {
170− var events = Signal.constant(defaultValue);
150+ function max3(a,b,c) {
151+ var ab = a > b ? a : b;
152+ return ab > c ? ab : c;
153+ }
171154
172− function render(model) {
173− var b = newNode('input');
174− b.type = 'checkbox';
175− b.checked = model.checked;
176− b.style.display = 'block';
177− b.elmHandler = model.handler;
178− function change() { elm.notify(events.id, b.elmHandler(b.checked)); }
179− b.addEventListener('change', change);
180− return b;
181− }
155+ function customButton(signal, value, up, hover, down) {
156+ return A3(newElement,
157+ max3(up.props.width, hover.props.width, down.props.width),
158+ max3(up.props.height, hover.props.height, down.props.height),
159+ { ctor: 'Custom',
160+ type: 'CustomButton',
161+ render: renderCustomButton,
162+ update: updateCustomButton,
163+ model: { signal:signal, value:value, up:up, hover:hover, down:down }
164+ });
165+ }
182166
183− function update(node, oldModel, newModel) {
184− node.elmHandler = newModel.handler;
185− node.checked = newModel.checked;
186− return true;
167+ function renderCheckbox(model) {
168+ var node = newNode('input');
169+ node.type = 'checkbox';
170+ node.checked = model.checked;
171+ node.style.display = 'block';
172+ node.elm_signal = model.signal;
173+ node.elm_handler = model.handler;
174+ function change() {
175+ elm.notify(node.elm_signal.id, node.elm_handler(node.checked));
187176 }
177+ node.addEventListener('change', change);
178+ return node;
179+ }
188180
189− function box(handler, checked) {
190− return A3(newElement, 13, 13, {
191− ctor: 'Custom',
192− type: 'CheckBox',
193− render: render,
194− update: update,
195− model: { checked:checked, handler:handler }
196− });
197− }
181+ function updateCheckbox(node, oldModel, newModel) {
182+ node.elm_signal = newModel.signal;
183+ node.elm_handler = newModel.handler;
184+ node.checked = newModel.checked;
185+ return true;
186+ }
198187
199− return { _:{}, checkbox:F2(box), events:events };
188+ function checkbox(signal, handler, checked) {
189+ return A3(newElement, 13, 13, {
190+ ctor: 'Custom',
191+ type: 'CheckBox',
192+ render: renderCheckbox,
193+ update: updateCheckbox,
194+ model: { signal:signal, handler:handler, checked:checked }
195+ });
200196 }
201197
202198 function setRange(node, start, end, dir) {
@@ -207,97 +203,114 @@ Elm.Native.Graphics.Input.make = function(elm) {
207203 }
208204 }
209205
210− function mkTextPool(type) { return function fields(defaultValue) {
211− var events = Signal.constant(defaultValue);
212−
213− var state = null;
214−
215− function render(model) {
216− var field = newNode('input');
217− field.elmHandler = model.handler;
218−
219− field.id = 'test';
220− field.type = type;
221− field.placeholder = JS.fromString(model.placeHolder);
222− field.value = JS.fromString(model.state.string);
223− setRange(field, model.state.selectionStart, model.state.selectionEnd, 'forward');
224− field.style.border = 'none';
225− state = model.state;
226−
227− function update() {
228− var start = field.selectionStart,
229− end = field.selectionEnd;
230− if (field.selectionDirection === 'backward') {
231− start = end;
232− end = field.selectionStart;
233− }
234− state = { _:{},
235− string:JS.toString(field.value),
236− selectionStart:start,
237− selectionEnd:end };
238− elm.notify(events.id, field.elmHandler(state));
239− }
240− function mousedown() {
241− update();
242− elm.node.addEventListener('mouseup', mouseup);
243− }
244− function mouseup() {
245− update();
246− elm.node.removeEventListener('mouseup', mouseup)
206+ function renderField(model) {
207+ var field = newNode('input');
208+ field.elm_signal = model.signal;
209+ field.elm_handler = model.handler;
210+
211+ field.id = 'test';
212+ field.type = type;
213+ field.placeholder = JS.fromString(model.placeHolder);
214+ field.value = JS.fromString(model.state.string);
215+ setRange(field, model.state.selectionStart, model.state.selectionEnd, 'forward');
216+ field.style.border = 'none';
217+ state = model.state;
218+
219+ function update() {
220+ var start = field.selectionStart;
221+ var end = field.selectionEnd;
222+ if (field.selectionDirection === 'backward') {
223+ start = end;
224+ end = field.selectionStart;
247225 }
248− field.addEventListener('keyup', update);
249− field.addEventListener('mousedown', mousedown);
250−
251− return field;
226+ elm.notify(events.id, field.elm_handler({
227+ _:{},
228+ string:JS.toString(field.value),
229+ selectionStart:start,
230+ selectionEnd:end
231+ }));
232+ }
233+ function mousedown() {
234+ update();
235+ elm.node.addEventListener('mouseup', mouseup);
236+ }
237+ function mouseup() {
238+ update();
239+ elm.node.removeEventListener('mouseup', mouseup)
252240 }
241+ field.addEventListener('keyup', update);
242+ field.addEventListener('mousedown', mousedown);
253243
254− function update(node, oldModel, newModel) {
255− node.elmHandler = newModel.handler;
256− if (state === newModel.state) return;
257− var newStr = JS.fromString(newModel.state.string);
258− if (node.value !== newStr) node.value = newStr;
244+ return field;
245+ }
259246
260− var start = newModel.state.selectionStart;
261− var end = newModel.state.selectionEnd;
262− var direction = 'forward';
263− if (end < start) {
264− start = end;
265− end = newModel.state.selectionStart;
266− direction = 'backward';
267− }
268−
269− if (node.selectionStart !== start
270− || node.selectionEnd !== end
271− || node.selectionDirection !== direction) {
272− setRange(node, start, end, direction);
273− }
247+ function updateField(node, oldModel, newModel) {
248+ node.elmHandler = newModel.handler;
249+ var newStr = JS.fromString(newModel.state.string);
250+ if (node.value !== newStr) node.value = newStr;
251+
252+ var start = newModel.state.selectionStart;
253+ var end = newModel.state.selectionEnd;
254+ var direction = 'forward';
255+ if (end < start) {
256+ start = end;
257+ end = newModel.state.selectionStart;
258+ direction = 'backward';
259+ }
260+
261+ if (node.selectionStart !== start
262+ || node.selectionEnd !== end
263+ || node.selectionDirection !== direction) {
264+ setRange(node, start, end, direction);
265+ }
266+ }
267+
268+ function mkField(type) {
269+ function field(signal, handler, placeHolder, state) {
270+ return A3(newElement, 200, 30, {
271+ ctor: 'Custom',
272+ type: type + 'Input',
273+ render: render,
274+ update: update,
275+ model: {
276+ signal:signal,
277+ handler:handler,
278+ placeHolder:placeHolder,
279+ state:state
280+ }
281+ });
274282 }
283+ return F4(field);
284+ }
285+
275286
276− function field(handler, placeHolder, state) {
277− return A3(newElement, 200, 30,
278− { ctor: 'Custom',
279− type: type + 'Input',
280− render: render,
281− update: update,
282− model: { handler:handler,
283− placeHolder:placeHolder,
284− state:state }
285− });
287+ function hoverable(signal, handler, element) {
288+ function onHover(bool) {
289+ elm.notify(signal.id, handler(bool));
286290 }
291+ var props = Utils.replace([['hover',onHover]], elem.props);
292+ return { props:props, element:elem.element };
293+ }
287294
288− return { _:{}, field:F3(field), events:events };
295+ function clickable(signal, value, element) {
296+ function onClick(bool) {
297+ elm.notify(signal.id, value);
298+ }
299+ var props = Utils.replace([['click',onClick]], elem.props);
300+ return { props:props, element:elem.element };
289301 }
290− }
291302
292303 return elm.Native.Graphics.Input.values = {
293− buttons:buttons,
294− customButtons:customButtons,
295− hoverables:hoverables,
296− checkboxes:checkboxes,
297− fields:mkTextPool('text'),
298− emails:mkTextPool('email'),
299− passwords:mkTextPool('password'),
300− dropDown:dropDown
304+ input:input,
305+ button:F3(button),
306+ customButton:F5(customButton),
307+ checkbox:F3(checkbox),
308+ dropDown:F2(dropDown),
309+ field:mkField('text'),
310+ email:mkField('email'),
311+ password:mkField('password'),
312+ hoverable:F3(hoverable),
313+ clickable:F3(clickable)
301314 };
302315
303316};