diff options
| -rw-r--r-- | module/calp/html/view/calendar/week.scm | 26 | ||||
| -rw-r--r-- | static/components/tab-element.ts | 28 | ||||
| -rw-r--r-- | 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` } |