ref: extract tab menu from layout (openscd#1631)

Author: trusz

packages/openscd/src/addons/Layout.ts

@@ -58,6 +58,8 @@ import {OscdPluginManager} from "./plugin-manager/plugin-manager.js";
 import "./plugin-manager/plugin-manager.js";
 import {OscdCustomPluginDialog} from "./plugin-manager/custom-plugin-dialog.js";
 import "./plugin-manager/custom-plugin-dialog.js";
+import "./menu-tabs/menu-tabs.js";
+import { TabActivatedEvent } from "./menu-tabs/menu-tabs.js";
 
 
 @customElement('oscd-layout')
@@ -82,6 +84,7 @@ export class OscdLayout extends LitElement {
 
   @state() validated: Promise<void> = Promise.resolve();
   @state() shouldValidate = false;
+  @state() activeEditor: Plugin | undefined = this.calcActiveEditors()[0];
 
   @query('#menu') menuUI!: Drawer;
   @query('#pluginManager') pluginUI!: OscdPluginManager;
@@ -462,17 +465,17 @@ export class OscdLayout extends LitElement {
     if(!hasActiveEditors){ return html``; }
 
     return html`
-      <mwc-tab-bar
-        @MDCTabBar:activated=${this.handleActivatedEditorTabByUser}
-        activeIndex=${this.activeTab}
+      <oscd-menu-tabs
+        .editors=${this.calcActiveEditors()}
+        .activeEditor=${this.activeEditor}
+        @oscd-editor-tab-activated=${this.handleEditorTabActivated}
       >
-        ${activeEditors}
-      </mwc-tab-bar>
-      ${renderEditorContent(this.editors, this.activeTab, this.doc)}
+      </oscd-menu-tabs>
+      ${renderEditorContent(this.doc, this.activeEditor, )}
     `;
 
-    function renderEditorContent(editors: Plugin[], activeTab: number, doc: XMLDocument | null){
-      const editor = editors[activeTab];
+    function renderEditorContent(doc: XMLDocument | null, activeEditor?: Plugin){
+      const editor = activeEditor;
       const requireDoc = editor?.requireDoc
       if(requireDoc && !doc) { return html`` }
 
@@ -483,6 +486,10 @@ export class OscdLayout extends LitElement {
     }
   }
 
+  private handleEditorTabActivated(e: TabActivatedEvent){
+    this.activeEditor = e.detail.editor
+  }
+
   private handleActivatedEditorTabByUser(e: CustomEvent): void {
     const tabIndex = e.detail.index;
     this.activateTab(tabIndex);

packages/openscd/src/addons/menu-tabs/menu-tabs.ts

@@ -0,0 +1,81 @@
+import {
+  customElement,
+  html,
+  LitElement,
+  property,
+  query,
+  state,
+  TemplateResult,
+  css
+} from 'lit-element';
+
+import '@material/mwc-list';
+import '@material/mwc-tab';
+import '@material/mwc-tab-bar';
+import '@material/mwc-button';
+
+import {
+  Plugin,
+} from "../../plugin.js"
+
+
+@customElement('oscd-menu-tabs')
+export class OscdMenuTabs extends LitElement {
+
+  @property({ type: Array }) editors: Plugin[] = [];
+  _activeEditor: Plugin | undefined;
+  @property({ type: Object }) get activeEditor() { return this._activeEditor; }
+  set activeEditor(editor: Plugin | undefined) {
+    this._activeEditor = editor;
+    this.activeTabIndex = this.editors.indexOf(this.activeEditor || this.editors[0]);
+    this.requestUpdate();
+  };
+
+  @state() private activeTabIndex = 0;
+
+  render(){
+    if(this.editors.length === 0){ return html``; }
+
+    return html`
+      <mwc-tab-bar
+        @MDCTabBar:activated=${this.handleActivatedEditorTab}
+        activeIndex=${this.activeTabIndex}
+      >
+        ${ this.editors.map( EditorTab ) }
+      </mwc-tab-bar>
+    `
+  }
+
+  static styles = css`
+    mwc-tab {
+      background-color: var(--primary);
+      --mdc-theme-primary: var(--mdc-theme-on-primary);
+    }
+  `
+
+  private handleActivatedEditorTab(e: CustomEvent): void {
+    const tabIndex = e.detail.index;
+    const editor = this.editors[tabIndex];
+    this.activeTabIndex = tabIndex;
+    this.dispatchActivateEditor(editor);
+  }
+
+  private dispatchActivateEditor( editor: Plugin ){
+    const newEvent = new CustomEvent(TabActivatedEventKey, {
+      detail: { editor },
+      composed: true,
+      bubbles: true
+    })
+    this.dispatchEvent(newEvent)
+  }
+}
+
+function EditorTab({ name, icon }: Plugin): TemplateResult {
+  return html`
+    <mwc-tab label=${name} icon=${icon || 'edit'}> </mwc-tab>
+  `;
+}
+
+export const TabActivatedEventKey = 'oscd-editor-tab-activated'
+export type TabActivatedEvent = CustomEvent<TabActivatedEventDetail>;
+export type TabActivatedEventDetail = { editor: Plugin }