Dynamicaly created popups now work.

2 files changed, 49 insertions, 35 deletions

diff --git a/module/output/html.scm b/module/output/html.scm
index 1bc0d74f..e3668f08 100644
--- a/module/output/html.scm
+++ b/module/output/html.scm
@@ -137,13 +137,11 @@
                                        "unknown"))))
                   ,(btn "×"
                         title: "Stäng"
-                        onclick: (format #f "close_popup(document.getElementById('~a'))"
-                                         id)
+                        onclick: "close_popup(document.getElementById(this.closest('.popup-container').id))"
                         class: '("close-tooltip"))
                   ,(btn "🗑"
                         title: "Ta bort"
-                        onclick: (format #f "remove_event(document.getElementById('~a'))"
-                                         (html-id ev))))
+                        onclick: "remove_event(document.getElementById(this.closest('.popup-container').id.substr(5)))"))
 
              ,(tabset
                (append
@@ -153,11 +151,7 @@
                             (ul (li (a (@ (href "/calendar/" ,(prop ev 'UID) ".ics"))
                                        "som iCal"))
                                 (li (a (@ (href "/calendar/" ,(prop ev 'UID) ".xcs"))
-                                       "som xCal"))))))))
-             (div (@ (style "display:none !important;"))
-                  ,((@ (output xcal) ns-wrap)
-                    ((@ (output xcal) vcomponent->sxcal)
-                     ev))))))
+                                       "som xCal")))))))))))
 
 
 
@@ -201,8 +195,7 @@
                       ,(when (and (prop ev 'PARTSTAT)
                                   (eq? 'TENTATIVE (prop ev 'PARTSTAT)))
                          " tentative"))
-                    (onclick ,(format #f "toggle_popup('~a')"
-                                      (string-append "popup" (html-id ev))))
+                    (onclick "toggle_popup('popup' + this.id)")
                     )))
             ;; Inner div to prevent overflow. Previously "overflow: none"
             ;; was set on the surounding div, but the popup /needs/ to
diff --git a/static/script.js b/static/script.js
index 988ecfb8..32bc3b4b 100644
--- a/static/script.js
+++ b/static/script.js
@@ -89,12 +89,38 @@ function date_to_percent (date) {
 }
 
 /* if only there was such a thing as a let to wrap around my lambda... */
-const gensym = (counter => (prefix="gensym") => prefix + ++counter)(0)
+/* js infix to not collide with stuff generated backend */
+const gensym = (counter => (prefix="gensym") => prefix + "js" + ++counter)(0)
 
 /* start and end time for calendar page */
 let start_time = new Date();
 let end_time = new Date();
 
+function bind_popup_control (nav) {
+    nav.onmousedown = function (e) {
+        /* Ignore mousedown on children */
+        if (e.target != nav) return;
+        nav.style.cursor = "grabbing";
+        nav.dataset.grabbed = "true";
+        nav.dataset.grabPoint = e.clientX + ";" + e.clientY;
+        let popup = nav.closest(".popup-container");
+        nav.dataset.startPoint = popup.offsetLeft + ";" + popup.offsetTop;
+    }
+    window.addEventListener('mousemove', function (e) {
+        if (nav.dataset.grabbed) {
+            let [x, y] = nav.dataset.grabPoint.split(";").map(Number);
+            let [startX, startY] = nav.dataset.startPoint.split(";").map(Number);
+            let popup = nav.closest(".popup-container");
+
+            popup.style.left = startX + (e.clientX - x) + "px";
+            popup.style.top = startY + (e.clientY - y) + "px";
+        }
+    });
+    window.addEventListener('mouseup', function () {
+        nav.dataset.grabbed = "";
+        nav.style.cursor = "";
+    });
+}
 
 class EventCreator {
 
@@ -112,6 +138,23 @@ class EventCreator {
 
         let id = gensym ("__js_event");
 
+        // TODO remove button?
+        // $("button 2??").onclick = `remove_event(document.getElementById('${id}'))`
+
+        let tabgroup_id = gensym();
+        for (let tab of popup.querySelectorAll(".tabgroup .tab")) {
+            let new_id = gensym();
+            let input = tab.querySelector("input");
+            input.id = new_id;
+            input.name = tabgroup_id;
+            tab.querySelector("label").setAttribute('for', new_id);
+        }
+
+        let nav = popup.getElementsByClassName("popup-control")[0];
+        bind_popup_control(nav);
+
+        // TODO download links
+
         event.id = id;
         popup.id = "popup" + id;
 
@@ -497,29 +540,7 @@ window.onload = function () {
     }
 
     for (let nav of document.getElementsByClassName("popup-control")) {
-        nav.onmousedown = function (e) {
-            /* Ignore mousedown on children */
-            if (e.target != nav) return;
-            nav.style.cursor = "grabbing";
-            nav.dataset.grabbed = "true";
-            nav.dataset.grabPoint = e.clientX + ";" + e.clientY;
-            let popup = nav.closest(".popup-container");
-            nav.dataset.startPoint = popup.offsetLeft + ";" + popup.offsetTop;
-        }
-        window.addEventListener('mousemove', function (e) {
-            if (nav.dataset.grabbed) {
-                let [x, y] = nav.dataset.grabPoint.split(";").map(Number);
-                let [startX, startY] = nav.dataset.startPoint.split(";").map(Number);
-                let popup = nav.closest(".popup-container");
-
-                popup.style.left = startX + (e.clientX - x) + "px";
-                popup.style.top = startY + (e.clientY - y) + "px";
-            }
-        });
-        window.addEventListener('mouseup', function () {
-            nav.dataset.grabbed = "";
-            nav.style.cursor = "";
-        });
+        bind_popup_control(nav);
     }
 
     for (let el of document.getElementsByClassName("event")) {