From b2dccc445c57b9541bdc1fb23734c06193d3286f Mon Sep 17 00:00:00 2001
From: Jonas Leder <jonas@jonasled.de>
Date: Fri, 25 Mar 2022 10:43:24 +0100
Subject: [PATCH] remove raw html
---
js/customElements/header.js | 51 ++++++++++++++++++++++++++-----------
1 file changed, 36 insertions(+), 15 deletions(-)
diff --git a/js/customElements/header.js b/js/customElements/header.js
index 3b75a51..ce6300b 100644
--- a/js/customElements/header.js
+++ b/js/customElements/header.js
@@ -2,21 +2,42 @@ class Header extends HTMLElement {
constructor() {
super();
let pageTitle = this.getAttribute("data-title");
- this.innerHTML = `
- <header >
- <div class="header-wrapper" >
- <div class="header-homepage">
- <div class="align-holder" >
- <h1 onclick="document.getElementById('content').scrollIntoView();">${pageTitle}</h1>
- </div >
- </div >
- <div class="header-separator header-separator-bottom " >
- <jl-svg data-name="banner"></jl-svg>
- </div >
- </div >
- <jl-main_menu id = "mainmenu" data-title = "${pageTitle}"></jl-main_menu>
- </header>
- `;
+
+ const header = document.createElement("header");
+ this.appendChild(header);
+
+ const headerWrapper = document.createElement("div");
+ headerWrapper.classList.add("header-wrapper");
+ header.appendChild(headerWrapper);
+
+ const headerHomepage = document.createElement("div");
+ headerHomepage.classList.add("header-homepage");
+ headerWrapper.appendChild(headerHomepage);
+
+ const alignHolder = document.createElement("div");
+ alignHolder.classList.add("align-holder");
+ headerHomepage.appendChild(alignHolder);
+
+ const h1 = document.createElement("h1");
+ h1.innerText = pageTitle;
+ h1.onclick = () => {
+ document.getElementById("content").scrollIntoView();
+ }
+ alignHolder.appendChild(h1);
+
+ const headerSeparator = document.createElement("div");
+ headerSeparator.classList.add("header-separator");
+ headerSeparator.classList.add("header-separator-bottom");
+ headerWrapper.appendChild(headerSeparator);
+
+ const svg = document.createElement("jl-svg");
+ svg.setAttribute("data-name", "banner");
+ headerSeparator.appendChild(svg);
+
+ const mainMenu = document.createElement("jl-main_menu");
+ mainMenu.setAttribute("data-title", pageTitle);
+ mainMenu.id = "mainmenu";
+ header.appendChild(mainMenu);
}
}
--
GitLab