settings-element, tabbar-element: fix attributeChangedCallback

.gitignore

@@ -1,4 +1,5 @@
 node_modules/
 frontend/dist/*.js
 frontend/.js
-underbbs
+underbbs
+__debug_*

frontend/ts/settings-element.ts

@@ -13,15 +13,14 @@ export class SettingsElement extends HTMLElement {
   }
   
   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)();
   }

frontend/ts/tabbar-element.ts

@@ -4,7 +4,7 @@ import {Settings} from "./settings"
 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 @@ export class TabBarElement extends HTMLElement {
   }
   
   connectedCallback() {
-    this.attributeChangedCallback();
-    
     if (this._currentAdapter) {
       this.showAdapterFunc(this, this._currentAdapter)();
     } else {
@@ -21,18 +19,21 @@ export class TabBarElement extends HTMLElement {
     }
   }
   
-  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>`;