git.iko.soy/elk
on 79093ff help sign in
elk/runtime/Render/Element.js
254 lines 7.5 kB history raw
2ElmRuntime.Render.Element = function() {
3'use strict';
5var Utils = ElmRuntime.use(ElmRuntime.Render.Utils);
6var newElement = Utils.newElement, addTo = Utils.addTo, extract = Utils.extract,
7 addTransform = Utils.addTransform, removeTransform = Utils.removeTransform;
9function setProps(props, e) {
10 e.style.width = (props.width |0) + 'px';
11 e.style.height = (props.height|0) + 'px';
12 if (props.opacity !== 1) { e.style.opacity = props.opacity; }
13 if (props.color.ctor === 'Just') {
14 e.style.backgroundColor = extract(props.color._0);
15 }
16 if (props.tag !== '') { e.id = props.tag; }
17 if (props.href !== '') {
18 var a = newElement('a');
19 a.href = props.href;
20 addTo(a,e);
21 return a;
22 }
23 return e;
26function image(props, img) {
27 switch (img._0.ctor) {
28 case 'Plain': return plainImage(img._3);
29 case 'Fitted': return fittedImage(props.width, props.height, img._3);
30 case 'Cropped': return croppedImage(img,props.width,props.height,img._3);
31 }
34function plainImage(src) {
35 var img = newElement('img');
36 img.src = src;
37 img.name = src;
38 img.style.display = "block";
39 return img;
42function fittedImage(w, h, src) {
43 var e = newElement('div');
44 e.style.position = "relative";
45 e.style.overflow = "hidden";
47 var img = newElement('img');
48 img.onload = function() {
49 img.style.position = 'absolute';
50 img.style.margin = 'auto';
52 var sw = w, sh = h;
53 if (w / h > this.width / this.height) {
54 sh = Math.round(this.height * w / this.width);
55 } else {
56 sw = Math.round(this.width * h / this.height);
57 }
58 img.style.width = sw + 'px';
59 img.style.height = sh + 'px';
60 img.style.left = ((w - sw) / 2) + 'px';
61 img.style.top = ((h - sh) / 2) + 'px';
62 };
63 img.src = src;
64 img.name = src;
65 addTo(e,img);
66 return e;
69function croppedImage(elem, w, h, src) {
70 var pos = elem._0._0;
71 var e = newElement('div');
72 e.style.position = "relative";
73 e.style.overflow = "hidden";
75 var img = newElement('img');
76 img.onload = function() {
77 img.style.position = 'absolute';
78 img.style.margin = 'auto';
79 var sw = w / elem._1, sh = h / elem._2;
80 img.style.width = ((this.width * sw)|0) + 'px';
81 img.style.height = ((this.height * sh)|0) + 'px';
82 img.style.left = ((- pos._0 * sw)|0) + 'px';
83 img.style.top = ((- pos._1 * sh)|0) + 'px';
84 };
85 img.src = src;
86 img.name = src;
87 addTo(e,img);
88 return e;
91function goIn(e) { e.style.position = 'absolute'; return e; }
92function goDown(e) { return e }
93function goRight(e) { e.style.styleFloat = e.style.cssFloat = "left"; return e; }
94function flowWith(f, array) {
95 var container = newElement('div');
96 for (var i = array.length; i--; ) {
97 addTo(container, f(render(array[i])));
98 }
99 return container;
102function flow(dir,elist) {
103 var array = fromList(elist);
104 switch(dir.ctor) {
105 case "DDown": array.reverse();
106 case "DUp": return flowWith(goDown,array);
107 case "DRight": array.reverse();
108 case "DLeft": return flowWith(goRight,array);
109 case "DOut": array.reverse();
110 case "DIn": return flowWith(goIn,array);
111 }
114function toPos(pos) {
115 switch(pos[0]) {
116 case "Absolute": return pos[1] + "px";
117 case "Relative": return (pos[1] * 100) + "%";
118 }
121function setPos(pos,w,h,e) {
122 e.style.position = 'absolute';
123 e.style.margin = 'auto';
124 var transform = '';
125 switch(pos.horizontal) {
126 case 'P': e.style.right = toPos(pos.x); break;
127 case 'Z': transform = 'translateX(' + ((-w/2)|0) + 'px) ';
128 case 'N': e.style.left = toPos(pos.x); break;
129 }
130 switch(pos.vertical) {
131 case 'N': e.style.bottom = toPos(pos.x); break;
132 case 'Z': transform += 'translateY(' + ((-h/2)|0) + 'px)';
133 case 'P': e.style.top = toPos(pos.x); break;
134 }
135 if (transform !== '') addTransform(e.style, transform);
136 return e;
139function container(pos,elem) {
140 var e = render(elem);
141 setPos(pos, elem.props.width, elem.props.height, e);
142 var div = newElement('div');
143 div.style.position = 'relative';
144 div.style.overflow = 'hidden';
145 addTo(div,e);
146 return div;
149function rawHtml(html) {
150 var e = newElement('div');
151 e.innerHTML = html;
152 return e;
155function render(elem) { return setProps(elem.props, makeElement(elem)); }
156function makeElement(e) {
157 var elem = e.element;
158 switch(elem.ctor) {
159 case 'Image': return image(e.props, elem);
160 case 'Flow': return flow(elem._0, elem._1);
161 case 'Container': return container(elem._0, elem._1);
162 case 'Spacer': return newElement('div');
163 case 'RawHtml': return rawHtml(elem._0);
164 case 'Custom': return elem.render(elem.model);
165 }
168function update(node, curr, next) {
169 if (node.tagName === 'A') { node = node.firstChild; }
170 if (curr.props.id === next.props.id) return false;
171 if (curr.element.ctor !== next.element.ctor) {
172 node.parentNode.replaceChild(render(next),node);
173 return true;
174 }
175 var nextE = next.element, currE = curr.element;
176 switch(nextE.ctor) {
177 case "Spacer": break;
178 case "RawHtml": if (nextE._0 !== currE._0) node.innerHTML = nextE._0; break;
179 case "Image":
180 if (nextE._0.ctor === 'Plain') {
181 if (nextE._3 !== currE._3) node.src = nextE._3;
182 } else if (!eq(nextE,currE) ||
183 next.props.width !== curr.props.width ||
184 next.props.height !== curr.props.height) {
185 node.parentNode.replaceChild(render(next),node);
186 return true;
187 }
188 break;
189 case "Flow":
190 if (nextE._0.ctor !== currE._0.ctor) {
191 node.parentNode.replaceChild(render(next),node);
192 return true;
193 }
194 var nexts = nextE._1;
195 var kids = node.childNodes;
196 if (nexts.length !== kids.length) {
197 node.parentNode.replaceChild(render(next),node);
198 return true;
199 }
200 var currs = currE._1;
201 var goDir = function(x) { return x; };
202 switch(nextE[1][0]) {
203 case "DDown": case "DUp": goDir = goDown; break;
204 case "DRight": case "DLeft": goDir = goRight; break;
205 case "DOut": case "DIn": goDir = goIn; break;
206 }
207 for (var i = kids.length; i-- ;) {
208 update(kids[i],currs[i],nexts[i]);
209 goDir(kids[i]);
210 }
211 break;
212 case "Container":
213 var inner = node.firstChild;
214 if (!update(inner, currE._1, nextE._1)) {
215 if (nextE._0.horizontal.ctor !== currE._0.horizontal.ctor) {
216 inner.style.left = inner.style.right = 'none';
217 removeTransform(inner.style);
218 }
219 if (nextE._0.vertical.ctor !== currE._0.vertical.ctor) {
220 inner.style.top = inner.style.bottom = 'none';
221 removeTransform(inner.style);
222 }
223 }
224 setPos(nextE._0, next.props.width, next.props.height, node.firstChild);
225 break;
226 case "Custom":
227 node.parentNode.replaceChild(render(next),node);
228 return true;
229 }
230 var props = next.props, currP = curr.props, e = node;
231 if (props.width !== currP.width) e.style.width = (props.width |0) + 'px';
232 if (props.height !== currP.height) e.style.height = (props.height|0) + 'px';
233 if (props.opacity !== 1 && props.opacity !== currP.opacity) {
234 e.style.opacity = props.opacity;
235 }
236 var nextColor = (props.color.ctor === 'Just' ?
237 extract(props.color._0) : 'transparent');
238 if (e.style.backgroundColor !== nextColor) e.style.backgroundColor = nextColor;
239 if (props.tag !== currP.tag) { e.id = props.tag; }
240 if (props.href !== currP.href) {
241 if (currP.href === '') {
242 var a = newElement('a');
243 a.href = props.href;
244 addTo(a,e);
245 e.parentNode.replaceChild(a,e);
246 } else {
247 node.parentNode.href = props.href;
248 }
249 }
252return { render:render, update:update };
254};