git.iko.soy/elk
on eca8620 help sign in
elk/libraries/Native/Graphics/Input.js
328 lines 11 kB history raw
1Elm.Native.Graphics.Input = {};
2Elm.Native.Graphics.Input.make = function(elm) {
3 elm.Native = elm.Native || {};
4 elm.Native.Graphics = elm.Native.Graphics || {};
5 elm.Native.Graphics.Input = elm.Native.Graphics.Input || {};
6 if (elm.Native.Graphics.Input.values) return elm.Native.Graphics.Input.values;
8 var Render = ElmRuntime.use(ElmRuntime.Render.Element);
9 var newNode = ElmRuntime.use(ElmRuntime.Render.Utils).newElement;
11 var Signal = Elm.Signal.make(elm);
12 var newElement = Elm.Graphics.Element.make(elm).newElement;
13 var JS = Elm.Native.JavaScript.make(elm);
14 var Utils = Elm.Native.Utils.make(elm);
15 var Tuple2 = Utils.Tuple2;
17 function input(initialValue) {
18 var signal = Signal.constant(initialValue);
19 return { _:{}, signal:signal, handle:signal };
20 }
22 function renderDropDown(signal, values) {
23 return function(_) {
24 var entries = JS.fromList(values);
26 var drop = newNode('select');
27 drop.style.border = '0 solid';
28 drop.style.pointerEvents = 'auto';
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, 100, 24, {
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.style.pointerEvents = 'auto';
69 node.elm_signal = model.signal;
70 node.elm_value = model.value;
71 function click() {
72 elm.notify(node.elm_signal.id, node.elm_value);
73 }
74 node.addEventListener('click', click);
75 node.innerHTML = model.text;
76 return node;
77 }
79 function updateButton(node, oldModel, newModel) {
80 node.elm_signal = newModel.signal;
81 node.elm_value = nemModel.value;
82 var txt = newModel.text;
83 if (oldModel.text !== txt) node.innerHTML = txt;
84 }
86 function button(signal, value, text) {
87 return A3(newElement, 100, 40, {
88 ctor: 'Custom',
89 type: 'Button',
90 render: renderButton,
91 update: updateButton,
92 model: { signal:signal, value:value, text:JS.fromString(text) }
93 });
94 }
96 function renderCustomButton(model) {
97 var btn = newNode('div');
98 btn.style.pointerEvents = 'auto';
99 btn.elm_signal = model.signal;
100 btn.elm_value = model.value;
102 btn.elm_up = Render.render(model.up);
103 btn.elm_hover = Render.render(model.hover);
104 btn.elm_down = Render.render(model.down);
106 function replace(node) {
107 if (node !== btn.firstChild) {
108 btn.replaceChild(node, btn.firstChild);
109 }
110 }
111 var overCount = 0;
112 function over(e) {
113 if (overCount++ > 0) return;
114 replace(btn.elm_hover);
115 }
116 function out(e) {
117 if (btn.contains(e.toElement || e.relatedTarget)) return;
118 overCount = 0;
119 replace(btn.elm_up);
120 }
121 function up() {
122 replace(btn.elm_hover);
123 elm.notify(btn.elm_signal.id, btn.elm_value);
124 }
125 function down() {
126 replace(btn.elm_down);
127 }
128 btn.addEventListener('mouseover', over);
129 btn.addEventListener('mouseout' , out);
130 btn.addEventListener('mousedown', down);
131 btn.addEventListener('mouseup' , up);
133 btn.appendChild(btn.elm_up);
135 var clicker = newNode('div');
136 clicker.style.width = btn.elm_up.style.width;
137 clicker.style.height = btn.elm_up.style.height;
138 clicker.style.position = 'absolute';
139 clicker.style.top = 0;
140 btn.appendChild(clicker);
142 return btn;
143 }
145 function updateCustomButton(node, oldModel, newModel) {
146 var signal = newModel.signal;
147 node.elm_up.elm_signal = signal;
148 node.elm_hover.elm_signal = signal;
149 node.elm_down.elm_signal = signal;
151 var value = newModel.value;
152 node.elm_up.elm_value = value;
153 node.elm_hover.elm_value = value;
154 node.elm_down.elm_value = value;
156 Render.update(node.elm_up, oldModel.up, newModel.up)
157 Render.update(node.elm_hover, oldModel.hover, newModel.hover)
158 Render.update(node.elm_down, oldModel.down, newModel.down)
159 }
161 function max3(a,b,c) {
162 var ab = a > b ? a : b;
163 return ab > c ? ab : c;
164 }
166 function customButton(signal, value, up, hover, down) {
167 return A3(newElement,
168 max3(up.props.width, hover.props.width, down.props.width),
169 max3(up.props.height, hover.props.height, down.props.height),
170 { ctor: 'Custom',
171 type: 'CustomButton',
172 render: renderCustomButton,
173 update: updateCustomButton,
174 model: { signal:signal, value:value, up:up, hover:hover, down:down }
175 });
176 }
178 function renderCheckbox(model) {
179 var node = newNode('input');
180 node.type = 'checkbox';
181 node.checked = model.checked;
182 node.style.display = 'block';
183 node.style.pointerEvents = 'auto';
184 node.elm_signal = model.signal;
185 node.elm_handler = model.handler;
186 function change() {
187 elm.notify(node.elm_signal.id, node.elm_handler(node.checked));
188 }
189 node.addEventListener('change', change);
190 return node;
191 }
193 function updateCheckbox(node, oldModel, newModel) {
194 node.elm_signal = newModel.signal;
195 node.elm_handler = newModel.handler;
196 node.checked = newModel.checked;
197 return true;
198 }
200 function checkbox(signal, handler, checked) {
201 return A3(newElement, 13, 13, {
202 ctor: 'Custom',
203 type: 'CheckBox',
204 render: renderCheckbox,
205 update: updateCheckbox,
206 model: { signal:signal, handler:handler, checked:checked }
207 });
208 }
210 function setRange(node, start, end, dir) {
211 if (node.parentNode) {
212 node.setSelectionRange(start, end, dir);
213 } else {
214 setTimeout(function(){node.setSelectionRange(start, end, dir);}, 0);
215 }
216 }
218 function renderField(model) {
219 var field = newNode('input');
220 field.style.pointerEvents = 'auto';
221 field.elm_signal = model.signal;
222 field.elm_handler = model.handler;
224 field.type = model.type;
225 field.placeholder = JS.fromString(model.placeHolder);
226 field.value = JS.fromString(model.content.string);
227 var selection = model.content.selection;
228 var direction = selection.direction.ctor === 'Forward' ? 'forward' : 'backward';
229 setRange(field, selection.start, selection.end, direction);
230 field.style.border = 'none';
232 function update() {
233 var direction = field.selectionDirection === 'backward' ? 'Backward' : 'Forward';
234 elm.notify(field.elm_signal.id, field.elm_handler({
235 _:{},
236 string:JS.toString(field.value),
237 selection: {
238 start:field.selectionStart,
239 end:field.selectionEnd,
240 direction: { ctor:direction }
241 },
242 }));
243 }
244 function mousedown() {
245 update();
246 elm.node.addEventListener('mouseup', mouseup);
247 }
248 function mouseup() {
249 update();
250 elm.node.removeEventListener('mouseup', mouseup)
251 }
252 field.addEventListener('keyup', update);
253 field.addEventListener('mousedown', mousedown);
255 return field;
256 }
258 function updateField(node, oldModel, newModel) {
259 node.elmHandler = newModel.handler;
260 var newStr = JS.fromString(newModel.content.string);
261 if (node.value !== newStr) node.value = newStr;
263 var selection = newModel.content.selection;
264 var start = selection.start;
265 var end = selection.end;
266 var direction = selection.direction.ctor === 'Forward' ? 'forward' : 'backward';
267 if (end < start) {
268 start = end;
269 end = selection.start;
270 }
272 if (node.selectionStart !== start
273 || node.selectionEnd !== end
274 || node.selectionDirection !== direction) {
275 setRange(node, start, end, direction);
276 }
277 }
279 function mkField(type) {
280 function field(signal, handler, placeHolder, content) {
281 return A3(newElement, 200, 30, {
282 ctor: 'Custom',
283 type: type + 'Input',
284 render: renderField,
285 update: updateField,
286 model: {
287 signal:signal,
288 handler:handler,
289 placeHolder:placeHolder,
290 content:content,
291 type:type
292 }
293 });
294 }
295 return F4(field);
296 }
299 function hoverable(signal, handler, element) {
300 function onHover(bool) {
301 elm.notify(signal.id, handler(bool));
302 }
303 var props = Utils.replace([['hover',onHover]], elem.props);
304 return { props:props, element:elem.element };
305 }
307 function clickable(signal, value, element) {
308 function onClick(bool) {
309 elm.notify(signal.id, value);
310 }
311 var props = Utils.replace([['click',onClick]], elem.props);
312 return { props:props, element:elem.element };
313 }
315 return elm.Native.Graphics.Input.values = {
316 input:input,
317 button:F3(button),
318 customButton:F5(customButton),
319 checkbox:F3(checkbox),
320 dropDown:F2(dropDown),
321 field:mkField('text'),
322 email:mkField('email'),
323 password:mkField('password'),
324 hoverable:F3(hoverable),
325 clickable:F3(clickable)
326 };
328};