From 4dc3675dbdde6f9fe18fc64635d43708e35d7950 Mon Sep 17 00:00:00 2001 From: Ian Gulliver Date: Sat, 21 Dec 2024 07:17:19 -0800 Subject: [PATCH] tab group --- static/index.html | 25 +++++++++++++------------ static/main.js | 33 ++++++++++++++++++++++++++++++++- ts/main.ts | 42 +++++++++++++++++++++++++++++++++++++++++- 3 files changed, 86 insertions(+), 14 deletions(-) diff --git a/static/index.html b/static/index.html index 628fe08..060151b 100644 --- a/static/index.html +++ b/static/index.html @@ -1,6 +1,19 @@ + Tasks + + + - - - diff --git a/static/main.js b/static/main.js index 03fdd8b..4f9b965 100644 --- a/static/main.js +++ b/static/main.js @@ -1,5 +1,36 @@ "use strict"; -function main() { +async function main() { console.log("Hello, world!"); + const root = new ElemWrapper(document.body); + const tabGroup = root.add("sl-tab-group"); + tabGroup + .add("sl-tab", "slot", "nav", "panel", "tasks", "active", "") + .add("sl-icon", "name", "slash-circle", "style", "font-size: 20px"); + tabGroup + .add("sl-tab", "slot", "nav", "panel", "tags") + .add("sl-icon", "name", "tags", "style", "font-size: 20px"); +} +function add(name, parent, ...attrs) { + const elem = document.createElement(name); + parent.appendChild(elem); + for (let i = 0; i < attrs.length; i += 2) { + elem.setAttribute(attrs[i], attrs[i + 1]); + } + return elem; +} +class ElemWrapper { + elem; + constructor(elem) { + this.elem = elem; + this.elem = elem; + } + add(name, ...attrs) { + const elem = document.createElement(name); + this.elem.appendChild(elem); + for (let i = 0; i < attrs.length; i += 2) { + elem.setAttribute(attrs[i], attrs[i + 1]); + } + return new ElemWrapper(elem); + } } document.addEventListener("DOMContentLoaded", main); diff --git a/ts/main.ts b/ts/main.ts index 3cb9ace..1dbfcc9 100644 --- a/ts/main.ts +++ b/ts/main.ts @@ -1,5 +1,45 @@ -function main() { +async function main() { console.log("Hello, world!"); + + const root = new ElemWrapper(document.body); + + const tabGroup = root.add("sl-tab-group"); + + tabGroup + .add("sl-tab", "slot", "nav", "panel", "tasks", "active", "") + .add("sl-icon", "name", "slash-circle", "style", "font-size: 20px"); + + tabGroup + .add("sl-tab", "slot", "nav", "panel", "tags") + .add("sl-icon", "name", "tags", "style", "font-size: 20px"); +} + +function add(name: string, parent: HTMLElement, ...attrs: any[]) { + const elem = document.createElement(name); + parent.appendChild(elem); + + for (let i = 0; i < attrs.length; i += 2) { + elem.setAttribute(attrs[i], attrs[i + 1]); + } + + return elem; +} + +class ElemWrapper { + constructor(private elem: HTMLElement) { + this.elem = elem; + } + + add(name: string, ...attrs: string[]): ElemWrapper { + const elem = document.createElement(name); + this.elem.appendChild(elem); + + for (let i = 0; i < attrs.length; i += 2) { + elem.setAttribute(attrs[i], attrs[i + 1]); + } + + return new ElemWrapper(elem); + } } document.addEventListener("DOMContentLoaded", main);