From 0a5cf1419b3555f16a069eaa562ebb122b2f6f5d Mon Sep 17 00:00:00 2001 From: Greenscreener Date: Wed, 17 Jul 2019 22:47:35 +0200 Subject: [PATCH] Code style update. --- README.md | 4 +- examples.html | 2 +- patekLogo.js => patek-logo.js | 78 +++++++++++++++++++---------------- 3 files changed, 45 insertions(+), 39 deletions(-) rename patekLogo.js => patek-logo.js (77%) diff --git a/README.md b/README.md index 22e515c..0126a9f 100644 --- a/README.md +++ b/README.md @@ -3,9 +3,9 @@ Reusable custom element for the Pátek logo. ## Installation -Include the patekLogo.js file into your HTML file. +Include the patek-logo.js file into your HTML file. ```html - + ``` ## Usage diff --git a/examples.html b/examples.html index 861402e..da57668 100644 --- a/examples.html +++ b/examples.html @@ -35,6 +35,6 @@


Vae, germanus ausus! Fermiums observare, tanquam domesticus luna. Heu. Animalis regius advena est. Pol, a bene axona. Pes, itineris tramitem, et lixa. Hydras sunt orexiss de flavum demolitione. Cur homo Absolutios mori, tanquam regius gallus. Zirbus, imber, et orexis. Ventuss sunt apolloniatess de emeritis lapsus. Apolloniates neuter onus est. Aususs tolerare! Cur visus trabem? Vae. Exemplar, cacula, et scutum. Byssus trabems, tanquam velox danista. Calceuss assimilant!
- + diff --git a/patekLogo.js b/patek-logo.js similarity index 77% rename from patekLogo.js rename to patek-logo.js index c219c9a..6ff5527 100644 --- a/patekLogo.js +++ b/patek-logo.js @@ -68,45 +68,51 @@ template.innerHTML = ` `; class PatekLogo extends HTMLElement { - calculateCircles() { - const inputValue = typeof this.attributes.title !== "undefined" ? this.attributes.title.value : "Pátek"; + calculateCircles() { + const inputValue = typeof this.attributes.title !== "undefined" ? this.attributes.title.value : "Pátek"; - const normalizedInputValue = inputValue.normalize("NFD").replace(/[^\x00-\x7F]/g, ""); + /* eslint no-control-regex: "off", "unicorn/no-hex-escape": off */ + const normalizedInputValue = inputValue.normalize("NFD").replace(/[^\x00-\x7F]/g, ""); - let outputChar = String.fromCharCode(0); - for (let i = 0; i < normalizedInputValue.length; i++) { - outputChar ^= normalizedInputValue[i].charCodeAt(0); - } - const opacities = outputChar.toString(2); + let outputChar = String.fromCharCode(0); + for (let i = 0; i < normalizedInputValue.length; i++) { + outputChar ^= normalizedInputValue[i].charCodeAt(0); + } - this.shadow.getElementById("circle0").style.fillOpacity = opacities[0]; - this.shadow.getElementById("circle1").style.fillOpacity = opacities[1]; - this.shadow.getElementById("circle2").style.fillOpacity = opacities[2]; - this.shadow.getElementById("circle3").style.fillOpacity = opacities[3]; - this.shadow.getElementById("circle4").style.fillOpacity = opacities[4]; - this.shadow.getElementById("circle5").style.fillOpacity = opacities[5]; - this.shadow.getElementById("circle6").style.fillOpacity = opacities[6]; + const opacities = outputChar.toString(2); - } - constructor() { - super(); - this.shadow = this.attachShadow({mode: "open"}); - const clone = template.content.cloneNode(true); - clone.getElementById("titlePlaceholder").innerText = typeof this.attributes.title !== "undefined" ? this.attributes.title.value : "Pátek"; - clone.getElementById("titleText").innerText = typeof this.attributes.title !== "undefined" ? this.attributes.title.value : "Pátek"; - clone.getElementById("subtitleText").innerText = typeof this.attributes.subtitle !== "undefined" ? this.attributes.subtitle.value : ""; - this.shadow.appendChild(clone); - this.calculateCircles(); - } - static get observedAttributes() { return ['title', 'subtitle']; } - attributeChangedCallback(name, oldValue, newValue) { - if (name === 'title') { - this.calculateCircles(); - this.shadow.getElementById("titleText").innerText = newValue || "Pátek"; - this.shadow.getElementById("titlePlaceholder").innerText = newValue || "Pátek"; - } else if (name === 'subtitle') { - this.shadow.getElementById("subtitleText").innerText = newValue; - } - } + this.shadow.getElementById("circle0").style.fillOpacity = opacities[0]; + this.shadow.getElementById("circle1").style.fillOpacity = opacities[1]; + this.shadow.getElementById("circle2").style.fillOpacity = opacities[2]; + this.shadow.getElementById("circle3").style.fillOpacity = opacities[3]; + this.shadow.getElementById("circle4").style.fillOpacity = opacities[4]; + this.shadow.getElementById("circle5").style.fillOpacity = opacities[5]; + this.shadow.getElementById("circle6").style.fillOpacity = opacities[6]; + } + + constructor() { + super(); + this.shadow = this.attachShadow({mode: "open"}); + const clone = template.content.cloneNode(true); + clone.getElementById("titlePlaceholder").innerText = typeof this.attributes.title !== "undefined" ? this.attributes.title.value : "Pátek"; + clone.getElementById("titleText").innerText = typeof this.attributes.title !== "undefined" ? this.attributes.title.value : "Pátek"; + clone.getElementById("subtitleText").innerText = typeof this.attributes.subtitle !== "undefined" ? this.attributes.subtitle.value : ""; + this.shadow.append(clone); + this.calculateCircles(); + } + + static get observedAttributes() { + return ["title", "subtitle"]; + } + + attributeChangedCallback(name, oldValue, newValue) { + if (name === "title") { + this.calculateCircles(); + this.shadow.getElementById("titleText").innerText = newValue || "Pátek"; + this.shadow.getElementById("titlePlaceholder").innerText = newValue || "Pátek"; + } else if (name === "subtitle") { + this.shadow.getElementById("subtitleText").innerText = newValue; + } + } } customElements.define("patek-logo", PatekLogo);