Add popup close button.

3 files changed, 26 insertions, 1 deletions

diff --git a/module/output/html.scm b/module/output/html.scm
index 6bebcf4d..21eba258 100644
--- a/module/output/html.scm
+++ b/module/output/html.scm
@@ -191,7 +191,9 @@
              ;; NOTE These popup's are far from good. Main problem being that
              ;; the often render off-screen for events high up on the screen.
              (div (@ (class "popup"))
-                  ,(event-debug-html ev))
+                  ,(event-debug-html ev)
+                  (button (@ (onclick "close_popup(this)")) "×")
+                  )
              (a (@ (href "#" ,(UID ev))
                    (class "hidelink"))
               (div (@ (class "body"))
diff --git a/static/script.js b/static/script.js
index 494b6266..6bb55c2f 100644
--- a/static/script.js
+++ b/static/script.js
@@ -12,6 +12,16 @@ function time_to_percent (time) {
     return hour_to_part(time.getHours() + (time.getMinutes() / 60)) + "%"
 }
 
+function parents_until (element, obj) {
+    if (element === null) {
+        return null;
+    } else if (element.id == obj.id || element.classList.contains(obj.class)) {
+        return element;
+    } else {
+        return parents_until (element.parentElement, obj);
+    }
+}
+
 let start_time = new Date();
 let end_time = new Date();
 
@@ -125,6 +135,12 @@ function max(a, b) {
     a > b ? a : b;
 }
 
+function close_popup (btn) {
+    o = { class: "popup" }
+    var popup = parents_until (btn, o);
+    popup.classList.toggle("show");
+}
+
 /*
 https://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively
 */
diff --git a/static/style.css b/static/style.css
index 03e60cf3..36040a64 100644
--- a/static/style.css
+++ b/static/style.css
@@ -607,6 +607,13 @@ along with their colors.
     border-left-width: 1em;
 }
 
+.popup button {
+    position: absolute;
+    right: 0;
+    top: 0;
+    background: none;
+}
+
 /* .event-inner .popup td { */
 /*     white-space: pre-line; */
 /* } */