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

Unified Diff: js/io-element.js

Issue 29723623: Issue 6487 - IOElement as base component for ABP UI (Closed)
Patch Set: Created March 15, 2018, 2:42 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « .gitignore ('k') | package.json » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: js/io-element.js
===================================================================
new file mode 100644
--- /dev/null
+++ b/js/io-element.js
@@ -0,0 +1,60 @@
+/* globals module, require */
+
+"use strict";
+
+// Custom Elements ponyfill (a polyfill triggered on demand)
+const customElementsPonyfill = require("document-register-element/pony");
+if (typeof customElements !== "object")
+ customElementsPonyfill(window);
+
+// external dependencies
+const {default: HyperHTMLElement} = require("hyperhtml-element/cjs");
+
+// provides a unique-id suffix per each component
+let counter = 0;
+
+// common Custom Element class to extend
+class IOElement extends HyperHTMLElement
+{
+ // get a unique ID or, if null, set one and returns it
+ static getID(element)
saroyanm 2018/03/20 20:08:19 Question: Why is the generation of unique ID is re
a.giammarchi 2018/03/21 07:27:19 It's not, it's aria related question. Most of the
a.giammarchi 2018/03/21 08:15:57 I've forgotten an important detail. Once you have
saroyanm 2018/03/21 11:22:21 We could also wrap element inside of the label tag
saroyanm 2018/03/21 11:22:22 Noted.
+ {
+ return element.getAttribute("id") || IOElement.setID(element);
+ }
+
+ // set a unique ID to a generic element and returns the ID
+ static setID(element)
+ {
+ const id = `${element.nodeName.toLowerCase()}-${counter++}`;
+ element.setAttribute("id", id);
+ return id;
+ }
+
+ // lazily retrieve or define a custom element ID
+ get id()
+ {
+ return IOElement.getID(this);
+ }
+
+ // whenever an element is created, render its content once
+ created() { this.render(); }
+
+ // by default, render is a no-op
+ render() {}
+}
+
+// whenever an interpolation with ${{i18n: 'string-id'}} is found
+// transform such value into the expected content
+// example:
+// render() {
+// return this.html`<div>${{i18n:'about-abp'}}</div>`;
+// }
+const {setElementText} = ext.i18n;
+IOElement.intent("i18n", id =>
saroyanm 2018/03/20 20:08:19 What does intent do ? I couldn't find it in the do
a.giammarchi 2018/03/21 07:27:19 In HyperHTMLElement, being `define(...)` the metho
saroyanm 2018/03/21 11:22:21 Suggestion: Maybe we can document that somewhere,
a.giammarchi 2018/03/21 14:21:32 Done.
+{
+ const fragment = document.createDocumentFragment();
+ setElementText(fragment, id);
+ return fragment;
+});
+
+module.exports = IOElement;
« no previous file with comments | « .gitignore ('k') | package.json » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld