From f1ccebbdfa46b516af839578f839aa5ceb5e5758 Mon Sep 17 00:00:00 2001 From: Carmine De Rosa Date: Tue, 3 Mar 2020 18:21:16 +0100 Subject: [PATCH] add HTML --- .gitignore | 5 +++ html/TODO | 1 + html/index.html | 15 ++++++++ html/ratings.js | 96 +++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 117 insertions(+) create mode 100644 .gitignore create mode 100644 html/TODO create mode 100644 html/index.html create mode 100644 html/ratings.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b70b0b7 --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ + +react/node_modules/ +react/package-lock\.json +storybook/node_modules/ +storybook/package-lock\.json diff --git a/html/TODO b/html/TODO new file mode 100644 index 0000000..f239839 --- /dev/null +++ b/html/TODO @@ -0,0 +1 @@ +Open in browser... diff --git a/html/index.html b/html/index.html new file mode 100644 index 0000000..6da3170 --- /dev/null +++ b/html/index.html @@ -0,0 +1,15 @@ + + + + + Test my-rating WebComponent + + + + + + + + + + diff --git a/html/ratings.js b/html/ratings.js new file mode 100644 index 0000000..624685e --- /dev/null +++ b/html/ratings.js @@ -0,0 +1,96 @@ + +const styleRules = ` .rating {font-size: 50px; color: orange; cursor: pointer }` + +class MyRating extends HTMLElement { + + constructor() { + super() + this._maxValue = 5 + this._value = 4 + this.attachShadow({mode: "open"}) + } + + connectedCallback() { + this.createComponent() + } + + get maxValue() { + return this._maxValue + } + + set maxValue(val) { + this._maxValue = val + this.setAttribute("max-value", val) + } + + get value() { + return this._value + } + + set value(val) { + this._value = val + this.setAttribute("value", val) + } + + static get observedAttributes() { + return ["max-value", "value"] + } + + attributeChangedCallback(name, oldValue, newValue) { + if (oldValue !== newValue) { + switch (name) { + case "max-value": + this._maxValue = newValue + break + case "value": + this._value = newValue + break + default: + } + this.replaceStarList() + } + } + + replaceStarList() { + let starNode = this.shadowRoot.children[1]; + if (starNode) { + let starList = this.createStarList(); + starNode.remove(); + this.shadowRoot.appendChild(starList); + } + } + + createComponent() { + this.createStyle() + let starList = this.createStarList() + this.shadowRoot.appendChild(starList) + } + + createStyle() { + let style = document.createElement("style") + style.appendChild(document.createTextNode(styleRules)) + this.shadowRoot.appendChild(style) + } + + createStarList() { + let div = document.createElement("div") + for (let i = 1; i <= this.maxValue; i++) { + let star = i <= this.value ? this.createStar("★", i) : this.createStar("☆", i) + div.appendChild(star) + } + return div + } + + createStar(starCode, i) { + let span = document.createElement("span") + span.setAttribute("class", "rating") + span.innerHTML = starCode + span.addEventListener("click", () => { + this.value = i + }, false) + return span + } +} + +customElements.define("my-rating", MyRating) +