Re-modularize javascript.

This moves almost everything out of globals.ts, into sepparate files.
Things are still slightly to tightly coupled. But that is worked on.

1 files changed, 40 insertions, 0 deletions

diff --git a/static/components/tab-element.ts b/static/components/tab-element.ts
new file mode 100644
index 00000000..9403a737
--- /dev/null
+++ b/static/components/tab-element.ts
@@ -0,0 +1,40 @@
+export { TabElement }
+
+/* <tab-element /> */
+class TabElement extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        // this.replaceChildren(template.cloneNode(true));
+        let template
+            = (document.getElementById('tab-template') as HTMLTemplateElement)
+                .content
+        // const shadowRoot = this.attachShadow({ mode: 'open' })
+        //     .appendChild(template.cloneNode(true));
+        // console.log(this);
+        let label = this.querySelector('[slot="label"]')
+        let content = this.querySelector('[slot="content"]')
+        if (!verifySlot(label)) throw "Bad label";
+        if (!verifySlot(content)) throw "Bad content";
+
+        /* TODO set label hover title somewhere around here */
+
+        this.replaceChildren(template.cloneNode(true));
+        this.querySelector('slot[name="label"]')!.replaceWith(label);
+        this.querySelector('slot[name="content"]')!.replaceWith(content);
+    }
+}
+
+function verifySlot(el: Node | null): el is HTMLElement {
+    if (el === null) {
+        console.error("Element is null");
+        return false;
+    }
+    if (!(el instanceof HTMLElement)) {
+        console.error("Node is not an HTMLElement", el);
+        return false;
+    }
+    return true
+}