const template = document.createElement("template");
template.innerHTML = `
`;
class PatekLogo extends HTMLElement {
calculateCircles() {
const inputValue = typeof this.attributes.title !== "undefined" && this.attributes.title.value !== "" ? this.attributes.title.value : "Pátek";
const opacities = PatekLogo.calculateBinary(inputValue);
for (let i = 0; i < 7; i++) {
this.shadow.getElementById("circle" + i.toString()).style.fillOpacity = opacities[i];
}
}
static calculateBinary(inputValue) {
/* 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 outputString = outputChar.toString(2);
return "0".repeat(7 - outputString.length) + outputString;
}
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);