settings-element, tabbar-element: fix attributeChangedCallback
Iris Lightshard nilix@nilfm.cc
PGP Signature
-----BEGIN PGP SIGNATURE----- iHUEABYKAB0WIQT/foVVmI9pK13hPWFohAcXSWbK8wUCZsfjZgAKCRBohAcXSWbK 8z7zAP45bLpS/7+Z716/TujtxCjJAjZHueBkal/aOp27eBr0+wD/SSMrqF7HWBVI Svkm+RP0CChkLOi64mA5aodCEZ7esww= =3FhQ -----END PGP SIGNATURE-----
3 files changed,
22 insertions(+),
21 deletions(-)
M
.gitignore
→
.gitignore
@@ -1,4 +1,5 @@
node_modules/ frontend/dist/*.js frontend/.js -underbbs+underbbs +__debug_*
M
frontend/ts/settings-element.ts
→
frontend/ts/settings-element.ts
@@ -13,15 +13,14 @@ super();
} connectedCallback() { - this.attributeChangedCallback(); } - attributeChangedCallback() { - const adapters = this.getAttribute("data-adapters"); - if (adapters) { - this._adapters = this.getAttribute("data-adapters")?.split(",") ?? []; - } else { - this._adapters = []; + attributeChangedCallback(attr: string, prev: string, next: string) { + switch (attr) { + case "data-adapters": + if (next) { + this._adapters = next.split(","); + } } this.showSettings(this)(); }
M
frontend/ts/tabbar-element.ts
→
frontend/ts/tabbar-element.ts
@@ -4,7 +4,7 @@
export class TabBarElement extends HTMLElement { static observedAttributes = [ "data-adapters", "data-currentadapter" ] - private _adapters: string[] | null = null; + private _adapters: string[] = []; private _currentAdapter: string | null = null; constructor() {@@ -12,8 +12,6 @@ super();
} connectedCallback() { - this.attributeChangedCallback(); - if (this._currentAdapter) { this.showAdapterFunc(this, this._currentAdapter)(); } else {@@ -21,18 +19,21 @@ 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(",") ?? []; + 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; } - this._currentAdapter = this.getAttribute("data-currentadapter"); - if (this._currentAdapter == "") { - this._currentAdapter = null; - } + 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>`;