84 lines
2.3 KiB
TypeScript
84 lines
2.3 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}"></underbbs-adapter>`;
|
|
self.setAttribute("data-currentadapter", adapter);
|
|
}
|
|
}
|
|
}
|
|
}
|