85 lines
2.4 KiB
TypeScript
85 lines
2.4 KiB
TypeScript
import util from "./util"
|
|
import {Settings} from "./settings"
|
|
|
|
export class TabBarElement extends HTMLElement {
|
|
static observedAttributes = [ "data-adapters", "data-currentadapter" ]
|
|
|
|
private _adapters: string[] = [];
|
|
private _currentAdapter: string | null = null;
|
|
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
connectedCallback() {
|
|
if (this._currentAdapter) {
|
|
this.showAdapterFunc(this, this._currentAdapter)();
|
|
} else {
|
|
this.showSettings(this)();
|
|
}
|
|
}
|
|
|
|
attributeChangedCallback(attr: string, prev: string, next: string) {
|
|
switch (attr) {
|
|
case "data-adapters":
|
|
if (next) {
|
|
this._adapters = next.split(",")
|
|
} else {
|
|
this._adapters = [];
|
|
}
|
|
break;
|
|
case "data-currentadapter":
|
|
this._currentAdapter = next || null;
|
|
break;
|
|
}
|
|
|
|
let html = "<ul><li><a id='tabbar_settings' href='#settings'>settings</a></li>";
|
|
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
}
|