git.iko.soy/elk
on ce614bb help sign in
elk/runtime/Render/Element.js
440 lines 13 kB history raw
2ElmRuntime.Render.Element = function() {
3'use strict';
5var Utils = ElmRuntime.use(ElmRuntime.Render.Utils);
6var newElement = Utils.newElement;
7var colorToCss = Utils.colorToCss;
8var addTransform = Utils.addTransform;
9var removeTransform = Utils.removeTransform;
10var fromList = Utils.fromList;
11var eq = Utils.eq;
13function setProps(elem, node) {
14 var props = elem.props;
16 var element = elem.element;
17 var width = props.width - (element.adjustWidth || 0);
18 var height = props.height - (element.adjustHeight || 0);
19 node.style.width = (width |0) + 'px';
20 node.style.height = (height|0) + 'px';
22 if (props.opacity !== 1) {
23 node.style.opacity = props.opacity;
24 }
26 if (props.color.ctor === 'Just') {
27 node.style.backgroundColor = colorToCss(props.color._0);
28 }
30 if (props.tag !== '') {
31 node.id = props.tag;
32 }
34 if (props.hover.ctor !== '_Tuple0') {
35 addHover(node, props.hover);
36 }
38 if (props.click.ctor !== '_Tuple0') {
39 addClick(node, props.click);
40 }
42 if (props.href !== '') {
43 var anchor = newElement('a');
44 anchor.href = props.href;
45 anchor.style.display = 'block';
46 anchor.style.pointerEvents = 'auto';
47 anchor.appendChild(node);
48 node = anchor;
49 }
51 return node;
54function addClick(e, handler) {
55 e.style.pointerEvents = 'auto';
56 e.elm_click_handler = handler;
57 function trigger(ev) {
58 e.elm_click_handler(Utils.Tuple0);
59 ev.stopPropagation();
60 }
61 e.elm_click_trigger = trigger;
62 e.addEventListener('click', trigger);
65function removeClick(e, handler) {
66 if (e.elm_click_trigger) {
67 e.removeEventListener('click', e.elm_click_trigger);
68 }
71function addHover(e, handler) {
72 e.style.pointerEvents = 'auto';
73 e.elm_hover_handler = handler;
74 e.elm_hover_count = 0;
76 function over(evt) {
77 if (e.elm_hover_count++ > 0) return;
78 e.elm_hover_handler(true);
79 evt.stopPropagation();
80 }
81 function out(evt) {
82 if (e.contains(evt.toElement || evt.relatedTarget)) return;
83 e.elm_hover_count = 0;
84 e.elm_hover_handler(false);
85 evt.stopPropagation();
86 }
87 e.elm_hover_over = over;
88 e.elm_hover_out = out;
89 e.addEventListener('mouseover', over);
90 e.addEventListener('mouseout', out);
93function removeHover(e) {
94 if (e.elm_hover_over) {
95 e.removeEventListener('mouseover', e.elm_hover_over);
96 }
97 if (e.elm_hover_out) {
98 e.removeEventListener('mouseout', e.elm_hover_out);
99 }
102function image(props, img) {
103 switch (img._0.ctor) {
104 case 'Plain': return plainImage(img._3);
105 case 'Fitted': return fittedImage(props.width, props.height, img._3);
106 case 'Cropped': return croppedImage(img,props.width,props.height,img._3);
107 case 'Tiled': return tiledImage(img._3);
108 }
111function plainImage(src) {
112 var img = newElement('img');
113 img.src = src;
114 img.name = src;
115 img.style.display = "block";
116 return img;
119function tiledImage(src) {
120 var div = newElement('div');
121 div.style.backgroundImage = 'url(' + src + ')';
122 return div;
125function fittedImage(w, h, src) {
126 var div = newElement('div');
127 div.style.background = 'url(' + src + ') no-repeat center';
128 div.style.webkitBackgroundSize = 'cover';
129 div.style.MozBackgroundSize = 'cover';
130 div.style.OBackgroundSize = 'cover';
131 div.style.backgroundSize = 'cover';
132 return div;
135function croppedImage(elem, w, h, src) {
136 var pos = elem._0._0;
137 var e = newElement('div');
138 e.style.overflow = "hidden";
140 var img = newElement('img');
141 img.onload = function() {
142 var sw = w / elem._1, sh = h / elem._2;
143 img.style.width = ((this.width * sw)|0) + 'px';
144 img.style.height = ((this.height * sh)|0) + 'px';
145 img.style.marginLeft = ((- pos._0 * sw)|0) + 'px';
146 img.style.marginTop = ((- pos._1 * sh)|0) + 'px';
147 };
148 img.src = src;
149 img.name = src;
150 e.appendChild(img);
151 return e;
154function goOut(e) { e.style.position = 'absolute'; return e; }
155function goDown(e) { return e }
156function goRight(e) { e.style.styleFloat = e.style.cssFloat = "left"; return e; }
158var directionTable = {
159 DUp : goDown,
160 DDown : goDown,
161 DLeft : goRight,
162 DRight : goRight,
163 DIn : goOut,
164 DOut : goOut
165};
166function needsReversal(dir) {
167 return dir == 'DUp' || dir == 'DLeft' || dir == 'DIn';
170function flow(dir,elist) {
171 var array = fromList(elist);
172 var container = newElement('div');
173 var goDir = directionTable[dir];
174 if (goDir == goOut) {
175 container.style.pointerEvents = 'none';
176 }
177 if (needsReversal(dir)) {
178 array.reverse();
179 }
180 var len = array.length;
181 for (var i = 0; i < len; ++i) {
182 container.appendChild(goDir(render(array[i])));
183 }
184 return container;
187function toPos(pos) {
188 switch(pos.ctor) {
189 case "Absolute": return pos._0 + "px";
190 case "Relative": return (pos._0 * 100) + "%";
191 }
194// must clear right, left, top, bottom, and transform
195// before calling this function
196function setPos(pos,elem,e) {
197 var element = elem.element;
198 var props = elem.props;
199 var w = props.width + (element.adjustWidth ? element.adjustWidth : 0);
200 var h = props.height + (element.adjustHeight ? element.adjustHeight : 0);
202 e.style.position = 'absolute';
203 e.style.margin = 'auto';
204 var transform = '';
205 switch(pos.horizontal.ctor) {
206 case 'P': e.style.right = toPos(pos.x); e.style.removeProperty('left'); break;
207 case 'Z': transform = 'translateX(' + ((-w/2)|0) + 'px) ';
208 case 'N': e.style.left = toPos(pos.x); e.style.removeProperty('right'); break;
209 }
210 switch(pos.vertical.ctor) {
211 case 'N': e.style.bottom = toPos(pos.y); e.style.removeProperty('top'); break;
212 case 'Z': transform += 'translateY(' + ((-h/2)|0) + 'px)';
213 case 'P': e.style.top = toPos(pos.y); e.style.removeProperty('bottom'); break;
214 }
215 if (transform !== '') addTransform(e.style, transform);
216 return e;
219function container(pos,elem) {
220 var e = render(elem);
221 setPos(pos, elem, e);
222 var div = newElement('div');
223 div.style.position = 'relative';
224 div.style.overflow = 'hidden';
225 div.appendChild(e);
226 return div;
229function rawHtml(elem) {
230 var html = elem.html;
231 var args = elem.args;
232 var guid = elem.guid;
233 var align = elem.align;
235 var div = newElement('div');
236 div.innerHTML = html;
237 div.style.visibility = "hidden";
238 if (align) div.style.textAlign = align;
239 document.body.appendChild(div);
241 for (var i = args.length; i--; ) {
242 var arg = args[i];
243 var span = document.getElementById('md-' + guid + '-' + i);
244 if (arg.isText) {
245 span.innerHTML = arg;
246 } else {
247 span.style.display = 'block';
248 span.style.width = arg.props.width + 'px';
249 span.style.height = arg.props.height + 'px';
250 span.appendChild(render(arg));
251 }
252 }
253 document.body.removeChild(div);
254 div.style.visibility = 'visible';
255 div.style.pointerEvents = 'auto';
256 return div;
259function render(elem) {
260 return setProps(elem, makeElement(elem));
262function makeElement(e) {
263 var elem = e.element;
264 switch(elem.ctor) {
265 case 'Image': return image(e.props, elem);
266 case 'Flow': return flow(elem._0.ctor, elem._1);
267 case 'Container': return container(elem._0, elem._1);
268 case 'Spacer': return newElement('div');
269 case 'RawHtml': return rawHtml(elem);
270 case 'Custom': return elem.render(elem.model);
271 }
274function update(node, curr, next) {
275 if (node.tagName === 'A') {
276 node = node.firstChild;
277 }
278 if (curr.props.id === next.props.id) {
279 return updateProps(node, curr, next);
280 }
281 if (curr.element.ctor !== next.element.ctor) {
282 node.parentNode.replaceChild(render(next),node);
283 return true;
284 }
285 var nextE = next.element, currE = curr.element;
286 switch(nextE.ctor) {
287 case "Spacer": break;
288 case "RawHtml":
289 // only markdown blocks have guids, so this must be a text block
290 if (nextE.guid === null) {
291 if(currE.html.valueOf() !== nextE.html.valueOf()) {
292 node.innerHTML = nextE.html;
293 }
294 break;
295 }
296 if (nextE.guid !== currE.guid) {
297 node.parentNode.replaceChild(render(next),node);
298 return true;
299 }
300 var nargs = nextE.args;
301 var cargs = currE.args;
302 for (var i = nargs.length; i--; ) {
303 var narg = nargs[i];
304 var carg = cargs[i]
305 if (narg == carg) continue;
306 var span = document.getElementById('md-' + currE.guid + '-' + i);
307 if (narg.isElement) {
308 if (carg.isElement) {
309 update(span, carg, narg);
310 } else {
311 span.style.display = 'block';
312 var e = render(narg);
313 span.innerHTML = '';
314 span.appendChild(e);
315 }
316 } else {
317 span.style.display = 'inline';
318 span.innerHTML = narg;
319 }
320 }
321 break;
322 case "Image":
323 if (nextE._0.ctor === 'Plain') {
324 if (nextE._3 !== currE._3) node.src = nextE._3;
325 } else if (!eq(nextE,currE) ||
326 next.props.width !== curr.props.width ||
327 next.props.height !== curr.props.height) {
328 node.parentNode.replaceChild(render(next),node);
329 return true;
330 }
331 break;
332 case "Flow":
333 var arr = fromList(nextE._1);
334 for (var i = arr.length; i--; ) { arr[i] = arr[i].element.ctor; }
335 if (nextE._0.ctor !== currE._0.ctor) {
336 node.parentNode.replaceChild(render(next),node);
337 return true;
338 }
339 var nexts = fromList(nextE._1);
340 var kids = node.childNodes;
341 if (nexts.length !== kids.length) {
342 node.parentNode.replaceChild(render(next),node);
343 return true;
344 }
345 var currs = fromList(currE._1);
346 var dir = nextE._0.ctor;
347 var goDir = directionTable[dir];
348 var toReverse = needsReversal(dir);
349 var len = kids.length;
350 for (var i = len; i-- ;) {
351 update(kids[toReverse ? len - i - 1 : i],currs[i],nexts[i]);
352 goDir(kids[i]);
353 }
354 break;
355 case "Container":
356 update(node.firstChild, currE._1, nextE._1);
357 setPos(nextE._0, nextE._1, node.firstChild);
358 break;
359 case "Custom":
360 if (currE.type === nextE.type) {
361 var done = nextE.update(node, currE.model, nextE.model);
362 if (done) return;
363 } else {
364 return node.parentNode.replaceChild(render(next), node);
365 }
366 }
367 updateProps(node, curr, next);
370function updateProps(node, curr, next) {
371 var nextProps = next.props;
372 var currProps = curr.props;
374 var element = next.element;
375 var width = nextProps.width - (element.adjustWidth || 0);
376 var height = nextProps.height - (element.adjustHeight || 0);
377 if (width !== currProps.width) {
378 node.style.width = (width|0) + 'px';
379 }
380 if (height !== currProps.height) {
381 node.style.height = (height|0) + 'px';
382 }
384 if (nextProps.opacity !== currProps.opacity) {
385 node.style.opacity = nextProps.opacity;
386 }
388 var nextColor = nextProps.color.ctor === 'Just'
389 ? colorToCss(nextProps.color._0)
390 : 'transparent';
391 if (node.style.backgroundColor !== nextColor) {
392 node.style.backgroundColor = nextColor;
393 }
395 if (nextProps.tag !== currProps.tag) {
396 node.id = nextProps.tag;
397 }
399 if (nextProps.href !== currProps.href) {
400 if (currProps.href === '') {
401 // add a surrounding href
402 var anchor = newElement('a');
403 anchor.href = nextProps.href;
404 anchor.style.display = 'block';
405 anchor.style.pointerEvents = 'auto';
407 node.parentNode.replaceChild(anchor, node);
408 anchor.appendChild(node);
409 } else if (nextProps.href === '') {
410 // remove the surrounding href
411 var anchor = node.parentNode;
412 anchor.parentNode.replaceChild(node, anchor);
413 } else {
414 // just update the link
415 node.parentNode.href = nextProps.href;
416 }
417 }
419 // update hover handlers
420 if (nextProps.hover.ctor === '_Tuple0') {
421 removeHover(node);
422 } else if (node.elm_hover_handler) {
423 node.elm_hover_handler = nextProps.hover;
424 } else {
425 addHover(node, nextProps.hover);
426 }
428 // update click handlers
429 if (nextProps.click.ctor === '_Tuple0') {
430 removeClick(node);
431 } else if (node.elm_click_handler) {
432 node.elm_click_handler = nextProps.click;
433 } else {
434 addClick(node, nextProps.click);
435 }
438return { render:render, update:update };
440};