git.iko.soy/elk
on 1df206d help sign in
elk/libraries/Native/Graphics/Input.js
304 lines 9.8 kB history raw
2Elm.Native.Graphics.Input = function(elm) {
3 "use strict";
5 elm.Native = elm.Native || {};
6 elm.Native.Graphics = elm.Native.Graphics || {};
7 if (elm.Native.Graphics.Input) return elm.Native.Graphics.Input;
9 var Render = ElmRuntime.use(ElmRuntime.Render.Element);
10 var newNode = ElmRuntime.use(ElmRuntime.Render.Utils).newElement;
12 var Signal = Elm.Signal(elm);
13 var newElement = Elm.Graphics.Element(elm).newElement;
14 var JS = Elm.Native.JavaScript(elm);
15 var Utils = Elm.Native.Utils(elm);
16 var Tuple2 = Utils.Tuple2;
18 function dropDown(values) {
19 var entries = JS.fromList(values);
20 var events = Signal.constant(entries[0]._1);
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 });
35 var t = drop.cloneNode(true);
36 t.style.visibility = "hidden";
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);
44 console.log(w,h);
45 var element = A3(newElement, w, h, {
46 ctor: 'Custom',
47 type: 'DropDown',
48 render: function render(model) { return drop; },
49 update: function update(node, oldModel, newModel) {},
50 model: {}
51 });
53 return Tuple2(Signal.constant(element), events);
54 }
56 function buttons(defaultValue) {
57 var events = Signal.constant(defaultValue);
59 function render(model) {
60 var b = newNode('button');
61 b.style.display = 'block';
62 b.elmEvent = model.event;
63 function click() { elm.notify(events.id, b.elmEvent); }
64 b.addEventListener('click', click);
65 b.innerHTML = model.text;
66 return b;
67 }
69 function update(node, oldModel, newModel) {
70 node.elmEvent = newModel.event;
71 var txt = newModel.text;
72 if (oldModel.text !== txt) node.innerHTML = txt;
73 }
75 function button(evnt, txt) {
76 return A3(newElement, 100, 40, {
77 ctor: 'Custom',
78 type: 'Button',
79 render: render,
80 update: update,
81 model: { event:evnt, text:JS.fromString(txt) }
82 });
83 }
85 return { _:{}, button:F2(button), events:events };
86 }
88 function customButtons(defaultValue) {
89 var events = Signal.constant(defaultValue);
91 function render(model) {
92 var btn = newNode('div');
93 btn.elmEvent = model.event;
95 btn.elmUp = Render.render(model.up);
96 btn.elmHover = Render.render(model.hover);
97 btn.elmDown = Render.render(model.down);
99 function replace(node) {
100 if (node !== btn.firstChild) btn.replaceChild(node, btn.firstChild);
101 }
102 var overCount = 0;
103 function over(e) {
104 if (overCount++ > 0) return;
105 replace(btn.elmHover);
106 }
107 function out(e) {
108 if (btn.contains(e.toElement || e.relatedTarget)) return;
109 overCount = 0;
110 replace(btn.elmUp);
111 }
112 function up() {
113 replace(btn.elmHover);
114 elm.notify(events.id, btn.elmEvent);
115 }
116 function down() { replace(btn.elmDown); }
117 btn.addEventListener('mouseover', over);
118 btn.addEventListener('mouseout' , out);
119 btn.addEventListener('mousedown', down);
120 btn.addEventListener('mouseup' , up);
122 btn.appendChild(btn.elmUp);
124 var clicker = newNode('div');
125 clicker.style.width = btn.elmUp.style.width;
126 clicker.style.height = btn.elmUp.style.height;
127 clicker.style.position = 'absolute';
128 clicker.style.top = 0;
129 btn.appendChild(clicker);
131 return btn;
132 }
134 function update(node, oldModel, newModel) {
135 node.elmEvent = newModel.event;
136 Render.update(node.elmUp, oldModel.up, newModel.up)
137 Render.update(node.elmHover, oldModel.hover, newModel.hover)
138 Render.update(node.elmDown, oldModel.down, newModel.down)
139 }
141 function button(evnt, up, hover, down) {
142 return A3(newElement,
143 Math.max(up.props.width, hover.props.width, down.props.width),
144 Math.max(up.props.height, hover.props.height, down.props.height),
145 { ctor: 'Custom',
146 type: 'CustomButton',
147 render: render,
148 update: update,
149 model: { event:evnt, up:up, hover:hover, down:down }
150 });
151 }
153 return { _:{}, customButton:F4(button), events:events };
154 }
157 function hoverables(defaultValue) {
158 var events = Signal.constant(defaultValue);
159 function hoverable(handler, elem) {
160 function onHover(bool) {
161 elm.notify(events.id, handler(bool));
162 }
163 var props = Utils.replace([['hover',onHover]], elem.props);
164 return { props:props, element:elem.element };
165 }
166 return { _:{}, hoverable:F2(hoverable), events:events };
167 }
170 function checkboxes(defaultValue) {
171 var events = Signal.constant(defaultValue);
173 function render(model) {
174 var b = newNode('input');
175 b.type = 'checkbox';
176 b.checked = model.checked;
177 b.style.display = 'block';
178 b.elmHandler = model.handler;
179 function change() { elm.notify(events.id, b.elmHandler(b.checked)); }
180 b.addEventListener('change', change);
181 return b;
182 }
184 function update(node, oldModel, newModel) {
185 node.elmHandler = newModel.handler;
186 node.checked = newModel.checked;
187 return true;
188 }
190 function box(handler, checked) {
191 return A3(newElement, 13, 13, {
192 ctor: 'Custom',
193 type: 'CheckBox',
194 render: render,
195 update: update,
196 model: { checked:checked, handler:handler }
197 });
198 }
200 return { _:{}, checkbox:F2(box), events:events };
201 }
203 function setRange(node, start, end, dir) {
204 if (node.parentNode) {
205 node.setSelectionRange(start, end, dir);
206 } else {
207 setTimeout(function(){node.setSelectionRange(start, end, dir);}, 0);
208 }
209 }
211 function mkTextPool(type) { return function fields(defaultValue) {
212 var events = Signal.constant(defaultValue);
214 var state = null;
216 function render(model) {
217 var field = newNode('input');
218 field.elmHandler = model.handler;
220 field.id = 'test';
221 field.type = type;
222 field.placeholder = JS.fromString(model.placeHolder);
223 field.value = JS.fromString(model.state.string);
224 setRange(field, model.state.selectionStart, model.state.selectionEnd, 'forward');
225 field.style.border = 'none';
226 state = model.state;
228 function update() {
229 var start = field.selectionStart,
230 end = field.selectionEnd;
231 if (field.selectionDirection === 'backward') {
232 start = end;
233 end = field.selectionStart;
234 }
235 state = { _:{},
236 string:JS.toString(field.value),
237 selectionStart:start,
238 selectionEnd:end };
239 elm.notify(events.id, field.elmHandler(state));
240 }
241 function mousedown() {
242 update();
243 elm.node.addEventListener('mouseup', mouseup);
244 }
245 function mouseup() {
246 update();
247 elm.node.removeEventListener('mouseup', mouseup)
248 }
249 field.addEventListener('keyup', update);
250 field.addEventListener('mousedown', mousedown);
252 return field;
253 }
255 function update(node, oldModel, newModel) {
256 node.elmHandler = newModel.handler;
257 if (state === newModel.state) return;
258 var newStr = JS.fromString(newModel.state.string);
259 if (node.value !== newStr) node.value = newStr;
261 var start = newModel.state.selectionStart;
262 var end = newModel.state.selectionEnd;
263 var direction = 'forward';
264 if (end < start) {
265 start = end;
266 end = newModel.state.selectionStart;
267 direction = 'backward';
268 }
270 if (node.selectionStart !== start
271 || node.selectionEnd !== end
272 || node.selectionDirection !== direction) {
273 setRange(node, start, end, direction);
274 }
275 }
277 function field(handler, placeHolder, state) {
278 return A3(newElement, 200, 30,
279 { ctor: 'Custom',
280 type: type + 'Input',
281 render: render,
282 update: update,
283 model: { handler:handler,
284 placeHolder:placeHolder,
285 state:state }
286 });
287 }
289 return { _:{}, field:F3(field), events:events };
290 }
291 }
293 return elm.Native.Graphics.Input = {
294 buttons:buttons,
295 customButtons:customButtons,
296 hoverables:hoverables,
297 checkboxes:checkboxes,
298 fields:mkTextPool('text'),
299 emails:mkTextPool('email'),
300 passwords:mkTextPool('password'),
301 dropDown:dropDown
302 };
304};