From 74102c3f5f400542a09c5c5fc1043ab5fa490be0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= <hugo@lysator.liu.se>
Date: Thu, 18 Nov 2021 23:15:35 +0100
Subject: Change popup tabs interface.

---
 module/calp/html/view/calendar/week.scm | 26 ++++++++++----------------
 static/components/tab-element.ts        | 28 ++++++++--------------------
 static/components/vevent.ts             |  1 +
 3 files changed, 19 insertions(+), 36 deletions(-)

diff --git a/module/calp/html/view/calendar/week.scm b/module/calp/html/view/calendar/week.scm
index cb238394..6e0fbc4d 100644
--- a/module/calp/html/view/calendar/week.scm
+++ b/module/calp/html/view/calendar/week.scm
@@ -101,23 +101,20 @@
 
                  (div (@ (class "tabgroup"))
                       (tab-element
-                       (@ (title "Översikt"))
-                       (span (@ (slot "label")) "📅")
+                       (@ (label-title "Översikt")
+                          (label "📅"))
                        (vevent-description
-                        (@ (slot "content")
-                           (class "vevent populate-with-uid"))))
+                        (@(class "vevent populate-with-uid"))))
                       (tab-element
-                       (@ (title "Redigera"))
-                       (span (@ (slot "label")) "🖊")
-                       (vevent-edit (@ (slot "content")
-                                       (class "populate-with-uid")))
+                       (@ (label-title "Redigera")
+                          (label "🖊"))
+                       (vevent-edit (@ (class "populate-with-uid")))
                        )
                       ,@(when (debug)
                           `((tab-element
-                             (@ (title "Debug"))
-                             (span (@ (slot "label")) "🐸")
-                             (vevent-dl (@ (slot "content")
-                                           (class "populate-with-uid")))
+                             (@ (label-title "Debug")
+                                (label "🐸"))
+                             (vevent-dl (@ (class "populate-with-uid")))
 
                              ))))
 
@@ -144,10 +141,7 @@
                       ))
             (label (@ ; for id
                     ;; style= top: calc(var(--tab-size) * i)
-                    (title ; title
-                     ))
-                   (slot (@ (name "label")) "??")
-                   )
+                    (title)))
             (div (@ (class "content"))
                  (slot (@ (name "content"))
                        (span (@ (class "error"))
diff --git a/static/components/tab-element.ts b/static/components/tab-element.ts
index 9403a737..9da6c504 100644
--- a/static/components/tab-element.ts
+++ b/static/components/tab-element.ts
@@ -7,34 +7,22 @@ class TabElement extends HTMLElement {
     }
 
     connectedCallback() {
-        // this.replaceChildren(template.cloneNode(true));
         let template
             = (document.getElementById('tab-template') as HTMLTemplateElement)
                 .content
         // const shadowRoot = this.attachShadow({ mode: 'open' })
         //     .appendChild(template.cloneNode(true));
-        // console.log(this);
-        let label = this.querySelector('[slot="label"]')
-        let content = this.querySelector('[slot="content"]')
-        if (!verifySlot(label)) throw "Bad label";
-        if (!verifySlot(content)) throw "Bad content";
 
-        /* TODO set label hover title somewhere around here */
+        let content = Array.from(this.children, (e) => e.cloneNode(true))
 
         this.replaceChildren(template.cloneNode(true));
-        this.querySelector('slot[name="label"]')!.replaceWith(label);
-        this.querySelector('slot[name="content"]')!.replaceWith(content);
-    }
-}
 
-function verifySlot(el: Node | null): el is HTMLElement {
-    if (el === null) {
-        console.error("Element is null");
-        return false;
-    }
-    if (!(el instanceof HTMLElement)) {
-        console.error("Node is not an HTMLElement", el);
-        return false;
+        let label = this.querySelector('label')
+        if (!label) throw "Invalid tab"
+
+        label.setAttribute('title', this.getAttribute('label-title') || '')
+        label.innerText = this.getAttribute('label') || 'T'
+
+        this.querySelector('slot[name="content"]')!.replaceWith(...content);
     }
-    return true
 }
diff --git a/static/components/vevent.ts b/static/components/vevent.ts
index d957c7c8..23eba0a9 100644
--- a/static/components/vevent.ts
+++ b/static/components/vevent.ts
@@ -22,6 +22,7 @@ class ComponentVEvent extends HTMLElement {
         if (uid) real_uid = uid;
 
         if (!real_uid) {
+            console.warn(this.outerHTML);
             throw `UID required`
         }
 
-- 
cgit v1.2.3