git.iko.soy/elk
on 45cfc8f help sign in
elk/libraries/Native/Graphics/Input.js
281 lines 8.1 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 Tuple2 = Elm.Native.Utils(elm).Tuple2;
17 function dropDown(values) {
18 var entries = JS.fromList(values);
19 var events = Signal.constant(entries[0]._1);
21 var drop = newNode('select');
22 drop.style.border = '0 solid';
23 for (var i = 0; i < entries.length; ++i) {
24 var option = newNode('option');
25 var name = JS.fromString(entries[i]._0);
26 option.value = name;
27 option.innerHTML = name;
28 drop.appendChild(option);
29 }
30 drop.addEventListener('change', function() {
31 elm.notify(events.id, entries[drop.selectedIndex]._1);
32 });
34 var t = drop.cloneNode(true);
35 t.style.visibility = "hidden";
37 elm.node.appendChild(t);
38 var style = window.getComputedStyle(t, null);
39 var w = Math.ceil(style.getPropertyValue("width").slice(0,-2) - 0);
40 var h = Math.ceil(style.getPropertyValue("height").slice(0,-2) - 0);
41 elm.node.removeChild(t);
43 console.log(w,h);
44 var element = A3(newElement, w, h, {
45 ctor: 'Custom',
46 type: 'DropDown',
47 render: function render(model) { return drop; },
48 update: function update(node, oldModel, newModel) {},
49 model: {}
50 });
52 return Tuple2(Signal.constant(element), events);
53 }
55 function buttons(defaultValue) {
56 var events = Signal.constant(defaultValue);
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 }
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 }
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 });
82 }
84 return { _:{}, button:F2(button), events:events };
85 }
87 function customButtons(defaultValue) {
88 var events = Signal.constant(defaultValue);
90 function render(model) {
91 var btn = newNode('div');
92 btn.elmEvent = model.event;
94 btn.elmUp = Render.render(model.up);
95 btn.elmHover = Render.render(model.hover);
96 btn.elmDown = Render.render(model.down);
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);
114 }
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);
121 btn.appendChild(btn.elmUp);
122 return btn;
123 }
125 function update(node, oldModel, newModel) {
126 node.elmEvent = newModel.event;
127 Render.update(node.elmUp, oldModel.up, newModel.up)
128 Render.update(node.elmHover, oldModel.hover, newModel.hover)
129 Render.update(node.elmDown, oldModel.down, newModel.down)
130 }
132 function button(evnt, up, hover, down) {
133 return A3(newElement,
134 Math.max(up.props.width, hover.props.width, down.props.width),
135 Math.max(up.props.height, hover.props.height, down.props.height),
136 { ctor: 'Custom',
137 type: 'CustomButton',
138 render: render,
139 update: update,
140 model: { event:evnt, up:up, hover:hover, down:down }
141 });
142 }
144 return { _:{}, customButton:F4(button), events:events };
145 }
148 function checkboxes(defaultValue) {
149 var events = Signal.constant(defaultValue);
151 function render(model) {
152 var b = newNode('input');
153 b.type = 'checkbox';
154 b.checked = model.checked;
155 b.style.display = 'block';
156 b.elmHandler = model.handler;
157 function change() { elm.notify(events.id, b.elmHandler(b.checked)); }
158 b.addEventListener('change', change);
159 return b;
160 }
162 function update(node, oldModel, newModel) {
163 node.elmHandler = newModel.handler;
164 node.checked = newModel.checked;
165 return true;
166 }
168 function box(handler, checked) {
169 return A3(newElement, 13, 13, {
170 ctor: 'Custom',
171 type: 'CheckBox',
172 render: render,
173 update: update,
174 model: { checked:checked, handler:handler }
175 });
176 }
178 return { _:{}, box:F2(box), events:events };
179 }
181 function setRange(node, start, end, dir) {
182 if (node.parentNode) {
183 node.setSelectionRange(start, end, dir);
184 } else {
185 setTimeout(function(){node.setSelectionRange(start, end, dir);}, 0);
186 }
187 }
189 function mkTextPool(type) { return function fields(defaultValue) {
190 var events = Signal.constant(defaultValue);
192 var state = null;
194 function render(model) {
195 var field = newNode('input');
196 field.elmHandler = model.handler;
198 field.id = 'test';
199 field.type = type;
200 field.placeholder = JS.fromString(model.placeHolder);
201 field.value = JS.fromString(model.state.string);
202 setRange(field, model.state.selectionStart, model.state.selectionEnd, 'forward');
203 field.style.border = 'none';
204 state = model.state;
206 function update() {
207 var start = field.selectionStart,
208 end = field.selectionEnd;
209 if (field.selectionDirection === 'backward') {
210 start = end;
211 end = field.selectionStart;
212 }
213 state = { _:{},
214 string:JS.toString(field.value),
215 selectionStart:start,
216 selectionEnd:end };
217 elm.notify(events.id, field.elmHandler(state));
218 }
219 function mousedown() {
220 update();
221 elm.node.addEventListener('mouseup', mouseup);
222 }
223 function mouseup() {
224 update();
225 elm.node.removeEventListener('mouseup', mouseup)
226 }
227 field.addEventListener('keyup', update);
228 field.addEventListener('mousedown', mousedown);
230 return field;
231 }
233 function update(node, oldModel, newModel) {
234 node.elmHandler = newModel.handler;
235 if (state === newModel.state) return;
236 var newStr = JS.fromString(newModel.state.string);
237 if (node.value !== newStr) node.value = newStr;
239 var start = newModel.state.selectionStart;
240 var end = newModel.state.selectionEnd;
241 var direction = 'forward';
242 if (end < start) {
243 start = end;
244 end = newModel.state.selectionStart;
245 direction = 'backward';
246 }
248 if (node.selectionStart !== start
249 || node.selectionEnd !== end
250 || node.selectionDirection !== direction) {
251 setRange(node, start, end, direction);
252 }
253 }
255 function field(handler, placeHolder, state) {
256 return A3(newElement, 200, 30,
257 { ctor: 'Custom',
258 type: type + 'Input',
259 render: render,
260 update: update,
261 model: { handler:handler,
262 placeHolder:placeHolder,
263 state:state }
264 });
265 }
267 return { _:{}, field:F3(field), events:events };
268 }
269 }
271 return elm.Native.Graphics.Input = {
272 buttons:buttons,
273 customButtons:customButtons,
274 checkboxes:checkboxes,
275 fields:mkTextPool('text'),
276 emails:mkTextPool('email'),
277 passwords:mkTextPool('password'),
278 dropDown:dropDown
279 };
281};