diff options
author | Hugo Hörnquist <hugo@lysator.liu.se> | 2021-11-18 23:15:35 +0100 |
---|---|---|
committer | Hugo Hörnquist <hugo@lysator.liu.se> | 2021-11-18 23:15:35 +0100 |
commit | 74102c3f5f400542a09c5c5fc1043ab5fa490be0 (patch) | |
tree | 4181461b766ca5f343c62fc31df595e05707127e /static/components/tab-element.ts | |
parent | Restore remove event functionality. (diff) | |
download | calp-74102c3f5f400542a09c5c5fc1043ab5fa490be0.tar.gz calp-74102c3f5f400542a09c5c5fc1043ab5fa490be0.tar.xz |
Change popup tabs interface.
Diffstat (limited to '')
-rw-r--r-- | static/components/tab-element.ts | 28 |
1 files changed, 8 insertions, 20 deletions
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 } |