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