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

git.iko.soy/elk

on e8dffac help sign in

elk/runtime/Render/Element.js

280 lines 9.3 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); e.style.removeProperty('left'); break;

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

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

135 }

136 switch(pos.vertical.ctor) {

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

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

139 case 'P': e.style.top = toPos(pos.y); e.style.removeProperty('bottom'); 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) : '');

256 if (e.style.backgroundColor !== nextColor) {

257 e.style.backgroundColor = (nextColor === '' ? 'transparent' : 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 };