git.iko.soy/elk
on b930ac2 help sign in
elk/libraries/Native/Graphics/Input.js
163 lines 4.6 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 Utils = ElmRuntime.use(ElmRuntime.Render.Utils);
11 var newNode = Utils.newElement, fromString = Utils.fromString,
12 toString = Utils.toString;
14 var Signal = Elm.Signal(elm);
15 var newElement = Elm.Graphics.Element(elm).newElement;
17 function buttons(defaultValue) {
18 var events = Signal.constant(defaultValue);
20 function render(model) {
21 var b = newNode('button');
22 b.style.display = 'block';
23 b.elmEvent = model.event;
24 function click() { elm.notify(events.id, b.elmEvent); }
25 b.addEventListener('click', click);
26 b.innerHTML = model.text;
27 return b;
28 }
30 function update(node, oldModel, newModel) {
31 node.elmEvent = newModel.event;
32 var txt = newModel.text;
33 if (oldModel.text !== txt) node.innerHTML = txt;
34 }
36 function button(evnt, txt) {
37 return A3(newElement, 100, 40, {
38 ctor: 'Custom',
39 type: 'Button',
40 render: render,
41 update: update,
42 model: { event:evnt, text:fromString(txt) }
43 });
44 }
46 return { _:{}, button:F2(button), events:events };
47 }
49 function customButtons(defaultValue) {
50 var events = Signal.constant(defaultValue);
52 function render(model) {
53 var btn = newNode('div');
54 btn.elmEvent = model.event;
56 btn.elmUp = Render.render(model.up);
57 btn.elmHover = Render.render(model.hover);
58 btn.elmDown = Render.render(model.down);
60 function replace(node) { return function() {
61 if (node !== btn.firstChild) btn.replaceChild(node, btn.firstChild);
62 };
63 }
64 var hover = replace(btn.elmHover);
65 function up() { hover(); elm.notify(events.id, btn.elmEvent); }
66 btn.addEventListener('mouseover', hover);
67 btn.addEventListener('mouseout' , replace(btn.elmUp));
68 btn.addEventListener('mousedown', replace(btn.elmDown));
69 btn.addEventListener('mouseup' , up);
71 btn.appendChild(btn.elmUp);
72 return btn;
73 }
75 function update(node, oldModel, newModel) {
76 node.elmEvent = newModel.event;
77 Render.update(node.elmUp, oldModel.up, newModel.up)
78 Render.update(node.elmHover, oldModel.hover, newModel.hover)
79 Render.update(node.elmDown, oldModel.down, newModel.down)
80 }
82 function button(evnt, up, hover, down) {
83 return A3(newElement,
84 Math.max(up.props.width, hover.props.width, down.props.width),
85 Math.max(up.props.height, hover.props.height, down.props.height),
86 { ctor: 'Custom',
87 type: 'CustomButton',
88 render: render,
89 update: update,
90 model: { event:evnt, up:up, hover:hover, down:down }
91 });
92 }
94 return { _:{}, button:F4(button), events:events };
95 }
97 function textFields(defaultValue) {
98 var events = Signal.constant(defaultValue);
100 function render(model) {
101 console.log('render');
102 var field = newNode('input');
103 field.elmHandler = model.handler;
105 field.id = 'test'
106 field.placeholder = fromString(model.placeHolder);
107 field.elmValue = fromString(model.state.input);
108 field.value = field.elmValue;
109 field.setSelectionRange(model.state.start, model.state.end);
110 field.style.border = 'none';
112 function update() {
113 var state = { _:{},
114 input:toString(field.value),
115 start:field.selectionStart,
116 end:field.selectionEnd };
117 field.value = field.elmValue;
118 elm.notify(events.id, state);
119 }
120 function mousedown() {
121 update();
122 elm.node.addEventListener('mouseup', mouseup);
123 }
124 function mouseup() {
125 update();
126 elm.node.removeEventListener('mouseup', mouseup)
127 }
128 field.addEventListener('keyup', update);
129 field.addEventListener('mousedown', mousedown);
131 return field;
132 }
134 function update(node, oldModel, newModel) {
135 console.log('update');
136 node.elmEvent = newModel.handler;
137 node.elmValue = fromString(newModel.state.input);
138 node.value = node.elmValue;
139 node.setSelectionRange(newModel.state.start, newModel.state.end);
140 }
142 function field(handler, placeHolder, state) {
143 return A3(newElement, 200, 30,
144 { ctor: 'Custom',
145 type: 'TextField',
146 render: render,
147 update: update,
148 model: { handler:handler,
149 placeHolder:placeHolder,
150 state:state }
151 });
152 }
154 return { _:{}, field:F3(field), events:events };
155 }
157 return elm.Native.Graphics.Input = {
158 buttons:buttons,
159 customButtons:customButtons,
160 textFields:textFields
161 };
163};