diff --git a/patekLogo.js b/patekLogo.js
index 48a19dc..b588070 100644
--- a/patekLogo.js
+++ b/patekLogo.js
@@ -1,12 +1,68 @@
-const sourceSvg = `
+const template = document.createElement("template");
+template.innerHTML = `
+
+
+
+
+
+
+
`;
class PatekLogo extends HTMLElement {
@@ -33,69 +89,11 @@ class PatekLogo extends HTMLElement {
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);
+ 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']; }