@@ -0,0 +1,163 @@
1+
2+Elm.Native.Graphics.Input = function(elm) {
3+ "use strict";
4+
5+ elm.Native = elm.Native || {};
6+ elm.Native.Graphics = elm.Native.Graphics || {};
7+ if (elm.Native.Graphics.Input) return elm.Native.Graphics.Input;
8+
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;
13+
14+ var Signal = Elm.Signal(elm);
15+ var newElement = Elm.Graphics.Element(elm).newElement;
16+
17+ function buttons(defaultValue) {
18+ var events = Signal.constant(defaultValue);
19+
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+ }
29+
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+ }
35+
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+ }
45+
46+ return { _:{}, button:F2(button), events:events };
47+ }
48+
49+ function customButtons(defaultValue) {
50+ var events = Signal.constant(defaultValue);
51+
52+ function render(model) {
53+ var btn = newNode('div');
54+ btn.elmEvent = model.event;
55+
56+ btn.elmUp = Render.render(model.up);
57+ btn.elmHover = Render.render(model.hover);
58+ btn.elmDown = Render.render(model.down);
59+
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);
70+
71+ btn.appendChild(btn.elmUp);
72+ return btn;
73+ }
74+
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+ }
81+
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+ }
93+
94+ return { _:{}, button:F4(button), events:events };
95+ }
96+
97+ function textFields(defaultValue) {
98+ var events = Signal.constant(defaultValue);
99+
100+ function render(model) {
101+ console.log('render');
102+ var field = newNode('input');
103+ field.elmHandler = model.handler;
104+
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';
111+
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);
130+
131+ return field;
132+ }
133+
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+ }
141+
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+ }
153+
154+ return { _:{}, field:F3(field), events:events };
155+ }
156+
157+ return elm.Native.Graphics.Input = {
158+ buttons:buttons,
159+ customButtons:customButtons,
160+ textFields:textFields
161+ };
162+
163+};