From ebd34d56ae393c9683554d79f9b654025240509e Mon Sep 17 00:00:00 2001 From: Greenscreener Date: Mon, 8 Jul 2019 15:32:11 +0200 Subject: [PATCH] Inital commit. The next commit will remove the useless calc()s, I just wanted to keep them for future reference. --- README.md | 17 +++++++- examples.html | 35 ++++++++++++++++ patekLogo.js | 114 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 165 insertions(+), 1 deletion(-) create mode 100644 examples.html create mode 100644 patekLogo.js diff --git a/README.md b/README.md index 74306f6..6f4db0f 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,18 @@ # Pátek Logo Custom Element -This is a small piece of code for a reusable custom element for our logo. \ No newline at end of file +Reusable custom element for the Pátek logo. + +## Installation +Include the patekLogo.js file into your HTML file. +```html + +``` + +## Usage +```html + +``` +If no `title` or `subtitle` attribute is set, it defaults to `"Pátek"` and `""` respectively. + +The logo **will** obey all CSS rules. +## Examples diff --git a/examples.html b/examples.html new file mode 100644 index 0000000..460d94f --- /dev/null +++ b/examples.html @@ -0,0 +1,35 @@ + + + + + PátekLogo Examples + + +

+

+

+

+

+

+

+

+

+

+

+

+

+
+

+

+

+

+

+

+

+

+

+
+
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!
+ + + \ No newline at end of file diff --git a/patekLogo.js b/patekLogo.js new file mode 100644 index 0000000..3d95b70 --- /dev/null +++ b/patekLogo.js @@ -0,0 +1,114 @@ +const sourceSvg = ` + + + + + + + + +`; + +class PatekLogo extends HTMLElement { + calculateCircles() { + const inputValue = typeof this.attributes.title !== "undefined" ? this.attributes.title.value : "Pátek"; + + const normalizedInputValue = inputValue.normalize("NFD").replace(/[^\x00-\x7F]/g, ""); + + let outputChar = String.fromCharCode(0); + for (let i = 0; i < normalizedInputValue.length; i++) { + outputChar = outputChar ^ normalizedInputValue[i].charCodeAt(0); + } + const opacities = outputChar.toString(2); + + 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"}); + // language=HTML + this.shadow.innerHTML = ` + + `; + // The magic with the --scale variable doesn't work, but I left it in there just in case we would want to somehow use it later. + const wrapper = document.createElement("span"); + wrapper.setAttribute('id','wrapper'); + wrapper.innerHTML += `${typeof this.attributes.title !== "undefined" ? this.attributes.title.value : "Pátek"}`; + wrapper.innerHTML += sourceSvg; + wrapper.innerHTML += ` + ${typeof this.attributes.title !== "undefined" ? this.attributes.title.value : "Pátek"} + ${typeof this.attributes.subtitle !== "undefined" ? this.attributes.subtitle.value : ""} + `; + this.shadow.appendChild(wrapper); + 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); \ No newline at end of file