git.iko.soy/elk
on 49901dc help sign in
elk/libraries/Native/Graphics/Input.js
315 lines 10 kB history raw
1Elm.Native.Graphics.Input = {};
2Elm.Native.Graphics.Input.make = function(elm) {
4 elm.Native = elm.Native || {};
5 elm.Native.Graphics = elm.Native.Graphics || {};
6 elm.Native.Graphics.Input = elm.Native.Graphics.Input || {};
7 if (elm.Native.Graphics.Input.values) return elm.Native.Graphics.Input.values;
9 var Render = ElmRuntime.use(ElmRuntime.Render.Element);
10 var newNode = ElmRuntime.use(ElmRuntime.Render.Utils).newElement;
12 var Signal = Elm.Signal.make(elm);
13 var newElement = Elm.Graphics.Element.make(elm).newElement;
14 var JS = Elm.Native.JavaScript.make(elm);
15 var Utils = Elm.Native.Utils.make(elm);
16 var Tuple2 = Utils.Tuple2;
18 function input(initialValue) {
19 var sig = Signal.constant(initialValue);
20 return Tuple2(sig, sig);
21 }
23 function renderDropDown(signal, values) {
24 return function(_) {
25 var entries = JS.fromList(values);
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 });
40 var t = drop.cloneNode(true);
41 t.style.visibility = "hidden";
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 }
52 function updateDropDown(node, oldModel, newModel) {
53 }
55 function dropDown(signal, values) {
56 return A3(newElement, w, h, {
57 ctor: 'Custom',
58 type: 'DropDown',
59 render: renderDropDown(signal,values),
60 update: updateDropDown,
61 model: {}
62 });
63 }
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);
72 }
73 node.addEventListener('click', click);
74 node.innerHTML = model.text;
75 return node;
76 }
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;
83 }
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 }
95 function renderCustomButton(model) {
96 var btn = newNode('div');
97 btn.elm_value = model.value;
99 btn.elm_up = Render.render(model.up);
100 btn.elm_hover = Render.render(model.hover);
101 btn.elm_down = Render.render(model.down);
103 function replace(node) {
104 if (node !== btn.firstChild) {
105 btn.replaceChild(node, btn.firstChild);
106 }
107 }
108 var overCount = 0;
109 function over(e) {
110 if (overCount++ > 0) return;
111 replace(btn.elm_hover);
112 }
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);
121 }
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);
130 btn.appendChild(btn.elm_up);
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);
139 return btn;
140 }
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 }
150 function max3(a,b,c) {
151 var ab = a > b ? a : b;
152 return ab > c ? ab : c;
153 }
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 }
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));
176 }
177 node.addEventListener('change', change);
178 return node;
179 }
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 }
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 });
196 }
198 function setRange(node, start, end, dir) {
199 if (node.parentNode) {
200 node.setSelectionRange(start, end, dir);
201 } else {
202 setTimeout(function(){node.setSelectionRange(start, end, dir);}, 0);
203 }
204 }
206 function renderField(model) {
207 var field = newNode('input');
208 field.elm_signal = model.signal;
209 field.elm_handler = model.handler;
211 field.type = model.type;
212 field.placeholder = JS.fromString(model.placeHolder);
213 field.value = JS.fromString(model.content.string);
214 var selection = model.content.selection;
215 var direction = selection.direction.ctor === 'Forward' ? 'forward' : 'backward';
216 setRange(field, selection.start, selection.end, direction);
217 field.style.border = 'none';
219 function update() {
220 var direction = field.selectionDirection === 'backward' ? 'Backward' : 'Forward';
221 elm.notify(field.elm_signal.id, field.elm_handler({
222 _:{},
223 string:JS.toString(field.value),
224 selection: {
225 start:field.selectionStart,
226 end:field.selectionEnd,
227 direction: { ctor:direction }
228 },
229 }));
230 }
231 function mousedown() {
232 update();
233 elm.node.addEventListener('mouseup', mouseup);
234 }
235 function mouseup() {
236 update();
237 elm.node.removeEventListener('mouseup', mouseup)
238 }
239 field.addEventListener('keyup', update);
240 field.addEventListener('mousedown', mousedown);
242 return field;
243 }
245 function updateField(node, oldModel, newModel) {
246 node.elmHandler = newModel.handler;
247 var newStr = JS.fromString(newModel.content.string);
248 if (node.value !== newStr) node.value = newStr;
250 var selection = newModel.content.selection;
251 var start = selection.start;
252 var end = selection.end;
253 var direction = selection.direction.ctor === 'Forward' ? 'forward' : 'backward';
254 if (end < start) {
255 start = end;
256 end = selection.start;
257 }
259 if (node.selectionStart !== start
260 || node.selectionEnd !== end
261 || node.selectionDirection !== direction) {
262 setRange(node, start, end, direction);
263 }
264 }
266 function mkField(type) {
267 function field(signal, handler, placeHolder, content) {
268 return A3(newElement, 200, 30, {
269 ctor: 'Custom',
270 type: type + 'Input',
271 render: renderField,
272 update: updateField,
273 model: {
274 signal:signal,
275 handler:handler,
276 placeHolder:placeHolder,
277 content:content,
278 type:type
279 }
280 });
281 }
282 return F4(field);
283 }
286 function hoverable(signal, handler, element) {
287 function onHover(bool) {
288 elm.notify(signal.id, handler(bool));
289 }
290 var props = Utils.replace([['hover',onHover]], elem.props);
291 return { props:props, element:elem.element };
292 }
294 function clickable(signal, value, element) {
295 function onClick(bool) {
296 elm.notify(signal.id, value);
297 }
298 var props = Utils.replace([['click',onClick]], elem.props);
299 return { props:props, element:elem.element };
300 }
302 return elm.Native.Graphics.Input.values = {
303 input:input,
304 button:F3(button),
305 customButton:F5(customButton),
306 checkbox:F3(checkbox),
307 dropDown:F2(dropDown),
308 field:mkField('text'),
309 email:mkField('email'),
310 password:mkField('password'),
311 hoverable:F3(hoverable),
312 clickable:F3(clickable)
313 };
315};