@@ -1,303 +1,407 @@
1Elm.Native.Graphics.Input = {};
1Elm.Native.Graphics.Input = {};
2Elm.Native.Graphics.Input.make = function(elm) {
2Elm.Native.Graphics.Input.make = function(elm) {
4− elm.Native = elm.Native || {};
3+ elm.Native = elm.Native || {};
5− elm.Native.Graphics = elm.Native.Graphics || {};
4+ elm.Native.Graphics = elm.Native.Graphics || {};
6− elm.Native.Graphics.Input = elm.Native.Graphics.Input || {};
5+ elm.Native.Graphics.Input = elm.Native.Graphics.Input || {};
7− if (elm.Native.Graphics.Input.values) return elm.Native.Graphics.Input.values;
6+ if (elm.Native.Graphics.Input.values) return elm.Native.Graphics.Input.values;
9− var Render = ElmRuntime.use(ElmRuntime.Render.Element);
8+ var Render = ElmRuntime.use(ElmRuntime.Render.Element);
10− var newNode = ElmRuntime.use(ElmRuntime.Render.Utils).newElement;
9+ var newNode = ElmRuntime.use(ElmRuntime.Render.Utils).newElement;
11+ var toCss = Elm.Native.Color.make(elm).toCss;
12+ var Text = Elm.Native.Text.make(elm);
12− var Signal = Elm.Signal.make(elm);
13+ var Signal = Elm.Signal.make(elm);
13− var newElement = Elm.Graphics.Element.make(elm).newElement;
14+ var newElement = Elm.Graphics.Element.make(elm).newElement;
14− var JS = Elm.Native.JavaScript.make(elm);
15+ var JS = Elm.Native.JavaScript.make(elm);
15− var Utils = Elm.Native.Utils.make(elm);
16+ var Utils = Elm.Native.Utils.make(elm);
16− var Tuple2 = Utils.Tuple2;
17+ var Tuple2 = Utils.Tuple2;
19+ function input(initialValue) {
20+ var signal = Signal.constant(initialValue);
21+ return { _:{}, signal:signal, handle:signal };
18− function dropDown(values) {
24+ function renderDropDown(signal, values) {
19− var entries = JS.fromList(values);
26+ var entries = JS.fromList(values);
20− var events = Signal.constant(entries[0]._1);
27+
22− var drop = newNode('select');
28+ var drop = newNode('select');
23− drop.style.border = '0 solid';
29+ drop.style.border = '0 solid';
30+ drop.style.pointerEvents = 'auto';
24− for (var i = 0; i < entries.length; ++i) {
31+ for (var i = 0; i < entries.length; ++i) {
25− var option = newNode('option');
32+ var option = newNode('option');
26− var name = JS.fromString(entries[i]._0);
33+ var name = JS.fromString(entries[i]._0);
27− option.value = name;
34+ option.value = name;
28− option.innerHTML = name;
35+ option.innerHTML = name;
29− drop.appendChild(option);
36+ drop.appendChild(option);
31− drop.addEventListener('change', function() {
38+ drop.addEventListener('change', function() {
32− elm.notify(events.id, entries[drop.selectedIndex]._1);
39+ elm.notify(signal.id, entries[drop.selectedIndex]._1);
35− var t = drop.cloneNode(true);
42+ var t = drop.cloneNode(true);
36− t.style.visibility = "hidden";
43+ t.style.visibility = "hidden";
38− elm.node.appendChild(t);
45+ elm.node.appendChild(t);
39− var style = window.getComputedStyle(t, null);
46+ var style = window.getComputedStyle(t, null);
40− var w = Math.ceil(style.getPropertyValue("width").slice(0,-2) - 0);
47+ var w = Math.ceil(style.getPropertyValue("width").slice(0,-2) - 0);
41− var h = Math.ceil(style.getPropertyValue("height").slice(0,-2) - 0);
48+ var h = Math.ceil(style.getPropertyValue("height").slice(0,-2) - 0);
42− elm.node.removeChild(t);
49+ elm.node.removeChild(t);
54+ function updateDropDown(node, oldModel, newModel) {
57+ function dropDown(signal, values) {
44− var element = A3(newElement, w, h, {
58+ return A3(newElement, 100, 24, {
45− ctor: 'Custom',
59+ ctor: 'Custom',
46− type: 'DropDown',
60+ type: 'DropDown',
47− render: function render(model) { return drop; },
61+ render: renderDropDown(signal,values),
48− update: function update(node, oldModel, newModel) {},
62+ update: updateDropDown,
49− model: {}
63+ model: {}
52− return Tuple2(Signal.constant(element), events);
55− function buttons(defaultValue) {
67+ function renderButton(model) {
56− var events = Signal.constant(defaultValue);
68+ var node = newNode('button');
57−
69+ node.style.display = 'block';
58− function render(model) {
70+ node.style.pointerEvents = 'auto';
59− var b = newNode('button');
71+ node.elm_signal = model.signal;
60− b.style.display = 'block';
72+ node.elm_value = model.value;
61− b.elmEvent = model.event;
62− function click() { elm.notify(events.id, b.elmEvent); }
73+ function click() {
74+ elm.notify(node.elm_signal.id, node.elm_value);
63− b.addEventListener('click', click);
76+ node.addEventListener('click', click);
64− b.innerHTML = model.text;
77+ node.innerHTML = model.text;
65− return b;
78+ return node;
68− function update(node, oldModel, newModel) {
81+ function updateButton(node, oldModel, newModel) {
82+ node.elm_signal = newModel.signal;
69− node.elmEvent = newModel.event;
83+ node.elm_value = newModel.value;
70− var txt = newModel.text;
84+ var txt = newModel.text;
71− if (oldModel.text !== txt) node.innerHTML = txt;
85+ if (oldModel.text !== txt) node.innerHTML = txt;
74− function button(evnt, txt) {
88+ function button(signal, value, text) {
75− return A3(newElement, 100, 40, {
89+ return A3(newElement, 100, 40, {
76− ctor: 'Custom',
90+ ctor: 'Custom',
77− type: 'Button',
91+ type: 'Button',
78− render: render,
92+ render: renderButton,
79− update: update,
93+ update: updateButton,
80− model: { event:evnt, text:JS.fromString(txt) }
94+ model: { signal:signal, value:value, text:JS.fromString(text) }
84− return { _:{}, button:F2(button), events:events };
98+ function renderCustomButton(model) {
85− }
99+ var btn = newNode('div');
86−
100+ btn.style.pointerEvents = 'auto';
87− function customButtons(defaultValue) {
101+ btn.elm_signal = model.signal;
88− var events = Signal.constant(defaultValue);
102+ btn.elm_value = model.value;
90− function render(model) {
91− var btn = newNode('div');
92− btn.elmEvent = model.event;
94− btn.elmUp = Render.render(model.up);
104+ btn.elm_up = Render.render(model.up);
95− btn.elmHover = Render.render(model.hover);
105+ btn.elm_hover = Render.render(model.hover);
96− btn.elmDown = Render.render(model.down);
106+ btn.elm_down = Render.render(model.down);
98− function replace(node) {
108+ function replace(node) {
109+ if (node !== btn.firstChild) {
99− if (node !== btn.firstChild) btn.replaceChild(node, btn.firstChild);
110+ btn.replaceChild(node, btn.firstChild);
101− var overCount = 0;
113+ var overCount = 0;
102− function over(e) {
114+ function over(e) {
103− if (overCount++ > 0) return;
115+ if (overCount++ > 0) return;
104− replace(btn.elmHover);
116+ replace(btn.elm_hover);
106− function out(e) {
118+ function out(e) {
107− if (btn.contains(e.toElement || e.relatedTarget)) return;
119+ if (btn.contains(e.toElement || e.relatedTarget)) return;
108− overCount = 0;
120+ overCount = 0;
109− replace(btn.elmUp);
121+ replace(btn.elm_up);
111− function up() {
123+ function up() {
112− replace(btn.elmHover);
124+ replace(btn.elm_hover);
113− elm.notify(events.id, btn.elmEvent);
125+ elm.notify(btn.elm_signal.id, btn.elm_value);
115− function down() { replace(btn.elmDown); }
127+ function down() {
128+ replace(btn.elm_down);
116− btn.addEventListener('mouseover', over);
130+ btn.addEventListener('mouseover', over);
117− btn.addEventListener('mouseout' , out);
131+ btn.addEventListener('mouseout' , out);
118− btn.addEventListener('mousedown', down);
132+ btn.addEventListener('mousedown', down);
119− btn.addEventListener('mouseup' , up);
133+ btn.addEventListener('mouseup' , up);
121− btn.appendChild(btn.elmUp);
135+ btn.appendChild(btn.elm_up);
123− var clicker = newNode('div');
137+ var clicker = newNode('div');
124− clicker.style.width = btn.elmUp.style.width;
138+ clicker.style.width = btn.elm_up.style.width;
125− clicker.style.height = btn.elmUp.style.height;
139+ clicker.style.height = btn.elm_up.style.height;
126− clicker.style.position = 'absolute';
140+ clicker.style.position = 'absolute';
127− clicker.style.top = 0;
141+ clicker.style.top = 0;
128− btn.appendChild(clicker);
142+ btn.appendChild(clicker);
130− return btn;
144+ return btn;
133− function update(node, oldModel, newModel) {
147+ function updateCustomButton(node, oldModel, newModel) {
134− node.elmEvent = newModel.event;
148+ var signal = newModel.signal;
149+ node.elm_up.elm_signal = signal;
150+ node.elm_hover.elm_signal = signal;
151+ node.elm_down.elm_signal = signal;
153+ var value = newModel.value;
154+ node.elm_up.elm_value = value;
155+ node.elm_hover.elm_value = value;
156+ node.elm_down.elm_value = value;
135− Render.update(node.elmUp, oldModel.up, newModel.up)
158+ Render.update(node.elm_up, oldModel.up, newModel.up)
136− Render.update(node.elmHover, oldModel.hover, newModel.hover)
159+ Render.update(node.elm_hover, oldModel.hover, newModel.hover)
137− Render.update(node.elmDown, oldModel.down, newModel.down)
160+ Render.update(node.elm_down, oldModel.down, newModel.down)
140− function button(evnt, up, hover, down) {
163+ function max3(a,b,c) {
164+ var ab = a > b ? a : b;
165+ return ab > c ? ab : c;
168+ function customButton(signal, value, up, hover, down) {
141− return A3(newElement,
169+ return A3(newElement,
142− Math.max(up.props.width, hover.props.width, down.props.width),
170+ max3(up.props.width, hover.props.width, down.props.width),
143− Math.max(up.props.height, hover.props.height, down.props.height),
171+ max3(up.props.height, hover.props.height, down.props.height),
144− { ctor: 'Custom',
172+ { ctor: 'Custom',
145− type: 'CustomButton',
173+ type: 'CustomButton',
146− render: render,
174+ render: renderCustomButton,
147− update: update,
175+ update: updateCustomButton,
148− model: { event:evnt, up:up, hover:hover, down:down }
176+ model: { signal:signal, value:value, up:up, hover:hover, down:down }
152− return { _:{}, customButton:F4(button), events:events };
155−
180+ function renderCheckbox(model) {
156− function hoverables(defaultValue) {
181+ var node = newNode('input');
157− var events = Signal.constant(defaultValue);
182+ node.type = 'checkbox';
158− function hoverable(handler, elem) {
183+ node.checked = model.checked;
159− function onHover(bool) {
184+ node.style.display = 'block';
160− elm.notify(events.id, handler(bool));
185+ node.style.pointerEvents = 'auto';
161− }
186+ node.elm_signal = model.signal;
162− var props = Utils.replace([['hover',onHover]], elem.props);
163− return { props:props, element:elem.element };
165− return { _:{}, hoverable:F2(hoverable), events:events };
169− function checkboxes(defaultValue) {
170− var events = Signal.constant(defaultValue);
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;
187+ node.elm_handler = model.handler;
178− function change() { elm.notify(events.id, b.elmHandler(b.checked)); }
188+ function change() {
189+ elm.notify(node.elm_signal.id, node.elm_handler(node.checked));
179− b.addEventListener('change', change);
191+ node.addEventListener('change', change);
180− return b;
192+ return node;
183− function update(node, oldModel, newModel) {
195+ function updateCheckbox(node, oldModel, newModel) {
184− node.elmHandler = newModel.handler;
196+ node.elm_signal = newModel.signal;
197+ node.elm_handler = newModel.handler;
185− node.checked = newModel.checked;
198+ node.checked = newModel.checked;
186− return true;
199+ return true;
189− function box(handler, checked) {
202+ function checkbox(signal, handler, checked) {
190− return A3(newElement, 13, 13, {
203+ return A3(newElement, 13, 13, {
191− ctor: 'Custom',
204+ ctor: 'Custom',
192− type: 'CheckBox',
205+ type: 'CheckBox',
193− render: render,
206+ render: renderCheckbox,
194− update: update,
207+ update: updateCheckbox,
195− model: { checked:checked, handler:handler }
208+ model: { signal:signal, handler:handler, checked:checked }
199− return { _:{}, checkbox:F2(box), events:events };
202− function setRange(node, start, end, dir) {
212+ function setRange(node, start, end, dir) {
203− if (node.parentNode) {
213+ if (node.parentNode) {
204− node.setSelectionRange(start, end, dir);
214+ node.setSelectionRange(start, end, dir);
205− } else {
215+ } else {
206− setTimeout(function(){node.setSelectionRange(start, end, dir);}, 0);
216+ setTimeout(function(){node.setSelectionRange(start, end, dir);}, 0);
210− function mkTextPool(type) { return function fields(defaultValue) {
220+ function updateIfNeeded(css, attribute, latestAttribute) {
211− var events = Signal.constant(defaultValue);
221+ if (css[attribute] !== latestAttribute) {
212−
222+ css[attribute] = latestAttribute;
213− var state = null;
223+ }
215− function render(model) {
225+ function cssDimensions(dimensions) {
216− var field = newNode('input');
226+ return dimensions.top + 'px ' +
217− field.elmHandler = model.handler;
227+ dimensions.right + 'px ' +
218−
228+ dimensions.bottom + 'px ' +
219− field.id = 'test';
229+ dimensions.left + 'px';
220− field.type = type;
230+ }
221− field.placeholder = JS.fromString(model.placeHolder);
231+ function updateFieldStyle(css, style) {
222− field.value = JS.fromString(model.state.string);
232+ updateIfNeeded(css, 'padding', cssDimensions(style.padding));
223− setRange(field, model.state.selectionStart, model.state.selectionEnd, 'forward');
233+
224− field.style.border = 'none';
234+ var outline = style.outline;
225− state = model.state;
235+ updateIfNeeded(css, 'border-width', cssDimensions(outline.width));
226−
236+ updateIfNeeded(css, 'border-color', toCss(outline.color));
237+ updateIfNeeded(css, 'border-radius', outline.radius + 'px');
239+ var highlight = style.highlight;
240+ if (highlight.width === 0) {
241+ css.outline = 'none';
243+ updateIfNeeded(css, 'outline-width', highlight.width + 'px');
244+ updateIfNeeded(css, 'outline-color', toCss(highlight.color));
247+ var textStyle = style.style;
248+ updateIfNeeded(css, 'color', toCss(textStyle.color));
249+ if (textStyle.typeface.ctor !== '[]') {
250+ updateIfNeeded(css, 'font-family', Text.toTypefaces(textStyle.typeface));
252+ if (textStyle.height.ctor !== "Nothing") {
253+ updateIfNeeded(css, 'font-size', textStyle.height._0 + 'px');
255+ updateIfNeeded(css, 'font-weight', textStyle.bold ? 'bold' : 'normal');
256+ updateIfNeeded(css, 'font-style', textStyle.italic ? 'italic' : 'normal');
257+ if (textStyle.line.ctor !== 'Nothing') {
258+ updateIfNeeded(css, 'text-decoration', Text.toLine(textStyle.line._0));
262+ function renderField(model) {
263+ var field = newNode('input');
264+ updateFieldStyle(field.style, model.style);
265+ field.style.borderStyle = 'solid';
266+ field.style.pointerEvents = 'auto';
268+ field.type = model.type;
269+ field.placeholder = JS.fromString(model.placeHolder);
270+ field.value = JS.fromString(model.content.string);
272+ field.elm_signal = model.signal;
273+ field.elm_handler = model.handler;
274+ field.elm_old_value = field.value;
227− function update() {
276+ function inputUpdate(event) {
228− var start = field.selectionStart,
277+ var curr = field.elm_old_value;
229− end = field.selectionEnd;
278+ var next = field.value;
279+ if (curr === next) {
230− if (field.selectionDirection === 'backward') {
283+ var direction = field.selectionDirection === 'forward' ? 'Forward' : 'Backward';
231− start = end;
284+ var start = field.selectionStart;
232− end = field.selectionStart;
285+ var end = field.selectionEnd;
233− }
286+ field.value = field.elm_old_value;
288+ elm.notify(field.elm_signal.id, field.elm_handler({
235− string:JS.toString(field.value),
290+ string: JS.toString(next),
236− selectionStart:start,
291+ selection: {
237− selectionEnd:end };
292+ _:{},
295+ direction: { ctor: direction }
300+ function mouseUpdate(event) {
301+ var direction = field.selectionDirection === 'forward' ? 'Forward' : 'Backward';
238− elm.notify(events.id, field.elmHandler(state));
302+ elm.notify(field.elm_signal.id, field.elm_handler({
304+ string: field.value,
307+ start: field.selectionStart,
308+ end: field.selectionEnd,
309+ direction: { ctor: direction }
240− function mousedown() {
313+ function mousedown(event) {
241− update();
314+ mouseUpdate(event);
242− elm.node.addEventListener('mouseup', mouseup);
315+ elm.node.addEventListener('mouseup', mouseup);
244− function mouseup() {
317+ function mouseup(event) {
245− update();
318+ mouseUpdate(event);
246− elm.node.removeEventListener('mouseup', mouseup)
319+ elm.node.removeEventListener('mouseup', mouseup)
248− field.addEventListener('keyup', update);
321+ field.addEventListener('input', inputUpdate);
249− field.addEventListener('mousedown', mousedown);
322+ field.addEventListener('mousedown', mousedown);
250−
323+ field.addEventListener('focus', function() {
324+ field.elm_hasFocus = true;
326+ field.addEventListener('blur', function() {
327+ field.elm_hasFocus = false;
251− return field;
330+ return field;
254− function update(node, oldModel, newModel) {
333+ function updateField(field, oldModel, newModel) {
255− node.elmHandler = newModel.handler;
334+ if (oldModel.style !== newModel.style) {
256− if (state === newModel.state) return;
335+ updateFieldStyle(field.style, newModel.style);
257− var newStr = JS.fromString(newModel.state.string);
336+ }
258− if (node.value !== newStr) node.value = newStr;
337+ field.elm_signal = newModel.signal;
259−
338+ field.elm_handler = newModel.handler;
260− var start = newModel.state.selectionStart;
339+
261− var end = newModel.state.selectionEnd;
340+ field.type = newModel.type;
262− var direction = 'forward';
341+ field.placeholder = JS.fromString(newModel.placeHolder);
263− if (end < start) {
342+ var value = JS.fromString(newModel.content.string);
264− start = end;
343+ field.value = value;
265− end = newModel.state.selectionStart;
344+ field.elm_old_value = value;
266− direction = 'backward';
345+ if (field.elm_hasFocus) {
267− }
346+ var selection = newModel.content.selection;
268−
347+ var direction = selection.direction.ctor === 'Forward' ? 'forward' : 'backward';
269− if (node.selectionStart !== start
270− || node.selectionEnd !== end
271− || node.selectionDirection !== direction) {
272− setRange(node, start, end, direction);
348+ setRange(field, selection.start, selection.end, direction);
352+ function mkField(type) {
276− function field(handler, placeHolder, state) {
353+ function field(style, signal, handler, placeHolder, content) {
354+ var padding = style.padding;
355+ var outline = style.outline.width;
356+ var adjustWidth = padding.left + padding.right + outline.left + outline.right;
357+ var adjustHeight = padding.top + padding.bottom + outline.top + outline.bottom;
277− return A3(newElement, 200, 30,
358+ return A3(newElement, 200, 30, {
278− { ctor: 'Custom',
359+ ctor: 'Custom',
279− type: type + 'Input',
360+ type: type + 'Field',
361+ adjustWidth: adjustWidth,
362+ adjustHeight: adjustHeight,
280− render: render,
363+ render: renderField,
281− update: update,
364+ update: updateField,
282− model: { handler:handler,
367+ handler:handler,
283− placeHolder:placeHolder,
368+ placeHolder:placeHolder,
284− state:state }
369+ content:content,
287−
375+ return F5(field);
288− return { _:{}, field:F3(field), events:events };
376+ }
378+ function hoverable(signal, handler, elem) {
379+ function onHover(bool) {
380+ elm.notify(signal.id, handler(bool));
382+ var props = Utils.replace([['hover',onHover]], elem.props);
383+ return { props:props, element:elem.element };
386+ function clickable(signal, value, elem) {
387+ function onClick(bool) {
388+ elm.notify(signal.id, value);
291−
390+ var props = Utils.replace([['click',onClick]], elem.props);
391+ return { props:props, element:elem.element };
292− return elm.Native.Graphics.Input.values = {
394+ return elm.Native.Graphics.Input.values = {
293− buttons:buttons,
395+ input:input,
294− customButtons:customButtons,
396+ button:F3(button),
295− hoverables:hoverables,
397+ customButton:F5(customButton),
296− checkboxes:checkboxes,
398+ checkbox:F3(checkbox),
297− fields:mkTextPool('text'),
399+ dropDown:F2(dropDown),
298− emails:mkTextPool('email'),
400+ field:mkField('text'),
299− passwords:mkTextPool('password'),
401+ email:mkField('email'),
300− dropDown:dropDown
402+ password:mkField('password'),
403+ hoverable:F3(hoverable),
404+ clickable:F3(clickable)