underbbs/frontend/ts/tabbar-element.ts

84 lines
2.4 KiB
TypeScript
Raw Normal View History

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);
}
}
}
}