Rework tab system.

This sepparates popup-elements from their tabbed contents, allowing
clearer sepparations of concerns, along with easier adding and removing
of tabs to the tabset!

1 files changed, 3 insertions, 61 deletions

diff --git a/static/components/popup-element.ts b/static/components/popup-element.ts
index f4b934d8..1a57032b 100644
--- a/static/components/popup-element.ts
+++ b/static/components/popup-element.ts
@@ -1,6 +1,5 @@
 export { PopupElement }
 
-import { gensym } from '../lib'
 import { VEvent } from '../vevent'
 import { bind_popup_control } from '../dragable'
 import { close_popup, event_from_popup } from '../popup'
@@ -13,9 +12,6 @@ import { remove_event } from '../server_connect'
 /* <popup-element /> */
 class PopupElement extends ComponentVEvent {
 
-    tabgroup_id: string
-    tabcount: number
-
     isVisible: boolean = false;
 
     constructor(uid?: string) {
@@ -23,9 +19,6 @@ class PopupElement extends ComponentVEvent {
 
         /* TODO populate remaining (??) */
 
-        this.tabgroup_id = gensym();
-        this.tabcount = 0
-
         let obj = vcal_objects.get(this.uid);
         if (obj && obj.calendar) {
             this.dataset.calendar = obj.calendar;
@@ -34,70 +27,19 @@ class PopupElement extends ComponentVEvent {
 
     redraw(data: VEvent) {
         if (data.calendar) {
+            /* The CSS has hooks on [data-calendar], meaning that this can
+               (and will) change stuff */
             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 template = document.getElementById('popup-template') as HTMLTemplateElement
         let body = (template.content.cloneNode(true) as DocumentFragment).firstElementChild!;
 
         let uid = this.uid;
 
-        window.setTimeout(() => {
-
-            /* tab change button */
-            let tabs = this.querySelectorAll('[role="tab"]')
-            /* list of all tabs */
-            // let tablist = this.querySelector('[role="tablist"]')!
-
-            tabs.forEach(tab => {
-                tab.addEventListener('click', () => {
-
-                    /* hide all tab panels */
-                    for (let tabcontent of this.querySelectorAll('[role="tabpanel"]')) {
-                        tabcontent.setAttribute('hidden', 'true');
-                    }
-                    /* unselect all (selected) tab handles */
-                    for (let item of this.querySelectorAll('[aria-selected="true"]')) {
-                        item.setAttribute('aria-selected', 'false');
-                    }
-                    /* re-select ourselves */
-                    tab.setAttribute('aria-selected', 'true');
-
-                    /* unhide our target tab */
-                    this.querySelector('#' + tab.getAttribute('aria-controls'))!
-                        .removeAttribute('hidden')
-                });
-            });
-
-            /* tab contents */
-            let tabcontents = this.querySelectorAll('[role="tabpanel"]')
-
-            for (let i = 0; i < tabs.length; i++) {
-                let n = i + this.tabcount;
-                this.tabgroup_id
-                let tab = tabs[n];
-                let con = tabcontents[n];
-
-                let a = `${this.tabgroup_id}-tab-${n}`
-                let b = `${this.tabgroup_id}-con-${n}`
-
-                tab.id = a;
-                con.setAttribute('aria-labeledby', a);
-
-                con.id = b;
-                tab.setAttribute('aria-controls', b);
-
-            }
-            this.tabcount += tabs.length
-
-        });
-        /* end tabs */
-
         /* nav bar */
         let nav = body.getElementsByClassName("popup-control")[0] as HTMLElement;
         bind_popup_control(nav);