1 files changed, 146 insertions, 0 deletions

diff --git a/Blog/wwwroot/common.module.js b/Blog/wwwroot/common.module.js
new file mode 100644
index 0000000..6007790
--- /dev/null
+++ b/Blog/wwwroot/common.module.js
@@ -0,0 +1,146 @@
+function getById(id) {
+    let element = document.getElementById(id);
+    if (element) {
+        return element;
+    } else {
+        throw `Element with id '${id}' not found.`;
+    }
+}
+
+/**
+ * @param {string} href
+ * @returns {HTMLAnchorElement}
+ */
+function a(href, pageName) {
+    const aElem = document.createElement("a");
+    aElem.href = href;
+    aElem.text = pageName;
+    return aElem;
+}
+
+function div(...children) {
+    const divElem = document.createElement("div");
+    divElem.replaceChildren(...children);
+    return divElem;
+}
+
+function span(text) {
+    const spanElem = document.createElement("span");
+    spanElem.textContent = text;
+    return spanElem;
+}
+
+function h(elementTag, ...children) {
+    const elem = document.createElement(elementTag);
+    elem.replaceChildren(...children);
+    return elem;
+}
+
+/** @param {HTMLElement} element  */
+function addClass(element, newClass) {
+    element.classList.add(newClass);
+    return element;
+}
+
+function writeError(error) {
+    writeLog(error, "error");
+}
+
+function writeInfo(msg) {
+    writeLog(msg, "info");
+}
+
+function writeDebug(msg) {
+    writeLog(msg, "debug");
+}
+
+function writeLog(msg, className) {
+    if (typeof msg === "string" || msg instanceof String) {
+        log.appendChild(div(addClass(span(msg), className)));
+    } else {
+        log.appendChild(div(addClass(msg, className)));
+    }
+}
+
+function resetLog() {
+    log.replaceChildren();
+}
+
+const log = getById("log");
+
+// https://stackoverflow.com/questions/75988682/debounce-in-javascript
+// https://www.joshwcomeau.com/snippets/javascript/debounce/
+function debounce(callback, wait) {
+    let timeoutId = null;
+    return (...args) => {
+        window.clearTimeout(timeoutId);
+        timeoutId = window.setTimeout(() => {
+            callback(...args);
+        }, wait);
+    };
+}
+
+const stylesheet = new CSSStyleSheet();
+stylesheet.replaceSync(`
+    a {
+        color: var(--color);
+    }   
+    nav > ul {
+        list-style-type: none;
+        padding-inline-start: 0;
+    }
+
+    nav > ul > li {
+        display: inline-block;
+    }
+
+    nav > ul > li > a::after {
+        display: inline-block;
+        color: var(--color);
+        content: ">";
+        padding: 0 1em;
+    }
+`);
+
+customElements.define("mb-nav",
+    class MBNav extends HTMLElement {
+        constructor() {
+            super();
+        }
+
+        get pagename() {
+            return this.getAttribute("pagename");
+        }
+
+        set pagename(value) {
+            this.setAttribute("pagename", value);
+        }
+
+        connectedCallback() {
+            const shadow = this.attachShadow({ mode: "open" });
+            shadow.adoptedStyleSheets = [stylesheet];
+
+            shadow.appendChild(
+                h("nav",
+                    h("ul",
+                        h("li", a("/", "MB.bes.is")),
+                        h("li", span(this.pagename)),
+                    )
+                )
+            )
+        }
+    });
+
+export {
+    getById,
+    a,
+    div,
+    span,
+    h,
+    addClass,
+    writeError,
+    writeInfo,
+    writeDebug,
+    resetLog,
+    debounce,
+};