underbbs/ts/tabbar-element.ts

84 lines
2.4 KiB
TypeScript

import util from "./util"
var _ = util._
var $ = util.$
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 = $("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 = $(`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 = $("mainarea_injectparent");
if (x) {
x.innerHTML = `<underbbs-settings data-adapters=${self._adapters?.join(",") ?? []}></underbbs-settings>`;
self.setAttribute("data-currentadapter", "");
}
}
}
showAdapterFunc(self: TabBarElement, adapter: string): ()=>void {
return ()=>{
let x = $("mainarea_injectparent");
if (x) {
x.innerHTML = `<underbbs-adapter id="adapter_${adapter}" data-name="${adapter}" data-view="index"></underbbs-adapter>`;
self.setAttribute("data-currentadapter", adapter);
}
}
}
}