frontend/ts/tabbar-element.ts (raw)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
import util from "./util" import {Settings} from "./settings" export class TabBarElement extends HTMLElement { static observedAttributes = [ "data-adapters", "data-currentadapter" ] private _adapters: string[] | null = null; private _currentAdapter: string | null = null; constructor() { super(); } connectedCallback() { this.attributeChangedCallback(); if (this._currentAdapter) { this.showAdapterFunc(this, this._currentAdapter)(); } else { this.showSettings(this)(); } } attributeChangedCallback() { let html = "<ul><li><a id='tabbar_settings' href='#settings'>settings</a></li>"; if (!this.getAttribute("data-adapters")) { this._adapters = []; } else { this._adapters = this.getAttribute("data-adapters")?.split(",") ?? []; } this._currentAdapter = this.getAttribute("data-currentadapter"); if (this._currentAdapter == "") { this._currentAdapter = null; } html = this._adapters.reduce((self: string, a: string)=>{ self += `<li><a id="tabbar_${a}" href="#${a}">${a}</a></li>`; return self; }, html); html += "</ul>"; this.innerHTML = html; // now we can query the child elements and add click handlers to them var s = util.$("tabbar_settings"); if (s) { s.addEventListener("click", this.showSettings(this), false); if (!this._currentAdapter) { s.classList.add("tabbar_current"); } } for (let i of this._adapters) { var a = util.$(`tabbar_${i}`); if (a) { a.addEventListener("click", this.showAdapterFunc(this, i), false); if (this._currentAdapter == i) { a.classList.add("tabbar_current"); } } } } showSettings(self: TabBarElement): ()=>void { return () => { let x = util.$("mainarea_injectparent"); if (x) { x.innerHTML = `<underbbs-settings data-adapters=${Settings._instance.adapters.map(a=>a.nickname).join(",") ?? []}></underbbs-settings>`; self.setAttribute("data-currentadapter", ""); } } } showAdapterFunc(self: TabBarElement, adapter: string): ()=>void { return ()=>{ let x = util.$("mainarea_injectparent"); if (x) { x.innerHTML = `<underbbs-adapter id="adapter_${adapter}" data-name="${adapter}" data-view=""></underbbs-adapter>`; self.setAttribute("data-currentadapter", adapter); } } } } |