Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Side by Side Diff: js/io-element.js

Issue 29723623: Issue 6487 - IOElement as base component for ABP UI (Closed)
Patch Set: Created March 21, 2018, 8:10 a.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « .hgignore ('k') | package.json » ('j') | package.json » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 /* globals module, require */
2
3 "use strict";
4
5 // Custom Elements ponyfill (a polyfill triggered on demand)
6 const customElementsPonyfill = require("document-register-element/pony");
7 if (typeof customElements !== "object")
8 customElementsPonyfill(window);
9
10 // external dependencies
11 const {default: HyperHTMLElement} = require("hyperhtml-element/cjs");
12
13 // provides a unique-id suffix per each component
14 let counter = 0;
15
16 // common Custom Element class to extend
17 class IOElement extends HyperHTMLElement
18 {
19 // get a unique ID or, if null, set one and returns it
20 static getID(element)
21 {
22 return element.getAttribute("id") || IOElement.setID(element);
23 }
24
25 // set a unique ID to a generic element and returns the ID
26 static setID(element)
27 {
28 const id = `${element.nodeName.toLowerCase()}-${counter++}`;
29 element.setAttribute("id", id);
30 return id;
31 }
32
33 // lazily retrieve or define a custom element ID
34 get id()
35 {
36 return IOElement.getID(this);
37 }
38
39 // whenever an element is created, render its content once
40 created() { this.render(); }
41
42 // by default, render is a no-op
43 render() {}
44 }
45
46 // whenever an interpolation with ${{i18n: 'string-id'}} is found
47 // transform such value into the expected content
48 // example:
49 // render() {
50 // return this.html`<div>${{i18n:'about-abp'}}</div>`;
51 // }
52 const {setElementText} = ext.i18n;
53 IOElement.intent("i18n", id =>
54 {
55 const fragment = document.createDocumentFragment();
56 setElementText(fragment, id);
57 return fragment;
58 });
59
60 module.exports = IOElement;
OLDNEW
« no previous file with comments | « .hgignore ('k') | package.json » ('j') | package.json » ('J')

Powered by Google App Engine
This is Rietveld