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, 100 insertions, 0 deletions

diff --git a/static/components/popup-element.ts b/static/components/popup-element.ts
new file mode 100644
index 00000000..3225fa52
--- /dev/null
+++ b/static/components/popup-element.ts
@@ -0,0 +1,100 @@
+export { PopupElement }
+
+import { gensym } from '../lib'
+import { VEvent } from '../vevent'
+import { bind_popup_control } from '../dragable'
+import { close_popup } from '../popup'
+
+import { ComponentVEvent } from './vevent'
+import { TabElement } from './tab-element'
+
+/* <popup-element /> */
+class PopupElement extends ComponentVEvent {
+
+    tabgroup_id: string
+    tabcount: number
+
+    constructor(uid?: string) {
+        super(uid);
+
+        /* TODO populate remaining */
+        // this.id = 'popup' + this.dataset.uid
+        this.tabgroup_id = gensym();
+        this.tabcount = 0
+    }
+
+    redraw(data: VEvent) {
+        // console.warn('IMPLEMENT ME');
+
+        if (data._calendar) {
+            this.dataset.calendar = data._calendar;
+        }
+
+        /* TODO is there any case where we want to propagate the draw to any of
+           our tabs? or are all our tabs independent? */
+    }
+
+    connectedCallback() {
+        let template: HTMLTemplateElement = document.getElementById('popup-template') as HTMLTemplateElement
+        let body = (template.content.cloneNode(true) as DocumentFragment).firstElementChild!;
+
+        let uid = this.uid;
+        // console.log(uid);
+
+        body.getElementsByClassName('populate-with-uid')
+            .forEach((e) => e.setAttribute('data-uid', uid));
+
+        /* tabs */
+        // for (let tab of body.querySelectorAll(".tabgroup .tab")) {
+        // }
+        window.setTimeout(() => {
+            // let tabs = this.querySelector('tab-element')!
+            //     .shadowRoot!
+            //     .querySelectorAll('label')
+            // console.log(tabs);
+            // console.log(this.getElementsByTagName('tab-element'))
+            for (let tab of this.getElementsByTagName('tab-element')) {
+                // console.log(tab_container);
+                // let tab = tab_container.shadowRoot!;
+                // tab.documentElement.style.setProperty('--i', i);
+                popuplateTab(tab as TabElement, this.tabgroup_id, this.tabcount)
+                this.tabcount += 1
+            }
+            (this.querySelector('tab-element label') as HTMLInputElement).click()
+        });
+        /* end tabs */
+
+        /* nav bar */
+        let nav = body.getElementsByClassName("popup-control")[0] as HTMLElement;
+        bind_popup_control(nav);
+
+        let btn = body.querySelector('.popup-control .close-tooltip') as HTMLButtonElement
+        btn.addEventListener('click', () => close_popup(this));
+        /* end nav bar */
+
+        this.replaceChildren(body);
+    }
+
+    addTab(tab: TabElement) {
+        let tabgroup = this.getElementsByClassName('tabgroup')![0]!
+        tabgroup.append(tab);
+        popuplateTab(tab, this.tabgroup_id, this.tabcount)
+        this.tabcount += 1
+    }
+}
+
+function popuplateTab(tab: HTMLElement, tabgroup: string, index: number) {
+    // console.log(tab);
+    let new_id = gensym();
+    let input = tab.querySelector('input[type="radio"]') as HTMLInputElement;
+    let label = tab.querySelector("label")!
+    tab.style.setProperty('--tab-index', '' + index);
+    /* TODO this throws a number of errors, but somehow still works...? */
+    if (input !== null) {
+        input.name = tabgroup
+        input.id = new_id;
+    }
+    if (label !== null) {
+        label.setAttribute('for', new_id);
+    }
+}