From c503c62fc7c82e3165088b31ccb4f6ad987da439 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vojt=C4=9Bch=20K=C3=A1n=C4=9B?= Date: Sun, 14 Jul 2019 16:35:59 +0200 Subject: [PATCH] Use shared template to improve readability and possibly performance. --- patekLogo.js | 142 +++++++++++++++++++++++++-------------------------- 1 file changed, 70 insertions(+), 72 deletions(-) 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']; }