Remove popup.ts, migrating all functionality elsewhere.

The simple procedures
- close_popup
- open_popup
- toggle_popup
- find_popup
Were mostly here for legacy.

The procedures
- popup_from_event
- event_from_popup
where holdovers from the old way of finding popups, and should be done
through the VEvent objects now.

close_all_popups was used only once, so the code was moved inline.

Finally, moving the last hovered over popup to the top, along with tab
switch keybings were restored, and moved to propper places.

2 files changed, 21 insertions, 7 deletions

diff --git a/static/components/popup-element.ts b/static/components/popup-element.ts
index 42e8ee7f..a9ada71c 100644
--- a/static/components/popup-element.ts
+++ b/static/components/popup-element.ts
@@ -2,8 +2,7 @@ export { PopupElement }
 
 import { VEvent } from '../vevent'
 import { bind_popup_control } from '../dragable'
-import { close_popup, event_from_popup } from '../popup'
-import { vcal_objects } from '../globals'
+import { find_block, vcal_objects } from '../globals'
 
 import { ComponentVEvent } from './vevent'
 
@@ -12,6 +11,11 @@ import { remove_event } from '../server_connect'
 /* <popup-element /> */
 class PopupElement extends ComponentVEvent {
 
+    /* The popup which is the "selected" popup.
+    /* Makes the popup last hovered over the selected popup, moving it to
+     * the top, and allowing global keyboard bindings to affect it. */
+    static activePopup: PopupElement | null = null;
+
     constructor(uid?: string) {
         super(uid);
 
@@ -21,6 +25,15 @@ class PopupElement extends ComponentVEvent {
         if (obj && obj.calendar) {
             this.dataset.calendar = obj.calendar;
         }
+
+        /* Makes us the active popup */
+        this.addEventListener('mouseover', () => {
+            if (PopupElement.activePopup) {
+                PopupElement.activePopup.removeAttribute('active');
+            }
+            PopupElement.activePopup = this;
+            this.setAttribute('active', 'active');
+        })
     }
 
     redraw(data: VEvent) {
@@ -43,7 +56,7 @@ class PopupElement extends ComponentVEvent {
         bind_popup_control(nav);
 
         let close_btn = body.querySelector('.popup-control .close-button') as HTMLButtonElement
-        close_btn.addEventListener('click', () => close_popup(this));
+        close_btn.addEventListener('click', () => this.visible = false);
 
         let maximize_btn = body.querySelector('.popup-control .maximize-button') as HTMLButtonElement
         maximize_btn.addEventListener('click', () => {
@@ -106,7 +119,7 @@ class PopupElement extends ComponentVEvent {
                 break;
         }
 
-        let element = event_from_popup(this) as HTMLElement;
+        let element = find_block(this.uid) as HTMLElement | null
         /* start <X, Y> sets offset between top left corner
            of event in calendar and popup. 10, 10 soo old
            event is still visible */
diff --git a/static/components/vevent-block.ts b/static/components/vevent-block.ts
index 0aad19b2..6b3e7dec 100644
--- a/static/components/vevent-block.ts
+++ b/static/components/vevent-block.ts
@@ -2,7 +2,6 @@ export { ComponentBlock }
 
 import { ComponentVEvent } from './vevent'
 import { VEvent } from '../vevent'
-import { toggle_popup, find_popup } from '../popup'
 import { parseDate, to_local } from '../lib'
 
 
@@ -16,9 +15,11 @@ class ComponentBlock extends ComponentVEvent {
 
         this.addEventListener('click', () => {
             let uid = this.uid
-            let popup = find_popup(uid);
+            /* TODO is it better to find the popup through a query selector, or
+               by looking through all registered components of a VEvent? */
+            let popup = document.querySelector(`popup-element[data-uid="${uid}"]`)
             if (popup === null) throw new Error('no popup for uid ' + uid);
-            toggle_popup(popup);
+            popup.toggleAttribute('visible');
         });
     }