libraries/Native/Graphics/Input.js · elk · git.iko.soy

git.iko.soy/elk

on dcba223 help sign in

elk/libraries/Native/Graphics/Input.js

407 lines 14 kB history raw

1Elm.Native.Graphics.Input = {};

2Elm.Native.Graphics.Input.make = function(elm) {

3 elm.Native = elm.Native || {};

4 elm.Native.Graphics = elm.Native.Graphics || {};

5 elm.Native.Graphics.Input = elm.Native.Graphics.Input || {};

6 if (elm.Native.Graphics.Input.values) return elm.Native.Graphics.Input.values;

8 var Render = ElmRuntime.use(ElmRuntime.Render.Element);

9 var newNode = ElmRuntime.use(ElmRuntime.Render.Utils).newElement;

11 var toCss = Elm.Native.Color.make(elm).toCss;

12 var Text = Elm.Native.Text.make(elm);

13 var Signal = Elm.Signal.make(elm);

14 var newElement = Elm.Graphics.Element.make(elm).newElement;

15 var JS = Elm.Native.JavaScript.make(elm);

16 var Utils = Elm.Native.Utils.make(elm);

17 var Tuple2 = Utils.Tuple2;

19 function input(initialValue) {

20 var signal = Signal.constant(initialValue);

21 return { _:{}, signal:signal, handle:signal };

22 }

24 function renderDropDown(signal, values) {

25 return function(_) {

26 var entries = JS.fromList(values);

28 var drop = newNode('select');

29 drop.style.border = '0 solid';

30 drop.style.pointerEvents = 'auto';

31 for (var i = 0; i < entries.length; ++i) {

32 var option = newNode('option');

33 var name = JS.fromString(entries[i]._0);

34 option.value = name;

35 option.innerHTML = name;

36 drop.appendChild(option);

37 }

38 drop.addEventListener('change', function() {

39 elm.notify(signal.id, entries[drop.selectedIndex]._1);

40 });

42 var t = drop.cloneNode(true);

43 t.style.visibility = "hidden";

45 elm.node.appendChild(t);

46 var style = window.getComputedStyle(t, null);

47 var w = Math.ceil(style.getPropertyValue("width").slice(0,-2) - 0);

48 var h = Math.ceil(style.getPropertyValue("height").slice(0,-2) - 0);

49 elm.node.removeChild(t);

50 return drop;

51 };

52 }

54 function updateDropDown(node, oldModel, newModel) {

55 }

57 function dropDown(signal, values) {

58 return A3(newElement, 100, 24, {

59 ctor: 'Custom',

60 type: 'DropDown',

61 render: renderDropDown(signal,values),

62 update: updateDropDown,

63 model: {}

64 });

65 }

67 function renderButton(model) {

68 var node = newNode('button');

69 node.style.display = 'block';

70 node.style.pointerEvents = 'auto';

71 node.elm_signal = model.signal;

72 node.elm_value = model.value;

73 function click() {

74 elm.notify(node.elm_signal.id, node.elm_value);

75 }

76 node.addEventListener('click', click);

77 node.innerHTML = model.text;

78 return node;

79 }

81 function updateButton(node, oldModel, newModel) {

82 node.elm_signal = newModel.signal;

83 node.elm_value = newModel.value;

84 var txt = newModel.text;

85 if (oldModel.text !== txt) node.innerHTML = txt;

86 }

88 function button(signal, value, text) {

89 return A3(newElement, 100, 40, {

90 ctor: 'Custom',

91 type: 'Button',

92 render: renderButton,

93 update: updateButton,

94 model: { signal:signal, value:value, text:JS.fromString(text) }

95 });

96 }

98 function renderCustomButton(model) {

99 var btn = newNode('div');

100 btn.style.pointerEvents = 'auto';

101 btn.elm_signal = model.signal;

102 btn.elm_value = model.value;

104 btn.elm_up = Render.render(model.up);

105 btn.elm_hover = Render.render(model.hover);

106 btn.elm_down = Render.render(model.down);

108 function replace(node) {

109 if (node !== btn.firstChild) {

110 btn.replaceChild(node, btn.firstChild);

111 }

112 }

113 var overCount = 0;

114 function over(e) {

115 if (overCount++ > 0) return;

116 replace(btn.elm_hover);

117 }

118 function out(e) {

119 if (btn.contains(e.toElement || e.relatedTarget)) return;

120 overCount = 0;

121 replace(btn.elm_up);

122 }

123 function up() {

124 replace(btn.elm_hover);

125 elm.notify(btn.elm_signal.id, btn.elm_value);

126 }

127 function down() {

128 replace(btn.elm_down);

129 }

130 btn.addEventListener('mouseover', over);

131 btn.addEventListener('mouseout' , out);

132 btn.addEventListener('mousedown', down);

133 btn.addEventListener('mouseup' , up);

135 btn.appendChild(btn.elm_up);

137 var clicker = newNode('div');

138 clicker.style.width = btn.elm_up.style.width;

139 clicker.style.height = btn.elm_up.style.height;

140 clicker.style.position = 'absolute';

141 clicker.style.top = 0;

142 btn.appendChild(clicker);

144 return btn;

145 }

147 function updateCustomButton(node, oldModel, newModel) {

148 var signal = newModel.signal;

149 node.elm_up.elm_signal = signal;

150 node.elm_hover.elm_signal = signal;

151 node.elm_down.elm_signal = signal;

153 var value = newModel.value;

154 node.elm_up.elm_value = value;

155 node.elm_hover.elm_value = value;

156 node.elm_down.elm_value = value;

158 Render.update(node.elm_up, oldModel.up, newModel.up)

159 Render.update(node.elm_hover, oldModel.hover, newModel.hover)

160 Render.update(node.elm_down, oldModel.down, newModel.down)

161 }

163 function max3(a,b,c) {

164 var ab = a > b ? a : b;

165 return ab > c ? ab : c;

166 }

168 function customButton(signal, value, up, hover, down) {

169 return A3(newElement,

170 max3(up.props.width, hover.props.width, down.props.width),

171 max3(up.props.height, hover.props.height, down.props.height),

172 { ctor: 'Custom',

173 type: 'CustomButton',

174 render: renderCustomButton,

175 update: updateCustomButton,

176 model: { signal:signal, value:value, up:up, hover:hover, down:down }

177 });

178 }

180 function renderCheckbox(model) {

181 var node = newNode('input');

182 node.type = 'checkbox';

183 node.checked = model.checked;

184 node.style.display = 'block';

185 node.style.pointerEvents = 'auto';

186 node.elm_signal = model.signal;

187 node.elm_handler = model.handler;

188 function change() {

189 elm.notify(node.elm_signal.id, node.elm_handler(node.checked));

190 }

191 node.addEventListener('change', change);

192 return node;

193 }

195 function updateCheckbox(node, oldModel, newModel) {

196 node.elm_signal = newModel.signal;

197 node.elm_handler = newModel.handler;

198 node.checked = newModel.checked;

199 return true;

200 }

202 function checkbox(signal, handler, checked) {

203 return A3(newElement, 13, 13, {

204 ctor: 'Custom',

205 type: 'CheckBox',

206 render: renderCheckbox,

207 update: updateCheckbox,

208 model: { signal:signal, handler:handler, checked:checked }

209 });

210 }

212 function setRange(node, start, end, dir) {

213 if (node.parentNode) {

214 node.setSelectionRange(start, end, dir);

215 } else {

216 setTimeout(function(){node.setSelectionRange(start, end, dir);}, 0);

217 }

218 }

220 function updateIfNeeded(css, attribute, latestAttribute) {

221 if (css[attribute] !== latestAttribute) {

222 css[attribute] = latestAttribute;

223 }

224 }

225 function cssDimensions(dimensions) {

226 return dimensions.top + 'px ' +

227 dimensions.right + 'px ' +

228 dimensions.bottom + 'px ' +

229 dimensions.left + 'px';

230 }

231 function updateFieldStyle(css, style) {

232 updateIfNeeded(css, 'padding', cssDimensions(style.padding));

234 var outline = style.outline;

235 updateIfNeeded(css, 'border-width', cssDimensions(outline.width));

236 updateIfNeeded(css, 'border-color', toCss(outline.color));

237 updateIfNeeded(css, 'border-radius', outline.radius + 'px');

239 var highlight = style.highlight;

240 if (highlight.width === 0) {

241 css.outline = 'none';

242 } else {

243 updateIfNeeded(css, 'outline-width', highlight.width + 'px');

244 updateIfNeeded(css, 'outline-color', toCss(highlight.color));

245 }

247 var textStyle = style.style;

248 updateIfNeeded(css, 'color', toCss(textStyle.color));

249 if (textStyle.typeface.ctor !== '[]') {

250 updateIfNeeded(css, 'font-family', Text.toTypefaces(textStyle.typeface));

251 }

252 if (textStyle.height.ctor !== "Nothing") {

253 updateIfNeeded(css, 'font-size', textStyle.height._0 + 'px');

254 }

255 updateIfNeeded(css, 'font-weight', textStyle.bold ? 'bold' : 'normal');

256 updateIfNeeded(css, 'font-style', textStyle.italic ? 'italic' : 'normal');

257 if (textStyle.line.ctor !== 'Nothing') {

258 updateIfNeeded(css, 'text-decoration', Text.toLine(textStyle.line._0));

259 }

260 }

262 function renderField(model) {

263 var field = newNode('input');

264 updateFieldStyle(field.style, model.style);

265 field.style.borderStyle = 'solid';

266 field.style.pointerEvents = 'auto';

268 field.type = model.type;

269 field.placeholder = JS.fromString(model.placeHolder);

270 field.value = JS.fromString(model.content.string);

272 field.elm_signal = model.signal;

273 field.elm_handler = model.handler;

274 field.elm_old_value = field.value;

276 function inputUpdate(event) {

277 var curr = field.elm_old_value;

278 var next = field.value;

279 if (curr === next) {

280 return;

281 }

283 var direction = field.selectionDirection === 'forward' ? 'Forward' : 'Backward';

284 var start = field.selectionStart;

285 var end = field.selectionEnd;

286 field.value = field.elm_old_value;

288 elm.notify(field.elm_signal.id, field.elm_handler({

289 _:{},

290 string: JS.toString(next),

291 selection: {

292 _:{},

293 start: start,

294 end: end,

295 direction: { ctor: direction }

296 },

297 }));

298 }

300 function mouseUpdate(event) {

301 var direction = field.selectionDirection === 'forward' ? 'Forward' : 'Backward';

302 elm.notify(field.elm_signal.id, field.elm_handler({

303 _:{},

304 string: field.value,

305 selection: {

306 _:{},

307 start: field.selectionStart,

308 end: field.selectionEnd,

309 direction: { ctor: direction }

310 },

311 }));

312 }

313 function mousedown(event) {

314 mouseUpdate(event);

315 elm.node.addEventListener('mouseup', mouseup);

316 }

317 function mouseup(event) {

318 mouseUpdate(event);

319 elm.node.removeEventListener('mouseup', mouseup)

320 }

321 field.addEventListener('input', inputUpdate);

322 field.addEventListener('mousedown', mousedown);

323 field.addEventListener('focus', function() {

324 field.elm_hasFocus = true;

325 });

326 field.addEventListener('blur', function() {

327 field.elm_hasFocus = false;

328 });

330 return field;

331 }

333 function updateField(field, oldModel, newModel) {

334 if (oldModel.style !== newModel.style) {

335 updateFieldStyle(field.style, newModel.style);

336 }

337 field.elm_signal = newModel.signal;

338 field.elm_handler = newModel.handler;

340 field.type = newModel.type;

341 field.placeholder = JS.fromString(newModel.placeHolder);

342 var value = JS.fromString(newModel.content.string);

343 field.value = value;

344 field.elm_old_value = value;

345 if (field.elm_hasFocus) {

346 var selection = newModel.content.selection;

347 var direction = selection.direction.ctor === 'Forward' ? 'forward' : 'backward';

348 setRange(field, selection.start, selection.end, direction);

349 }

350 }

352 function mkField(type) {

353 function field(style, signal, handler, placeHolder, content) {

354 var padding = style.padding;

355 var outline = style.outline.width;

356 var adjustWidth = padding.left + padding.right + outline.left + outline.right;

357 var adjustHeight = padding.top + padding.bottom + outline.top + outline.bottom;

358 return A3(newElement, 200, 30, {

359 ctor: 'Custom',

360 type: type + 'Field',

361 adjustWidth: adjustWidth,

362 adjustHeight: adjustHeight,

363 render: renderField,

364 update: updateField,

365 model: {

366 signal:signal,

367 handler:handler,

368 placeHolder:placeHolder,

369 content:content,

370 style:style,

371 type:type

372 }

373 });

374 }

375 return F5(field);

376 }

378 function hoverable(signal, handler, elem) {

379 function onHover(bool) {

380 elm.notify(signal.id, handler(bool));

381 }

382 var props = Utils.replace([['hover',onHover]], elem.props);

383 return { props:props, element:elem.element };

384 }

386 function clickable(signal, value, elem) {

387 function onClick(bool) {

388 elm.notify(signal.id, value);

389 }

390 var props = Utils.replace([['click',onClick]], elem.props);

391 return { props:props, element:elem.element };

392 }

394 return elm.Native.Graphics.Input.values = {

395 input:input,

396 button:F3(button),

397 customButton:F5(customButton),

398 checkbox:F3(checkbox),

399 dropDown:F2(dropDown),

400 field:mkField('text'),

401 email:mkField('email'),

402 password:mkField('password'),

403 hoverable:F3(hoverable),

404 clickable:F3(clickable)

405 };