From 7b604002e5dd73f933ef89b37e60ab07d347c44d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= <hugo@lysator.liu.se>
Date: Mon, 15 Nov 2021 00:43:49 +0100
Subject: 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.
---
 static/components/popup-element.ts | 54 ++++++++++++++++++++++++++++++++++----
 1 file changed, 49 insertions(+), 5 deletions(-)

(limited to 'static/components/popup-element.ts')

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);
-- 
cgit v1.2.3