Draft of multiple tabs for HTML popups.

Adds a tab system inside each popup. Vivaldi's lighthouse says it works
fine, but firefox takes way longer to load the page, and uses 100% CPU
for a while. Not sure why. Possible solution would be client side
rendering for the events (since they only need to be shown one clicked).

It's worth taking another look at this once the popup system has been
replaced.

2 files changed, 82 insertions, 5 deletions

diff --git a/module/output/html.scm b/module/output/html.scm
index 4947594a..a17a19fd 100644
--- a/module/output/html.scm
+++ b/module/output/html.scm
@@ -142,6 +142,18 @@
       (div ,body))))
 
 
+(define (tabset elements)
+  (define tabgroup (symbol->string (gensym "tabgroup")))
+
+  `(div (@ (class "tabgroup"))
+        ,@(for (i (key body)) in (enumerate elements)
+               (define id (symbol->string (gensym "tab")))
+               `(div (@ (class "tab"))
+                     (input (@ (type "radio") (id ,id) (name ,tabgroup)
+                               ,@(when (zero? i) '((checked)))))
+                     (label (@ (for ,id) (style "top: " ,(* 6 i) "ex")) ,key)
+                     (div (@ (class "content")) ,body)))))
+
 (define (popup ev id)
   `(div (@ (class "popup-container") (id ,id))
         (div (@ (class "popup"))
@@ -156,7 +168,11 @@
                         title: "Ladda ner"
                         href: (string-append "/calendar/" (prop ev 'UID) ".ics")))
 
-             ,(fmt-single-event ev))))
+             ,(tabset
+               `(("📅" ,(fmt-single-event ev))
+                 ;; TODO only on debug/edit?
+                 ("</>" (script (@ (type "application/calendar+xml"))
+                                 ,((@ (output xcal) vcomponent->sxcal) ev))))))))
 
 
 
@@ -202,9 +218,6 @@
                                   (eq? 'TENTATIVE (prop ev 'PARTSTAT)))
                          " tentative"))
                     (data-tipped-options ,(format #f "inline: '~a'" popup-id)))))
-            ,(when (debug)
-               `(script (@ (type "application/calendar+xml"))
-                        ,((@ (output xcal) vcomponent->sxcal) ev)))
             ,(when (prop ev 'RRULE)
                `(span (@ (class "repeating")) "↺"))
             ,((get-config 'summary-filter) ev (prop ev 'SUMMARY))
diff --git a/static/style.css b/static/style.css
index 9b680a52..14ab1e53 100644
--- a/static/style.css
+++ b/static/style.css
@@ -636,7 +636,7 @@ along with their colors.
     background-color: #dedede;
     color: black;
 
-    overflow-y: auto;
+    /* overflow-y: auto; */
     max-width: 60ch;
     max-height: 60ch;
     min-width: 40ch;
@@ -686,5 +686,69 @@ along with their colors.
     left: -1em;
 }
 
+/* Tabs
+----------------------------------------
+*/
+
+.tabgroup {
+    position: relative;
+    width: 100%;
+}
+
+.tab label {
+    position: absolute;
+
+    left: 100%;
+    top: 0;
+    display: block;
+
+    max-height: 5ex;
+    min-height: 5ex;
+    min-width: 5ex;
+    max-width: 5ex;
+
+    border: 1px solid #ccc;
+    border-radius: 0 5px 5px 0;
+    background-color: #aeaeae;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.tab [type=radio] { display: none; }
+
+.tab .content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: orange;
+    right: 0;
+    bottom: 0;
+    overflow: auto;
+}
+
+.tpd-content-wrapper {
+    overflow: visible;
+}
+
+
+.tab [type=radio]:checked ~ label {
+    z-index: 1;
+    /* to align all tab */
+    border-left: 3px solid transparent;
+    background-color: #dedede;
+}
+
+.tab [type=radio]:checked ~ label ~ .content {
+	z-index: 1;
+}
+
+script[type="application/calendar+xml"] {
+    display: block;
+    font-family: monospace;
+    font-size: xx-small;
+}
+
 /* vim:expandtab:softtabstop=4:shiftwidth=4:
  */