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

git.iko.soy/elk

on ff9d643 help sign in

elk/runtime/Render/Element.js

417 lines 13 kB history raw

2ElmRuntime.Render.Element = function() {

3'use strict';

5var Utils = ElmRuntime.use(ElmRuntime.Render.Utils);

6var newElement = Utils.newElement, colorToCss = Utils.colorToCss,

7 addTransform = Utils.addTransform, removeTransform = Utils.removeTransform,

8 fromList = Utils.fromList, eq = Utils.eq;

10function setProps(elem, e) {

11 var props = elem.props;

12 var element = elem.element;

13 var width = props.width - (element.adjustWidth || 0);

14 var height = props.height - (element.adjustHeight || 0);

15 e.style.width = (width |0) + 'px';

16 e.style.height = (height|0) + 'px';

17 if (props.opacity !== 1) {

18 e.style.opacity = props.opacity;

19 }

20 if (props.color.ctor === 'Just') {

21 e.style.backgroundColor = colorToCss(props.color._0);

22 }

23 if (props.tag !== '') { e.id = props.tag; }

24 if (props.href !== '') {

25 var a = newElement('a');

26 a.href = props.href;

27 a.style.width = '100%';

28 a.style.height = '100%';

29 a.style.top = 0;

30 a.style.left = 0;

31 a.style.display = 'block';

32 a.style.position = 'absolute';

33 e.style.position = 'relative';

34 a.style.pointerEvents = 'auto';

35 e.appendChild(a);

36 }

37 if (props.hover.ctor !== '_Tuple0') {

38 addHover(e, props.hover);

39 }

40 if (props.click.ctor !== '_Tuple0') {

41 addClick(e, props.click);

42 }

43 return e;

46function addClick(e, handler) {

47 e.style.pointerEvents = 'auto';

48 e.elm_click_handler = handler;

49 function trigger(ev) {

50 e.elm_click_handler(Utils.Tuple0);

51 ev.stopPropagation();

52 }

53 e.elm_click_trigger = trigger;

54 e.addEventListener('click', trigger);

57function removeClick(e, handler) {

58 if (e.elm_click_trigger) {

59 e.removeEventListener('click', e.elm_click_trigger);

60 }

63function addHover(e, handler) {

64 e.style.pointerEvents = 'auto';

65 e.elm_hover_handler = handler;

66 e.elm_hover_count = 0;

68 function over(evt) {

69 if (e.elm_hover_count++ > 0) return;

70 e.elm_hover_handler(true);

71 evt.stopPropagation();

72 }

73 function out(evt) {

74 if (e.contains(evt.toElement || evt.relatedTarget)) return;

75 e.elm_hover_count = 0;

76 e.elm_hover_handler(false);

77 evt.stopPropagation();

78 }

79 e.elm_hover_over = over;

80 e.elm_hover_out = out;

81 e.addEventListener('mouseover', over);

82 e.addEventListener('mouseout', out);

85function removeHover(e) {

86 if (e.elm_hover_over) {

87 e.removeEventListener('mouseover', e.elm_hover_over);

88 }

89 if (e.elm_hover_out) {

90 e.removeEventListener('mouseout', e.elm_hover_out);

91 }

94function image(props, img) {

95 switch (img._0.ctor) {

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

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

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

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

100 }

103function plainImage(src) {

104 var img = newElement('img');

105 img.src = src;

106 img.name = src;

107 img.style.display = "block";

108 return img;

111function tiledImage(src) {

112 var div = newElement('div');

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

114 return div;

117function fittedImage(w, h, src) {

118 var div = newElement('div');

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

120 div.style.webkitBackgroundSize = 'cover';

121 div.style.MozBackgroundSize = 'cover';

122 div.style.OBackgroundSize = 'cover';

123 div.style.backgroundSize = 'cover';

124 return div;

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

128 var pos = elem._0._0;

129 var e = newElement('div');

130 e.style.overflow = "hidden";

132 var img = newElement('img');

133 img.onload = function() {

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

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

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

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

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

139 };

140 img.src = src;

141 img.name = src;

142 e.appendChild(img);

143 return e;

146function goOut(e) { e.style.position = 'absolute'; return e; }

147function goDown(e) { return e }

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

150var directionTable = {

151 DUp : goDown,

152 DDown : goDown,

153 DLeft : goRight,

154 DRight : goRight,

155 DIn : goOut,

156 DOut : goOut

158function needsReversal(dir) {

159 return dir == 'DUp' || dir == 'DLeft' || dir == 'DIn';

162function flow(dir,elist) {

163 var array = fromList(elist);

164 var container = newElement('div');

165 var goDir = directionTable[dir];

166 if (goDir == goOut) {

167 container.style.pointerEvents = 'none';

168 }

169 if (needsReversal(dir)) {

170 array.reverse();

171 }

172 var len = array.length;

173 for (var i = 0; i < len; ++i) {

174 container.appendChild(goDir(render(array[i])));

175 }

176 return container;

179function toPos(pos) {

180 switch(pos.ctor) {

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

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

183 }

186// must clear right, left, top, bottom, and transform

187// before calling this function

188function setPos(pos,elem,e) {

189 var element = elem.element;

190 var props = elem.props;

191 var w = props.width + (element.adjustWidth ? element.adjustWidth : 0);

192 var h = props.height + (element.adjustHeight ? element.adjustHeight : 0);

194 e.style.position = 'absolute';

195 e.style.margin = 'auto';

196 var transform = '';

197 switch(pos.horizontal.ctor) {

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

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

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

201 }

202 switch(pos.vertical.ctor) {

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

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

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

206 }

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

208 return e;

211function container(pos,elem) {

212 var e = render(elem);

213 setPos(pos, elem, e);

214 var div = newElement('div');

215 div.style.position = 'relative';

216 div.style.overflow = 'hidden';

217 div.appendChild(e);

218 return div;

221function rawHtml(elem) {

222 var html = elem.html;

223 var args = elem.args;

224 var guid = elem.guid;

225 var align = elem.align;

227 var div = newElement('div');

228 div.innerHTML = html;

229 div.style.visibility = "hidden";

230 if (align) div.style.textAlign = align;

231 document.body.appendChild(div);

233 for (var i = args.length; i--; ) {

234 var arg = args[i];

235 var span = document.getElementById('md-' + guid + '-' + i);

236 if (arg.isText) {

237 span.innerHTML = arg;

238 } else {

239 span.style.display = 'block';

240 span.style.width = arg.props.width + 'px';

241 span.style.height = arg.props.height + 'px';

242 span.appendChild(render(arg));

243 }

244 }

245 document.body.removeChild(div);

246 div.style.visibility = 'visible';

247 div.style.pointerEvents = 'auto';

248 return div;

251function render(elem) { return setProps(elem, makeElement(elem)); }

252function makeElement(e) {

253 var elem = e.element;

254 switch(elem.ctor) {

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

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

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

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

259 case 'RawHtml': return rawHtml(elem);

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

261 }

264function update(node, curr, next) {

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

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

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

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

269 return true;

270 }

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

272 switch(nextE.ctor) {

273 case "Spacer": break;

274 case "RawHtml":

275 // only markdown blocks have guids, so this must be a text block

276 if (nextE.guid === null) {

277 if(currE.html.valueOf() !== nextE.html.valueOf()) {

278 node.innerHTML = nextE.html;

279 }

280 break;

281 }

282 if (nextE.guid !== currE.guid) {

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

284 return true;

285 }

286 var nargs = nextE.args;

287 var cargs = currE.args;

288 for (var i = nargs.length; i--; ) {

289 var narg = nargs[i];

290 var carg = cargs[i]

291 if (narg == carg) continue;

292 var span = document.getElementById('md-' + currE.guid + '-' + i);

293 if (narg.isElement) {

294 if (carg.isElement) {

295 update(span, carg, narg);

296 } else {

297 span.style.display = 'block';

298 var e = render(narg);

299 span.innerHTML = '';

300 span.appendChild(e);

301 }

302 } else {

303 span.style.display = 'inline';

304 span.innerHTML = narg;

305 }

306 }

307 break;

308 case "Image":

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

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

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

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

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

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

315 return true;

316 }

317 break;

318 case "Flow":

319 var arr = fromList(nextE._1);

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

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

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

323 return true;

324 }

325 var nexts = fromList(nextE._1);

326 var kids = node.childNodes;

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

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

329 return true;

330 }

331 var currs = fromList(currE._1);

332 var dir = nextE._0.ctor;

333 var goDir = directionTable[dir];

334 var toReverse = needsReversal(dir);

335 var len = kids.length;

336 for (var i = len; i-- ;) {

337 update(kids[toReverse ? len - i - 1 : i],currs[i],nexts[i]);

338 goDir(kids[i]);

339 }

340 break;

341 case "Container":

342 update(node.firstChild, currE._1, nextE._1);

343 setPos(nextE._0, nextE._1, node.firstChild);

344 break;

345 case "Custom":

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

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

348 if (done) return;

349 } else {

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

351 }

352 }

353 updateProps(node, curr, next);

356function updateProps(node, curr, next) {

357 var props = next.props;

358 var currP = curr.props;

359 var e = node;

360 var element = next.element;

361 var width = props.width - (element.adjustWidth || 0);

362 var height = props.height - (element.adjustHeight || 0);

363 if (width !== currP.width) {

364 e.style.width = (width|0) + 'px';

365 }

366 if (height !== currP.height) {

367 e.style.height = (height|0) + 'px';

368 }

369 if (props.opacity !== currP.opacity) {

370 e.style.opacity = props.opacity;

371 }

372 var nextColor = (props.color.ctor === 'Just' ?

373 colorToCss(props.color._0) : '');

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

375 e.style.backgroundColor = (nextColor === '' ? 'transparent' : nextColor);

376 }

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

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

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

380 var a = newElement('a');

381 a.href = props.href;

382 a.style.width = '100%';

383 a.style.height = '100%';

384 a.style.top = 0;

385 a.style.left = 0;

386 a.style.display = 'block';

387 a.style.position = 'absolute';

388 e.style.position = 'relative';

389 a.style.pointerEvents = 'auto';

390 e.appendChild(a);

391 } else {

392 node.lastNode.href = props.href;

393 }

394 }

396 // update hover handlers

397 if (props.hover.ctor === '_Tuple0') {

398 removeHover(e);

399 } else if (e.elm_hover_handler) {

400 e.elm_hover_handler = props.hover;

401 } else {

402 addHover(e, props.hover);

403 }

405 // update click handlers

406 if (props.click.ctor === '_Tuple0') {

407 removeClick(e);

408 } else if (e.elm_click_handler) {

409 e.elm_click_handler = props.click;

410 } else {

411 addClick(e, props.click);

412 }

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