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 ^= 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 = `
`;
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);