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

git.iko.soy/elk

on dc18803 help sign in

elk/libraries/Native/Graphics/Input.js

378 lines 13 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 List = Elm.Native.List.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 = List.toArray(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 = 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: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 return btn;

138 }

140 function updateCustomButton(node, oldModel, newModel) {

141 var signal = newModel.signal;

142 node.elm_up.elm_signal = signal;

143 node.elm_hover.elm_signal = signal;

144 node.elm_down.elm_signal = signal;

146 var value = newModel.value;

147 node.elm_up.elm_value = value;

148 node.elm_hover.elm_value = value;

149 node.elm_down.elm_value = value;

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

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

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

154 }

156 function max3(a,b,c) {

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

158 return ab > c ? ab : c;

159 }

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

162 return A3(newElement,

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

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

165 { ctor: 'Custom',

166 type: 'CustomButton',

167 render: renderCustomButton,

168 update: updateCustomButton,

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

170 });

171 }

173 function renderCheckbox(model) {

174 var node = newNode('input');

175 node.type = 'checkbox';

176 node.checked = model.checked;

177 node.style.display = 'block';

178 node.style.pointerEvents = 'auto';

179 node.elm_signal = model.signal;

180 node.elm_handler = model.handler;

181 function change() {

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

183 }

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

185 return node;

186 }

188 function updateCheckbox(node, oldModel, newModel) {

189 node.elm_signal = newModel.signal;

190 node.elm_handler = newModel.handler;

191 node.checked = newModel.checked;

192 return true;

193 }

195 function checkbox(signal, handler, checked) {

196 return A3(newElement, 13, 13, {

197 ctor: 'Custom',

198 type: 'CheckBox',

199 render: renderCheckbox,

200 update: updateCheckbox,

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

202 });

203 }

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

206 if (node.parentNode) {

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

208 } else {

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

210 }

211 }

213 function updateIfNeeded(css, attribute, latestAttribute) {

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

215 css[attribute] = latestAttribute;

216 }

217 }

218 function cssDimensions(dimensions) {

219 return dimensions.top + 'px ' +

220 dimensions.right + 'px ' +

221 dimensions.bottom + 'px ' +

222 dimensions.left + 'px';

223 }

224 function updateFieldStyle(css, style) {

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

227 var outline = style.outline;

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

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

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

232 var highlight = style.highlight;

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

234 css.outline = 'none';

235 } else {

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

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

238 }

240 var textStyle = style.style;

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

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

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

244 }

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

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

247 }

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

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

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

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

252 }

253 }

255 function renderField(model) {

256 var field = newNode('input');

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

258 field.style.borderStyle = 'solid';

259 field.style.pointerEvents = 'auto';

261 field.type = model.type;

262 field.placeholder = model.placeHolder;

263 field.value = model.content.string;

265 field.elm_signal = model.signal;

266 field.elm_handler = model.handler;

267 field.elm_old_value = field.value;

269 function inputUpdate(event) {

270 var curr = field.elm_old_value;

271 var next = field.value;

272 if (curr === next) {

273 return;

274 }

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

277 var start = field.selectionStart;

278 var end = field.selectionEnd;

279 field.value = field.elm_old_value;

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

282 _:{},

283 string: next,

284 selection: {

285 _:{},

286 start: start,

287 end: end,

288 direction: { ctor: direction }

289 }

290 }));

291 }

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

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

295 field.elm_hasFocus = true;

296 });

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

298 field.elm_hasFocus = false;

299 });

301 return field;

302 }

304 function updateField(field, oldModel, newModel) {

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

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

307 }

308 field.elm_signal = newModel.signal;

309 field.elm_handler = newModel.handler;

311 field.type = newModel.type;

312 field.placeholder = newModel.placeHolder;

313 var value = newModel.content.string;

314 field.value = value;

315 field.elm_old_value = value;

316 if (field.elm_hasFocus) {

317 var selection = newModel.content.selection;

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

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

320 }

321 }

323 function mkField(type) {

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

325 var padding = style.padding;

326 var outline = style.outline.width;

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

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

329 return A3(newElement, 200, 30, {

330 ctor: 'Custom',

331 type: type + 'Field',

332 adjustWidth: adjustWidth,

333 adjustHeight: adjustHeight,

334 render: renderField,

335 update: updateField,

336 model: {

337 signal:signal,

338 handler:handler,

339 placeHolder:placeHolder,

340 content:content,

341 style:style,

342 type:type

343 }

344 });

345 }

346 return F5(field);

347 }

349 function hoverable(signal, handler, elem) {

350 function onHover(bool) {

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

352 }

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

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

355 }

357 function clickable(signal, value, elem) {

358 function onClick(bool) {

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

360 }

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

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

363 }

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

366 input:input,

367 button:F3(button),

368 customButton:F5(customButton),

369 checkbox:F3(checkbox),

370 dropDown:F2(dropDown),

371 field:mkField('text'),

372 email:mkField('email'),

373 password:mkField('password'),

374 hoverable:F3(hoverable),

375 clickable:F3(clickable)

376 };