settings-element, tabbar-element: fix attributeChangedCallback

This commit is contained in:
Iris Lightshard 2024-08-22 19:18:30 -06:00
parent b4145db359
commit bb7d4e2f7d
Signed by: Iris Lightshard
GPG key ID: 688407174966CAF3
3 changed files with 22 additions and 21 deletions

1
.gitignore vendored
View file

@ -2,3 +2,4 @@ node_modules/
frontend/dist/*.js frontend/dist/*.js
frontend/.js frontend/.js
underbbs underbbs
__debug_*

View file

@ -13,15 +13,14 @@ export class SettingsElement extends HTMLElement {
} }
connectedCallback() { connectedCallback() {
this.attributeChangedCallback();
} }
attributeChangedCallback() { attributeChangedCallback(attr: string, prev: string, next: string) {
const adapters = this.getAttribute("data-adapters"); switch (attr) {
if (adapters) { case "data-adapters":
this._adapters = this.getAttribute("data-adapters")?.split(",") ?? []; if (next) {
} else { this._adapters = next.split(",");
this._adapters = []; }
} }
this.showSettings(this)(); this.showSettings(this)();
} }

View file

@ -4,7 +4,7 @@ import {Settings} from "./settings"
export class TabBarElement extends HTMLElement { export class TabBarElement extends HTMLElement {
static observedAttributes = [ "data-adapters", "data-currentadapter" ] static observedAttributes = [ "data-adapters", "data-currentadapter" ]
private _adapters: string[] | null = null; private _adapters: string[] = [];
private _currentAdapter: string | null = null; private _currentAdapter: string | null = null;
constructor() { constructor() {
@ -12,8 +12,6 @@ export class TabBarElement extends HTMLElement {
} }
connectedCallback() { connectedCallback() {
this.attributeChangedCallback();
if (this._currentAdapter) { if (this._currentAdapter) {
this.showAdapterFunc(this, this._currentAdapter)(); this.showAdapterFunc(this, this._currentAdapter)();
} else { } else {
@ -21,18 +19,21 @@ export class TabBarElement extends HTMLElement {
} }
} }
attributeChangedCallback() { attributeChangedCallback(attr: string, prev: string, next: string) {
let html = "<ul><li><a id='tabbar_settings' href='#settings'>settings</a></li>"; switch (attr) {
if (!this.getAttribute("data-adapters")) { case "data-adapters":
this._adapters = []; if (next) {
} else { this._adapters = next.split(",")
this._adapters = this.getAttribute("data-adapters")?.split(",") ?? []; } else {
this._adapters = [];
}
break;
case "data-currentadapter":
this._currentAdapter = next || null;
break;
} }
this._currentAdapter = this.getAttribute("data-currentadapter"); let html = "<ul><li><a id='tabbar_settings' href='#settings'>settings</a></li>";
if (this._currentAdapter == "") {
this._currentAdapter = null;
}
html = this._adapters.reduce((self: string, a: string)=>{ html = this._adapters.reduce((self: string, a: string)=>{
self += `<li><a id="tabbar_${a}" href="#${a}">${a}</a></li>`; self += `<li><a id="tabbar_${a}" href="#${a}">${a}</a></li>`;