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

git.iko.soy/elk

on 89bbbb9 help sign in

elk/runtime/Render/Element.js

440 lines 13 kB history raw

2ElmRuntime.Render.Element = function() {

3'use strict';

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

6var newElement = Utils.newElement;

7var colorToCss = Utils.colorToCss;

8var addTransform = Utils.addTransform;

9var removeTransform = Utils.removeTransform;

10var fromList = Utils.fromList;

11var eq = Utils.eq;

13function setProps(elem, node) {

14 var props = elem.props;

16 var element = elem.element;

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

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

19 node.style.width = (width |0) + 'px';

20 node.style.height = (height|0) + 'px';

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

23 node.style.opacity = props.opacity;

24 }

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

27 node.style.backgroundColor = colorToCss(props.color._0);

28 }

30 if (props.tag !== '') {

31 node.id = props.tag;

32 }

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

35 addHover(node, props.hover);

36 }

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

39 addClick(node, props.click);

40 }

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

43 var anchor = newElement('a');

44 anchor.href = props.href;

45 anchor.style.display = 'block';

46 anchor.style.pointerEvents = 'auto';

47 anchor.appendChild(node);

48 node = anchor;

49 }

51 return node;

54function addClick(e, handler) {

55 e.style.pointerEvents = 'auto';

56 e.elm_click_handler = handler;

57 function trigger(ev) {

58 e.elm_click_handler(Utils.Tuple0);

59 ev.stopPropagation();

60 }

61 e.elm_click_trigger = trigger;

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

65function removeClick(e, handler) {

66 if (e.elm_click_trigger) {

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

68 }

71function addHover(e, handler) {

72 e.style.pointerEvents = 'auto';

73 e.elm_hover_handler = handler;

74 e.elm_hover_count = 0;

76 function over(evt) {

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

78 e.elm_hover_handler(true);

79 evt.stopPropagation();

80 }

81 function out(evt) {

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

83 e.elm_hover_count = 0;

84 e.elm_hover_handler(false);

85 evt.stopPropagation();

86 }

87 e.elm_hover_over = over;

88 e.elm_hover_out = out;

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

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

93function removeHover(e) {

94 if (e.elm_hover_over) {

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

96 }

97 if (e.elm_hover_out) {

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

99 }

102function image(props, img) {

103 switch (img._0.ctor) {

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

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

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

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

108 }

111function plainImage(src) {

112 var img = newElement('img');

113 img.src = src;

114 img.name = src;

115 img.style.display = "block";

116 return img;

119function tiledImage(src) {

120 var div = newElement('div');

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

122 return div;

125function fittedImage(w, h, src) {

126 var div = newElement('div');

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

128 div.style.webkitBackgroundSize = 'cover';

129 div.style.MozBackgroundSize = 'cover';

130 div.style.OBackgroundSize = 'cover';

131 div.style.backgroundSize = 'cover';

132 return div;

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

136 var pos = elem._0._0;

137 var e = newElement('div');

138 e.style.overflow = "hidden";

140 var img = newElement('img');

141 img.onload = function() {

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

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

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

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

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

147 };

148 img.src = src;

149 img.name = src;

150 e.appendChild(img);

151 return e;

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

155function goDown(e) { return e }

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

158var directionTable = {

159 DUp : goDown,

160 DDown : goDown,

161 DLeft : goRight,

162 DRight : goRight,

163 DIn : goOut,

164 DOut : goOut

166function needsReversal(dir) {

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

170function flow(dir,elist) {

171 var array = fromList(elist);

172 var container = newElement('div');

173 var goDir = directionTable[dir];

174 if (goDir == goOut) {

175 container.style.pointerEvents = 'none';

176 }

177 if (needsReversal(dir)) {

178 array.reverse();

179 }

180 var len = array.length;

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

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

183 }

184 return container;

187function toPos(pos) {

188 switch(pos.ctor) {

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

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

191 }

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

195// before calling this function

196function setPos(pos,elem,e) {

197 var element = elem.element;

198 var props = elem.props;

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

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

202 e.style.position = 'absolute';

203 e.style.margin = 'auto';

204 var transform = '';

205 switch(pos.horizontal.ctor) {

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

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

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

209 }

210 switch(pos.vertical.ctor) {

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

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

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

214 }

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

216 return e;

219function container(pos,elem) {

220 var e = render(elem);

221 setPos(pos, elem, e);

222 var div = newElement('div');

223 div.style.position = 'relative';

224 div.style.overflow = 'hidden';

225 div.appendChild(e);

226 return div;

229function rawHtml(elem) {

230 var html = elem.html;

231 var args = elem.args;

232 var guid = elem.guid;

233 var align = elem.align;

235 var div = newElement('div');

236 div.innerHTML = html;

237 div.style.visibility = "hidden";

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

239 document.body.appendChild(div);

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

242 var arg = args[i];

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

244 if (arg.isText) {

245 span.innerHTML = arg;

246 } else {

247 span.style.display = 'block';

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

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

250 span.appendChild(render(arg));

251 }

252 }

253 document.body.removeChild(div);

254 div.style.visibility = 'visible';

255 div.style.pointerEvents = 'auto';

256 return div;

259function render(elem) {

260 return setProps(elem, makeElement(elem));

262function makeElement(e) {

263 var elem = e.element;

264 switch(elem.ctor) {

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

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

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

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

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

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

271 }

274function update(node, curr, next) {

275 if (node.tagName === 'A') {

276 node = node.firstChild;

277 }

278 if (curr.props.id === next.props.id) {

279 return updateProps(node, curr, next);

280 }

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

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

283 return true;

284 }

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

286 switch(nextE.ctor) {

287 case "Spacer": break;

288 case "RawHtml":

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

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

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

292 node.innerHTML = nextE.html;

293 }

294 break;

295 }

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

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

298 return true;

299 }

300 var nargs = nextE.args;

301 var cargs = currE.args;

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

303 var narg = nargs[i];

304 var carg = cargs[i]

305 if (narg == carg) continue;

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

307 if (narg.isElement) {

308 if (carg.isElement) {

309 update(span, carg, narg);

310 } else {

311 span.style.display = 'block';

312 var e = render(narg);

313 span.innerHTML = '';

314 span.appendChild(e);

315 }

316 } else {

317 span.style.display = 'inline';

318 span.innerHTML = narg;

319 }

320 }

321 break;

322 case "Image":

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

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

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

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

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

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

329 return true;

330 }

331 break;

332 case "Flow":

333 var arr = fromList(nextE._1);

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

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

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

337 return true;

338 }

339 var nexts = fromList(nextE._1);

340 var kids = node.childNodes;

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

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

343 return true;

344 }

345 var currs = fromList(currE._1);

346 var dir = nextE._0.ctor;

347 var goDir = directionTable[dir];

348 var toReverse = needsReversal(dir);

349 var len = kids.length;

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

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

352 goDir(kids[i]);

353 }

354 break;

355 case "Container":

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

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

358 break;

359 case "Custom":

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

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

362 if (done) return;

363 } else {

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

365 }

366 }

367 updateProps(node, curr, next);

370function updateProps(node, curr, next) {

371 var nextProps = next.props;

372 var currProps = curr.props;

374 var element = next.element;

375 var width = nextProps.width - (element.adjustWidth || 0);

376 var height = nextProps.height - (element.adjustHeight || 0);

377 if (width !== currProps.width) {

378 node.style.width = (width|0) + 'px';

379 }

380 if (height !== currProps.height) {

381 node.style.height = (height|0) + 'px';

382 }

384 if (nextProps.opacity !== currProps.opacity) {

385 node.style.opacity = nextProps.opacity;

386 }

388 var nextColor = nextProps.color.ctor === 'Just'

389 ? colorToCss(nextProps.color._0)

390 : 'transparent';

391 if (node.style.backgroundColor !== nextColor) {

392 node.style.backgroundColor = nextColor;

393 }

395 if (nextProps.tag !== currProps.tag) {

396 node.id = nextProps.tag;

397 }

399 if (nextProps.href !== currProps.href) {

400 if (currProps.href === '') {

401 // add a surrounding href

402 var anchor = newElement('a');

403 anchor.href = nextProps.href;

404 anchor.style.display = 'block';

405 anchor.style.pointerEvents = 'auto';

407 node.parentNode.replaceChild(anchor, node);

408 anchor.appendChild(node);

409 } else if (nextProps.href === '') {

410 // remove the surrounding href

411 var anchor = node.parentNode;

412 anchor.parentNode.replaceChild(node, anchor);

413 } else {

414 // just update the link

415 node.parentNode.href = nextProps.href;

416 }

417 }

419 // update hover handlers

420 if (nextProps.hover.ctor === '_Tuple0') {

421 removeHover(node);

422 } else if (node.elm_hover_handler) {

423 node.elm_hover_handler = nextProps.hover;

424 } else {

425 addHover(node, nextProps.hover);

426 }

428 // update click handlers

429 if (nextProps.click.ctor === '_Tuple0') {

430 removeClick(node);

431 } else if (node.elm_click_handler) {

432 node.elm_click_handler = nextProps.click;

433 } else {

434 addClick(node, nextProps.click);

435 }

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