underbbs/frontend/ts/tabbar-element.ts

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);
      }
    }
  }
}