git.iko.soy/elk
on a268421 help sign in
elk/runtime/Render/Element.js
280 lines 9.1 kB history raw
2ElmRuntime.Render.Element = function() {
3'use strict';
5var Utils = ElmRuntime.use(ElmRuntime.Render.Utils);
6var newElement = Utils.newElement, extract = Utils.extract,
7 addTransform = Utils.addTransform, removeTransform = Utils.removeTransform,
8 fromList = Utils.fromList, eq = Utils.eq;
10function setProps(props, e) {
11 e.style.width = (props.width |0) + 'px';
12 e.style.height = (props.height|0) + 'px';
13 if (props.opacity !== 1) { e.style.opacity = props.opacity; }
14 if (props.color.ctor === 'Just') {
15 e.style.backgroundColor = extract(props.color._0);
16 }
17 if (props.tag !== '') { e.id = props.tag; }
18 if (props.href !== '') {
19 var a = newElement('a');
20 a.href = props.href;
21 a.style.width = '100%';
22 a.style.height = '100%';
23 a.style.top = 0;
24 a.style.left = 0;
25 a.style.display = 'block';
26 a.style.position = 'absolute';
27 e.style.position = 'relative';
28 e.appendChild(a);
29 }
30 if (props.hover.ctor !== '_Tuple0') {
31 var overCount = 0;
32 e.addEventListener('mouseover', function() {
33 if (overCount++ > 0) return;
34 props.hover(true);
35 });
36 e.addEventListener('mouseout', function(evt) {
37 if (e.contains(evt.toElement || evt.relatedTarget)) return;
38 overCount = 0;
39 props.hover(false);
40 });
41 }
42 return e;
45function image(props, img) {
46 switch (img._0.ctor) {
47 case 'Plain': return plainImage(img._3);
48 case 'Fitted': return fittedImage(props.width, props.height, img._3);
49 case 'Cropped': return croppedImage(img,props.width,props.height,img._3);
50 case 'Tiled': return tiledImage(img._3);
51 }
54function plainImage(src) {
55 var img = newElement('img');
56 img.src = src;
57 img.name = src;
58 img.style.display = "block";
59 return img;
62function tiledImage(src) {
63 var div = newElement('div');
64 div.style.backgroundImage = 'url(' + src + ')';
65 return div;
68function fittedImage(w, h, src) {
69 var div = newElement('div');
70 div.style.background = 'url(' + src + ') no-repeat center';
71 div.style.webkitBackgroundSize = 'cover';
72 div.style.MozBackgroundSize = 'cover';
73 div.style.OBackgroundSize = 'cover';
74 div.style.backgroundSize = 'cover';
75 return div;
78function croppedImage(elem, w, h, src) {
79 var pos = elem._0._0;
80 var e = newElement('div');
81 e.style.overflow = "hidden";
83 var img = newElement('img');
84 img.onload = function() {
85 var sw = w / elem._1, sh = h / elem._2;
86 img.style.width = ((this.width * sw)|0) + 'px';
87 img.style.height = ((this.height * sh)|0) + 'px';
88 img.style.marginLeft = ((- pos._0 * sw)|0) + 'px';
89 img.style.marginTop = ((- pos._1 * sh)|0) + 'px';
90 };
91 img.src = src;
92 img.name = src;
93 e.appendChild(img);
94 return e;
97function goIn(e) { e.style.position = 'absolute'; return e; }
98function goDown(e) { return e }
99function goRight(e) { e.style.styleFloat = e.style.cssFloat = "left"; return e; }
100function flowWith(f, array) {
101 var container = newElement('div');
102 for (var i = array.length; i--; ) {
103 container.appendChild(f(render(array[i])));
104 }
105 return container;
108function flow(dir,elist) {
109 var array = fromList(elist);
110 switch(dir.ctor) {
111 case "DDown": array.reverse();
112 case "DUp": return flowWith(goDown,array);
113 case "DRight": array.reverse();
114 case "DLeft": return flowWith(goRight,array);
115 case "DOut": array.reverse();
116 case "DIn": return flowWith(goIn,array);
117 }
120function toPos(pos) {
121 switch(pos.ctor) {
122 case "Absolute": return pos._0 + "px";
123 case "Relative": return (pos._0 * 100) + "%";
124 }
127function setPos(pos,w,h,e) {
128 e.style.position = 'absolute';
129 e.style.margin = 'auto';
130 var transform = '';
131 switch(pos.horizontal.ctor) {
132 case 'P': e.style.right = toPos(pos.x); break;
133 case 'Z': transform = 'translateX(' + ((-w/2)|0) + 'px) ';
134 case 'N': e.style.left = toPos(pos.x); break;
135 }
136 switch(pos.vertical.ctor) {
137 case 'N': e.style.bottom = toPos(pos.y); break;
138 case 'Z': transform += 'translateY(' + ((-h/2)|0) + 'px)';
139 case 'P': e.style.top = toPos(pos.y); break;
140 }
141 if (transform !== '') addTransform(e.style, transform);
142 return e;
145function container(pos,elem) {
146 var e = render(elem);
147 setPos(pos, elem.props.width, elem.props.height, e);
148 var div = newElement('div');
149 div.style.position = 'relative';
150 div.style.overflow = 'hidden';
151 div.appendChild(e);
152 return div;
155function rawHtml(html) {
156 var e = newElement('div');
157 e.innerHTML = html;
158 return e;
161function render(elem) { return setProps(elem.props, makeElement(elem)); }
162function makeElement(e) {
163 var elem = e.element;
164 switch(elem.ctor) {
165 case 'Image': return image(e.props, elem);
166 case 'Flow': return flow(elem._0, elem._1);
167 case 'Container': return container(elem._0, elem._1);
168 case 'Spacer': return newElement('div');
169 case 'RawHtml': return rawHtml(elem._0);
170 case 'Custom': return elem.render(elem.model);
171 }
174function update(node, curr, next) {
175 if (node.tagName === 'A') { node = node.firstChild; }
176 if (curr.props.id === next.props.id) return updateProps(node, curr, next);
177 if (curr.element.ctor !== next.element.ctor) {
178 node.parentNode.replaceChild(render(next),node);
179 return true;
180 }
181 var nextE = next.element, currE = curr.element;
182 switch(nextE.ctor) {
183 case "Spacer": break;
184 case "RawHtml":
185 if (nextE._0 !== currE._0) node.innerHTML = nextE._0;
186 break;
187 case "Image":
188 if (nextE._0.ctor === 'Plain') {
189 if (nextE._3 !== currE._3) node.src = nextE._3;
190 } else if (!eq(nextE,currE) ||
191 next.props.width !== curr.props.width ||
192 next.props.height !== curr.props.height) {
193 node.parentNode.replaceChild(render(next),node);
194 return true;
195 }
196 break;
197 case "Flow":
198 var arr = fromList(nextE._1);
199 for (var i = arr.length; i--; ) { arr[i] = arr[i].element.ctor; }
200 if (nextE._0.ctor !== currE._0.ctor) {
201 node.parentNode.replaceChild(render(next),node);
202 return true;
203 }
204 var nexts = fromList(nextE._1);
205 var kids = node.childNodes;
206 if (nexts.length !== kids.length) {
207 node.parentNode.replaceChild(render(next),node);
208 return true;
209 }
210 var currs = fromList(currE._1);
211 var goDir = function(x) { return x; };
212 switch(nextE._0.ctor) {
213 case "DDown": case "DUp": goDir = goDown; break;
214 case "DRight": case "DLeft": goDir = goRight; break;
215 case "DOut": case "DIn": goDir = goIn; break;
216 }
217 for (var i = kids.length; i-- ;) {
218 update(kids[i],currs[i],nexts[i]);
219 goDir(kids[i]);
220 }
221 break;
222 case "Container":
223 var inner = node.firstChild;
224 if (!update(inner, currE._1, nextE._1)) {
225 if (nextE._0.horizontal.ctor !== currE._0.horizontal.ctor) {
226 inner.style.left = inner.style.right = 'none';
227 removeTransform(inner.style);
228 }
229 if (nextE._0.vertical.ctor !== currE._0.vertical.ctor) {
230 inner.style.top = inner.style.bottom = 'none';
231 removeTransform(inner.style);
232 }
233 }
234 setPos(nextE._0, nextE._1.props.width, nextE._1.props.height, inner);
235 break;
236 case "Custom":
237 if (currE.type === nextE.type) {
238 var done = nextE.update(node, currE.model, nextE.model);
239 if (done) return;
240 } else {
241 return node.parentNode.replaceChild(render(next), node);
242 }
243 }
244 updateProps(node, curr, next);
247function updateProps(node, curr, next) {
248 var props = next.props, currP = curr.props, e = node;
249 if (props.width !== currP.width) e.style.width = (props.width |0) + 'px';
250 if (props.height !== currP.height) e.style.height = (props.height|0) + 'px';
251 if (props.opacity !== 1 && props.opacity !== currP.opacity) {
252 e.style.opacity = props.opacity;
253 }
254 var nextColor = (props.color.ctor === 'Just' ?
255 extract(props.color._0) : 'transparent');
256 if (e.style.backgroundColor !== nextColor) {
257 e.style.backgroundColor = nextColor;
258 }
259 if (props.tag !== currP.tag) { e.id = props.tag; }
260 if (props.href !== currP.href) {
261 if (currP.href === '') {
262 var a = newElement('a');
263 a.href = props.href;
264 a.style.width = '100%';
265 a.style.height = '100%';
266 a.style.top = 0;
267 a.style.left = 0;
268 a.style.display = 'block';
269 a.style.position = 'absolute';
270 e.style.position = 'relative';
271 e.appendChild(a);
272 } else {
273 node.lastNode.href = props.href;
274 }
275 }
278return { render:render, update:update };
280};