diff options
author | Hugo Hörnquist <hugo@lysator.liu.se> | 2021-11-10 01:40:22 +0100 |
---|---|---|
committer | Hugo Hörnquist <hugo@lysator.liu.se> | 2021-11-10 01:40:22 +0100 |
commit | 410404cfdd54c083b6609fd52334e02d320145d7 (patch) | |
tree | ac934bde696f099590496d23bdd636f691f4c637 /static/components/tab-element.ts | |
parent | Basic event modification works again. (diff) | |
download | calp-410404cfdd54c083b6609fd52334e02d320145d7.tar.gz calp-410404cfdd54c083b6609fd52334e02d320145d7.tar.xz |
Re-modularize javascript.
This moves almost everything out of globals.ts, into sepparate files.
Things are still slightly to tightly coupled. But that is worked on.
Diffstat (limited to 'static/components/tab-element.ts')
-rw-r--r-- | static/components/tab-element.ts | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/static/components/tab-element.ts b/static/components/tab-element.ts new file mode 100644 index 00000000..9403a737 --- /dev/null +++ b/static/components/tab-element.ts @@ -0,0 +1,40 @@ +export { TabElement } + +/* <tab-element /> */ +class TabElement extends HTMLElement { + constructor() { + super(); + } + + 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 */ + + 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; + } + return true +} |