runtime/Render/Element.js · elk · git.iko.soy

git.iko.soy/elk

on 44fecef help sign in

elk/runtime/Render/Element.js

256 lines 7.7 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.appendChild(e);

22 return a;

23 }

24 return e;

27function image(props, img) {

28 switch (img._0.ctor) {

29 case 'Plain': return plainImage(img._3);

30 case 'Fitted': return fittedImage(props.width, props.height, img._3);

31 case 'Cropped': return croppedImage(img,props.width,props.height,img._3);

32 case 'Tiled': return tiledImage(img._3);

33 }

36function plainImage(src) {

37 var img = newElement('img');

38 img.src = src;

39 img.name = src;

40 img.style.display = "block";

41 return img;

44function tiledImage(src) {

45 var div = newElement('div');

46 div.style.backgroundImage = 'url(' + src + ')';

47 return div;

50function fittedImage(w, h, src) {

51 var div = newElement('div');

52 div.style.background = 'url(' + src + ') no-repeat center';

53 div.style.webkitBackgroundSize = 'cover';

54 div.style.MozBackgroundSize = 'cover';

55 div.style.OBackgroundSize = 'cover';

56 div.style.backgroundSize = 'cover';

57 return div;

60function croppedImage(elem, w, h, src) {

61 var pos = elem._0._0;

62 var e = newElement('div');

63 e.style.overflow = "hidden";

65 var img = newElement('img');

66 img.onload = function() {

67 var sw = w / elem._1, sh = h / elem._2;

68 img.style.width = ((this.width * sw)|0) + 'px';

69 img.style.height = ((this.height * sh)|0) + 'px';

70 img.style.marginLeft = ((- pos._0 * sw)|0) + 'px';

71 img.style.marginTop = ((- pos._1 * sh)|0) + 'px';

72 };

73 img.src = src;

74 img.name = src;

75 e.appendChild(img);

76 return e;

79function goIn(e) { e.style.position = 'absolute'; return e; }

80function goDown(e) { return e }

81function goRight(e) { e.style.styleFloat = e.style.cssFloat = "left"; return e; }

82function flowWith(f, array) {

83 var container = newElement('div');

84 for (var i = array.length; i--; ) {

85 container.appendChild(f(render(array[i])));

86 }

87 return container;

90function flow(dir,elist) {

91 var array = fromList(elist);

92 switch(dir.ctor) {

93 case "DDown": array.reverse();

94 case "DUp": return flowWith(goDown,array);

95 case "DRight": array.reverse();

96 case "DLeft": return flowWith(goRight,array);

97 case "DOut": array.reverse();

98 case "DIn": return flowWith(goIn,array);

99 }

102function toPos(pos) {

103 switch(pos.ctor) {

104 case "Absolute": return pos._0 + "px";

105 case "Relative": return (pos._0 * 100) + "%";

106 }

109function setPos(pos,w,h,e) {

110 e.style.position = 'absolute';

111 e.style.margin = 'auto';

112 var transform = '';

113 switch(pos.horizontal.ctor) {

114 case 'P': e.style.right = toPos(pos.x); break;

115 case 'Z': transform = 'translateX(' + ((-w/2)|0) + 'px) ';

116 case 'N': e.style.left = toPos(pos.x); break;

117 }

118 switch(pos.vertical.ctor) {

119 case 'N': e.style.bottom = toPos(pos.y); break;

120 case 'Z': transform += 'translateY(' + ((-h/2)|0) + 'px)';

121 case 'P': e.style.top = toPos(pos.y); break;

122 }

123 if (transform !== '') addTransform(e.style, transform);

124 return e;

127function container(pos,elem) {

128 var e = render(elem);

129 setPos(pos, elem.props.width, elem.props.height, e);

130 var div = newElement('div');

131 div.style.position = 'relative';

132 div.style.overflow = 'hidden';

133 div.appendChild(e);

134 return div;

137function rawHtml(html) {

138 var e = newElement('div');

139 e.innerHTML = html;

140 return e;

143function render(elem) { return setProps(elem.props, makeElement(elem)); }

144function makeElement(e) {

145 var elem = e.element;

146 switch(elem.ctor) {

147 case 'Image': return image(e.props, elem);

148 case 'Flow': return flow(elem._0, elem._1);

149 case 'Container': return container(elem._0, elem._1);

150 case 'Spacer': return newElement('div');

151 case 'RawHtml': return rawHtml(elem._0);

152 case 'Custom': return elem.render(elem.model);

153 }

156function update(node, curr, next) {

157 if (node.tagName === 'A') { node = node.firstChild; }

158 if (curr.props.id === next.props.id) return updateProps(node, curr, next);

159 if (curr.element.ctor !== next.element.ctor) {

160 node.parentNode.replaceChild(render(next),node);

161 return true;

162 }

163 var nextE = next.element, currE = curr.element;

164 switch(nextE.ctor) {

165 case "Spacer": break;

166 case "RawHtml":

167 if (nextE._0 !== currE._0) node.innerHTML = nextE._0;

168 break;

169 case "Image":

170 if (nextE._0.ctor === 'Plain') {

171 if (nextE._3 !== currE._3) node.src = nextE._3;

172 } else if (!eq(nextE,currE) ||

173 next.props.width !== curr.props.width ||

174 next.props.height !== curr.props.height) {

175 node.parentNode.replaceChild(render(next),node);

176 return true;

178 break;

179 case "Flow":

180 var arr = fromList(nextE._1);

181 for (var i = arr.length; i--; ) { arr[i] = arr[i].element.ctor; }

182 if (nextE._0.ctor !== currE._0.ctor) {

183 node.parentNode.replaceChild(render(next),node);

184 return true;

186 var nexts = fromList(nextE._1);

187 var kids = node.childNodes;

188 if (nexts.length !== kids.length) {

189 node.parentNode.replaceChild(render(next),node);

190 return true;

192 var currs = fromList(currE._1);

193 var goDir = function(x) { return x; };

194 switch(nextE._0.ctor) {

195 case "DDown": case "DUp": goDir = goDown; break;

196 case "DRight": case "DLeft": goDir = goRight; break;

197 case "DOut": case "DIn": goDir = goIn; break;

199 for (var i = kids.length; i-- ;) {

200 update(kids[i],currs[i],nexts[i]);

201 goDir(kids[i]);

203 break;

204 case "Container":

205 var inner = node.firstChild;

206 if (!update(inner, currE._1, nextE._1)) {

207 if (nextE._0.horizontal.ctor !== currE._0.horizontal.ctor) {

208 inner.style.left = inner.style.right = 'none';

209 removeTransform(inner.style);

210 }

211 if (nextE._0.vertical.ctor !== currE._0.vertical.ctor) {

212 inner.style.top = inner.style.bottom = 'none';

213 removeTransform(inner.style);

214 }

216 setPos(nextE._0, nextE._1.props.width, nextE._1.props.height, inner);

217 break;

218 case "Custom":

219 if (currE.type === nextE.type) {

220 var done = nextE.update(node, currE.model, nextE.model);

221 if (done) return;

222 } else {

223 return node.parentNode.replaceChild(render(next), node);

225 }

226 updateProps(node, curr, next);

229function updateProps(node, curr, next) {

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) {

239 e.style.backgroundColor = nextColor;

240 }

241 if (props.tag !== currP.tag) { e.id = props.tag; }

242 if (props.href !== currP.href) {

243 if (currP.href === '') {

244 var a = newElement('a');

245 a.href = props.href;

246 a.appendChild(e);

247 e.parentNode.replaceChild(a,e);

248 } else {

249 node.parentNode.href = props.href;

251 }

254return { render:render, update:update };