From 3fbfd2b20adb64c200f6fbae948cb46fad287766 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= <hugo@lysator.liu.se>
Date: Sat, 21 Mar 2020 00:34:59 +0100
Subject: Add rudementary popup system.

---
 module/output/html.scm | 26 ++++++++++++++++---
 static/script.js       | 12 +++++++++
 static/style.css       | 70 ++++++++++++++++++++++++++++++++++++++++++++++++--
 3 files changed, 102 insertions(+), 6 deletions(-)

diff --git a/module/output/html.scm b/module/output/html.scm
index 26cf4b86..36424edc 100644
--- a/module/output/html.scm
+++ b/module/output/html.scm
@@ -88,6 +88,18 @@
 
 
 
+(define (event-debug-html event)
+  `(table
+    (tbody
+     ,@(hash-map->list
+        (match-lambda*
+          [(key vline)
+           `(tr (th ,key) (td ,(format #f "~a" (value vline))))]
+          [_ (error "What are you doing‽")])
+        (attributes event)))))
+
+
+
 ;;; Procedures for wide output
 
 
@@ -149,7 +161,11 @@
                 ,(when (date<? date (as-date (attr ev 'DTEND)))
                    " continuing"))
               (style ,style))
-           ,((summary-filter) ev (attr ev 'SUMMARY))))
+           (div (@ (class "event-inner"))
+            (div (@ (class "popup"))
+                 ,(event-debug-html ev))
+            (div (@ (class "body"))
+                 ,((summary-filter) ev (attr ev 'SUMMARY))))))
 
   )
 
@@ -183,9 +199,11 @@
                 ,(when (and (attr ev 'PARTSTAT) (string= "TENTATIVE" (attr ev 'PARTSTAT)))
                    " tentative"))
               (style ,style))
-           ,((summary-filter) ev (attr ev 'SUMMARY))))
-
-  )
+           (div (@ (class "event-inner"))
+                (div (@ (class "popup"))
+                     ,(event-debug-html ev))
+                (div (@ (class "body"))
+                     ,((summary-filter) ev (attr ev 'SUMMARY)))))))
 
 
 ;; Lay out complete day (graphical)
diff --git a/static/script.js b/static/script.js
index bc20cb07..dcc7285f 100644
--- a/static/script.js
+++ b/static/script.js
@@ -95,8 +95,15 @@ function update_current_time_bar () {
     event_area.append(bar_object)
 }
 
+function toggle_event_pupup () {
+    console.log(this);
+    this.getElementsByClassName("popup")[0].classList.toggle("show");
+}
+
 window.onload = function () {
+    console.log("Running");
 
+    /*
     update_current_time_bar()
     // once a minute for now, could probably be slowed to every 10 minutes
     window.setInterval(update_current_time_bar, 1000 * 60)
@@ -106,4 +113,9 @@ window.onload = function () {
         c.onmouseup = onmouseuphandler;
         c.onmousemove = onmousemovehandler;
     }
+    */
+
+    for (let e of document.getElementsByClassName("event-inner")) {
+        e.onclick = toggle_event_pupup;
+    }
 }
diff --git a/static/style.css b/static/style.css
index 2545b9e9..77c9e2f8 100644
--- a/static/style.css
+++ b/static/style.css
@@ -293,9 +293,10 @@ html, body {
 	border: 2px solid black;
 	font-size: 8pt;
 
-	overflow: hidden;
+	/* overflow: hidden; */
 
-	z-index: 0;
+        /* Setting this makes popups render under */
+	/* z-index: 0; */
 }
 
 .root footer {
@@ -392,3 +393,68 @@ html, body {
     border-color: blue;
     left: -1em;
 }
+
+.event-inner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.event-inner .popup {
+    visibility: hidden;
+    position: absolute;
+    left: 10%;
+    bottom: 125%;
+    z-index: 100;
+
+    background-color: #dedede;
+    color: black;
+    border: 2px solid black;
+
+    font-size: 8pt;
+    font-family: monospace;
+
+    white-space: pre;
+    overflow-y: scroll;
+    max-width: 100ch;
+    max-height: 60ch;
+}
+
+.event-inner .popup td {
+    white-space: pre-line;
+}
+
+/* Arrow pointing at origin of popup
+   Currently broken due to an overflow: scroll
+*/
+/* .event-inner .popup:after { */
+
+/*     content: ""; */
+/*     position: absolute; */
+/*     top: 100%; */
+/*     /\* left: 5%; *\/ */
+/*     border-style: solid; */
+/*     border-width: 1.5em; */
+/*     /\* margin-left: -2em; *\/ */
+/*     border-color: transparent; */
+/*     border-top-color: #555; */
+/* } */
+
+.popup th {
+    text-align: right;
+    vertical-align: top;
+}
+
+.popup th::after {
+    content: ": ";
+}
+
+.popup.show {
+    visibility: visible;
+}
+
+.event-inner .body {
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+}
-- 
cgit v1.2.3