Reword popup visible attribute.

Now all logic for handling hiding and showing popups are inside the
PopupElement class, making it much harder to do stuff incorrectly. It
also slowly releases the knot around popup.ts.

4 files changed, 65 insertions, 47 deletions

diff --git a/static/components/popup-element.ts b/static/components/popup-element.ts
index 3225fa52..bad7476a 100644
--- a/static/components/popup-element.ts
+++ b/static/components/popup-element.ts
@@ -3,7 +3,7 @@ export { PopupElement }
 import { gensym } from '../lib'
 import { VEvent } from '../vevent'
 import { bind_popup_control } from '../dragable'
-import { close_popup } from '../popup'
+import { close_popup, event_from_popup } from '../popup'
 
 import { ComponentVEvent } from './vevent'
 import { TabElement } from './tab-element'
@@ -14,11 +14,13 @@ class PopupElement extends ComponentVEvent {
     tabgroup_id: string
     tabcount: number
 
+    isVisible: boolean = false;
+
     constructor(uid?: string) {
         super(uid);
 
-        /* TODO populate remaining */
-        // this.id = 'popup' + this.dataset.uid
+        /* TODO populate remaining (??) */
+
         this.tabgroup_id = gensym();
         this.tabcount = 0
     }
@@ -26,8 +28,9 @@ class PopupElement extends ComponentVEvent {
     redraw(data: VEvent) {
         // console.warn('IMPLEMENT ME');
 
-        if (data._calendar) {
-            this.dataset.calendar = data._calendar;
+        console.log('popup', data.calendar);
+        if (data.calendar) {
+            this.dataset.calendar = data.calendar;
         }
 
         /* TODO is there any case where we want to propagate the draw to any of
@@ -75,6 +78,47 @@ class PopupElement extends ComponentVEvent {
         this.replaceChildren(body);
     }
 
+    static get observedAttributes() {
+        return ['visible'];
+    }
+
+    get visible(): boolean {
+        return this.isVisible;
+    }
+
+    set visible(isVisible: boolean) {
+        this.isVisible = isVisible;
+        if (this.isVisible) {
+            this.classList.add('visible');
+        } else {
+            this.classList.remove('visible');
+        }
+
+        let root;
+        switch (window.VIEW) {
+            case 'week':
+                root = document.getElementsByClassName("days")[0];
+                break;
+            case 'month':
+            default:
+                root = document.body;
+                break;
+        }
+
+        let element = event_from_popup(this) as HTMLElement;
+        /* start <X, Y> sets offset between top left corner
+           of event in calendar and popup. 10, 10 soo old
+           event is still visible */
+        let offsetX = 10, offsetY = 10;
+        while (element !== root && element !== null) {
+            offsetX += element.offsetLeft;
+            offsetY += element.offsetTop;
+            element = element.offsetParent as HTMLElement;
+        }
+        this.style.left = offsetX + "px";
+        this.style.top = offsetY + "px";
+    }
+
     addTab(tab: TabElement) {
         let tabgroup = this.getElementsByClassName('tabgroup')![0]!
         tabgroup.append(tab);
diff --git a/static/components/vevent-block.ts b/static/components/vevent-block.ts
index 439ba20e..8c6d11cf 100644
--- a/static/components/vevent-block.ts
+++ b/static/components/vevent-block.ts
@@ -56,8 +56,8 @@ class ComponentBlock extends ComponentVEvent {
             }
         }
 
-        if (data._calendar) {
-            this.dataset.calendar = data._calendar;
+        if (data.calendar) {
+            this.dataset.calendar = data.calendar;
         }
     }
 }
diff --git a/static/globals.ts b/static/globals.ts
index b0871aa2..7ccfb3d2 100644
--- a/static/globals.ts
+++ b/static/globals.ts
@@ -5,6 +5,7 @@ export {
 
 import { VEvent } from './vevent'
 import { uid } from './types'
+import { ComponentBlock } from './components/vevent-block'
 
 const vcal_objects: Map<uid, VEvent> = new Map;
 const event_calendar_mapping: Map<uid, string> = new Map;
@@ -18,14 +19,14 @@ declare global {
 }
 window.vcal_objects = vcal_objects;
 
-function find_block(uid: uid): HTMLElement | null {
+function find_block(uid: uid): ComponentBlock | null {
     let obj = vcal_objects.get(uid)
     if (obj === undefined) {
         return null;
     }
     for (let el of obj.registered) {
         if (el.tagName === 'vevent-block') {
-            return el;
+            return el as ComponentBlock;
         }
     }
     // throw 'Popup not fonud';
diff --git a/static/popup.ts b/static/popup.ts
index 908787ae..1635fab2 100644
--- a/static/popup.ts
+++ b/static/popup.ts
@@ -1,5 +1,6 @@
 import { find_block } from './globals'
 import { PopupElement } from './components/popup-element'
+import { ComponentBlock } from './components/vevent-block'
 import { uid } from './types'
 
 export {
@@ -11,7 +12,7 @@ export {
 /* TODO rewrite most of this */
 
 /* event component => coresponding popup component */
-function event_from_popup(popup: Element): HTMLElement | null {
+function event_from_popup(popup: PopupElement): ComponentBlock | null {
     // return document.getElementById(popup.id.substr(5))
     let el = popup.closest('[data-uid]')
     if (!el) return null;
@@ -21,7 +22,7 @@ function event_from_popup(popup: Element): HTMLElement | null {
 }
 
 /* popup component => coresponding event component */
-function popup_from_event(event: Element): HTMLElement | null {
+function popup_from_event(event: ComponentBlock): PopupElement | null {
     // return document.getElementById("popup" + event.id);
     // return find_popup(event.closest('[data-uid]').dataset.uid)
     let el = event.closest('[data-uid]')
@@ -32,19 +33,19 @@ function popup_from_event(event: Element): HTMLElement | null {
 }
 
 /* hides given popup */
-function close_popup(popup: Element): void {
-    popup.classList.remove("visible");
+function close_popup(popup: PopupElement): void {
+    popup.visible = false;
 }
 
 /* hides all popups */
 function close_all_popups() {
     for (let popup of document.querySelectorAll("popup-element.visible")) {
-        close_popup(popup);
+        close_popup(popup as PopupElement)
     }
 }
 
 
-function find_popup(uid: uid): HTMLElement | null {
+function find_popup(uid: uid): PopupElement | null {
     // for (let el of vcal_objects[uid].registered) {
     //     if (el.tagName === 'popup-element') {
     //         return el;
@@ -55,41 +56,13 @@ function find_popup(uid: uid): HTMLElement | null {
 }
 
 /* open given popup */
-function open_popup(popup: HTMLElement) {
-    popup.classList.add("visible");
-    let element = event_from_popup(popup);
-    // let root = document.body;
-    let root;
-    switch (window.VIEW) {
-        case 'week':
-            root = document.getElementsByClassName("days")[0];
-            break;
-        case 'month':
-        default:
-            root = document.body;
-            break;
-    }
-    /* start <X, Y> sets offset between top left corner
-       of event in calendar and popup. 10, 10 soo old
-       event is still visible */
-    let offsetX = 10, offsetY = 10;
-    while (element !== root && element !== null) {
-        offsetX += element.offsetLeft;
-        offsetY += element.offsetTop;
-        element = element.offsetParent as HTMLElement;
-    }
-    popup.style.left = offsetX + "px";
-    popup.style.top = offsetY + "px";
+function open_popup(popup: PopupElement) {
+    popup.visible = true;
 }
 
 /* toggles open/closed status of popup given by id */
-function toggle_popup(popup: HTMLElement) {
-    // let popup = document.getElementById(popup_id);
-    if (popup.classList.contains("visible")) {
-        close_popup(popup);
-    } else {
-        open_popup(popup);
-    }
+function toggle_popup(popup: PopupElement) {
+    popup.visible = !popup.visible;
 }
 
 /* Code for managing "selected" popup */