@@ -57,29 +57,29 @@ Elm.Native.Graphics.Input = function(elm) {
5757 var events = Signal.constant(defaultValue);
5858
5959 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;
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;
6767 }
6868
6969 function update(node, oldModel, newModel) {
70− node.elmEvent = newModel.event;
71− var txt = newModel.text;
72− if (oldModel.text !== txt) node.innerHTML = txt;
70+ node.elmEvent = newModel.event;
71+ var txt = newModel.text;
72+ if (oldModel.text !== txt) node.innerHTML = txt;
7373 }
7474
7575 function button(evnt, txt) {
76− return A3(newElement, 100, 40, {
76+ return A3(newElement, 100, 40, {
7777 ctor: 'Custom',
78− type: 'Button',
79− render: render,
80− update: update,
81− model: { event:evnt, text:JS.fromString(txt) }
82− });
78+ type: 'Button',
79+ render: render,
80+ update: update,
81+ model: { event:evnt, text:JS.fromString(txt) }
82+ });
8383 }
8484
8585 return { _:{}, button:F2(button), events:events };
@@ -89,37 +89,37 @@ Elm.Native.Graphics.Input = function(elm) {
8989 var events = Signal.constant(defaultValue);
9090
9191 function render(model) {
92− var btn = newNode('div');
93− btn.elmEvent = model.event;
92+ var btn = newNode('div');
93+ btn.elmEvent = model.event;
9494
95− btn.elmUp = Render.render(model.up);
96− btn.elmHover = Render.render(model.hover);
97− btn.elmDown = Render.render(model.down);
95+ btn.elmUp = Render.render(model.up);
96+ btn.elmHover = Render.render(model.hover);
97+ btn.elmDown = Render.render(model.down);
9898
99− function replace(node) {
99+ function replace(node) {
100100 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);
121−
122− btn.appendChild(btn.elmUp);
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);
121+
122+ btn.appendChild(btn.elmUp);
123123
124124 var clicker = newNode('div');
125125 clicker.style.width = btn.elmUp.style.width;
@@ -128,26 +128,26 @@ Elm.Native.Graphics.Input = function(elm) {
128128 clicker.style.top = 0;
129129 btn.appendChild(clicker);
130130
131− return btn;
131+ return btn;
132132 }
133133
134134 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)
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)
139139 }
140140
141141 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),
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),
145145 { ctor: 'Custom',
146− type: 'CustomButton',
147− render: render,
148− update: update,
149− model: { event:evnt, up:up, hover:hover, down:down }
150− });
146+ type: 'CustomButton',
147+ render: render,
148+ update: update,
149+ model: { event:evnt, up:up, hover:hover, down:down }
150+ });
151151 }
152152
153153 return { _:{}, customButton:F4(button), events:events };
@@ -171,30 +171,30 @@ Elm.Native.Graphics.Input = function(elm) {
171171 var events = Signal.constant(defaultValue);
172172
173173 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;
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;
182182 }
183183
184184 function update(node, oldModel, newModel) {
185− node.elmHandler = newModel.handler;
186− node.checked = newModel.checked;
187− return true;
185+ node.elmHandler = newModel.handler;
186+ node.checked = newModel.checked;
187+ return true;
188188 }
189189
190190 function box(handler, checked) {
191− return A3(newElement, 13, 13, {
191+ return A3(newElement, 13, 13, {
192192 ctor: 'Custom',
193− type: 'CheckBox',
194− render: render,
195− update: update,
196− model: { checked:checked, handler:handler }
197− });
193+ type: 'CheckBox',
194+ render: render,
195+ update: update,
196+ model: { checked:checked, handler:handler }
197+ });
198198 }
199199
200200 return { _:{}, box:F2(box), events:events };
@@ -214,49 +214,49 @@ Elm.Native.Graphics.Input = function(elm) {
214214 var state = null;
215215
216216 function render(model) {
217− var field = newNode('input');
218− field.elmHandler = model.handler;
219−
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';
217+ var field = newNode('input');
218+ field.elmHandler = model.handler;
219+
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';
226226 state = model.state;
227227
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− }
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+ }
235235 state = { _:{},
236236 string:JS.toString(field.value),
237237 selectionStart:start,
238238 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);
251−
252− return field;
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);
251+
252+ return field;
253253 }
254254
255255 function update(node, oldModel, newModel) {
256− node.elmHandler = newModel.handler;
256+ node.elmHandler = newModel.handler;
257257 if (state === newModel.state) return;
258258 var newStr = JS.fromString(newModel.state.string);
259− if (node.value !== newStr) node.value = newStr;
259+ if (node.value !== newStr) node.value = newStr;
260260
261261 var start = newModel.state.selectionStart;
262262 var end = newModel.state.selectionEnd;
@@ -275,15 +275,15 @@ Elm.Native.Graphics.Input = function(elm) {
275275 }
276276
277277 function field(handler, placeHolder, state) {
278− return A3(newElement, 200, 30,
278+ return A3(newElement, 200, 30,
279279 { ctor: 'Custom',
280− type: type + 'Input',
281− render: render,
282− update: update,
283− model: { handler:handler,
284− placeHolder:placeHolder,
285− state:state }
286− });
280+ type: type + 'Input',
281+ render: render,
282+ update: update,
283+ model: { handler:handler,
284+ placeHolder:placeHolder,
285+ state:state }
286+ });
287287 }
288288
289289 return { _:{}, field:F3(field), events:events };