@matdata/yasgui 4.6.1

package/src/TabContextMenu.scss

@@ -0,0 +1,42 @@
+.yasgui.context-menu {
+  position: absolute;
+  z-index: 10;
+  background: white;
+  min-width: 160px;
+  font-size: 14px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  background-clip: padding-box;
+  hr {
+    margin: 8px auto;
+    border: none;
+    border-top: 1px solid #aaaaaa;
+    border-bottom: 1px solid #ffffff;
+  }
+  .context-menu-list {
+    padding: 0;
+  }
+  .context-menu-item {
+    display: block;
+    padding: 3px 20px;
+    clear: both;
+    font-weight: 400;
+    line-height: 1.42857;
+    color: #333;
+    white-space: nowrap;
+    cursor: pointer;
+    &:hover {
+      text-decoration: none;
+      color: black;
+      background-color: #f5f5f5;
+    }
+    &.disabled {
+      text-decoration: none;
+      color: gray;
+      background-color: #e5e5e5;
+      cursor: not-allowed;
+    }
+  }
+}

package/src/TabContextMenu.ts

@@ -0,0 +1,143 @@
+import { addClass } from "@matdata/yasgui-utils";
+import { default as Yasgui, getRandomId } from "./";
+import Tab from "./Tab";
+import { TabListEl } from "./TabElements";
+import { cloneDeep } from "lodash-es";
+require("./TabContextMenu.scss");
+export interface TabContextConfig {
+  name: string;
+  action: (this: HTMLElement, ev: MouseEvent) => any;
+  enabled: boolean;
+}
+export default class TabContextMenu {
+  private yasgui: Yasgui;
+  private contextEl!: HTMLElement;
+  private newTabEl!: HTMLElement;
+  private renameTabEl!: HTMLElement;
+  private copyTabEl!: HTMLElement;
+  private closeTabEl!: HTMLElement;
+  private closeOtherTabsEl!: HTMLElement;
+  private reOpenOldTab!: HTMLElement;
+  private rootEl: HTMLElement;
+  private tabRef: TabListEl | undefined; // Need to store it due to scrolling updates
+  constructor(yasgui: Yasgui, rootEl: HTMLElement) {
+    this.yasgui = yasgui;
+    this.rootEl = rootEl;
+    document.addEventListener("click", this.handleContextClick);
+    document.addEventListener("keyup", this.closeConfigMenu);
+  }
+  private getMenuItemEl(text?: string) {
+    const item = document.createElement("li");
+    addClass(item, "context-menu-item");
+    // Make sure hitting 'rmb' multiple times doesn't close the menu
+    item.addEventListener("contextmenu", (event) => {
+      event.stopPropagation();
+    });
+    if (text !== undefined) item.innerText = text;
+    return item;
+  }
+  private draw(rootEl: HTMLElement) {
+    this.contextEl = document.createElement("div");
+    const dropDownList = document.createElement("ul");
+    addClass(dropDownList, "context-menu-list");
+
+    this.newTabEl = this.getMenuItemEl("New Tab");
+    // We can set the function for addTab here already, as it doesn't need any outside data
+    this.newTabEl.onclick = () => this.yasgui.addTab(true);
+
+    this.renameTabEl = this.getMenuItemEl("Rename Tab");
+
+    this.copyTabEl = this.getMenuItemEl("Copy Tab");
+
+    this.closeTabEl = this.getMenuItemEl("Close Tab");
+
+    this.closeOtherTabsEl = this.getMenuItemEl("Close other tabs");
+
+    this.reOpenOldTab = this.getMenuItemEl("Undo close Tab");
+
+    // Add items to list
+    dropDownList.appendChild(this.newTabEl);
+    dropDownList.appendChild(this.renameTabEl);
+    dropDownList.appendChild(this.copyTabEl);
+    // Add divider
+    dropDownList.appendChild(document.createElement("hr"));
+    dropDownList.appendChild(this.closeTabEl);
+    dropDownList.appendChild(this.closeOtherTabsEl);
+    dropDownList.appendChild(this.reOpenOldTab);
+    this.contextEl.appendChild(dropDownList);
+    addClass(this.contextEl, "yasgui", "context-menu");
+    rootEl.appendChild(this.contextEl);
+  }
+  public redraw() {
+    if (this.contextEl && this.tabRef?.tabEl) {
+      const bounding = this.tabRef.tabEl.getBoundingClientRect();
+      this.contextEl.style.top = `${window.pageYOffset + bounding.bottom}px`;
+    }
+  }
+  handleContextClick = (event: MouseEvent) => {
+    if (event.button !== 2) {
+      this.closeConfigMenu();
+    } else if (event.target !== this.contextEl) {
+      this.closeConfigMenu();
+    } else {
+      event.stopImmediatePropagation();
+    }
+  };
+
+  public openConfigMenu(currentTabId: string, currentTabEl: TabListEl, event: MouseEvent) {
+    if (!currentTabEl.tabEl) return;
+    this.draw(this.rootEl);
+    this.tabRef = currentTabEl;
+    const tab = this.yasgui.getTab(currentTabId);
+    const bounding = currentTabEl.tabEl.getBoundingClientRect();
+    this.contextEl.style.left = `${window.pageXOffset + bounding.left}px`;
+    this.contextEl.style.top = `${window.pageYOffset + bounding.bottom}px`;
+    event.stopPropagation();
+
+    // Set rename functionality
+    this.renameTabEl.onclick = () => currentTabEl.startRename();
+
+    // Copy tab functionality`
+    this.copyTabEl.onclick = () => {
+      if (!tab) return;
+      const config = cloneDeep(tab.getPersistedJson());
+      config.id = getRandomId();
+      this.yasgui.addTab(true, config);
+    };
+
+    // Close tab functionality
+    this.closeTabEl.onclick = () => tab?.close();
+
+    // Close other tab functionality
+    if (Object.keys(this.yasgui._tabs).length === 1) {
+      addClass(this.closeOtherTabsEl, "disabled");
+    } else {
+      this.closeOtherTabsEl.onclick = () => {
+        for (const tabId of Object.keys(this.yasgui._tabs)) {
+          if (tabId !== currentTabId) (this.yasgui.getTab(tabId) as Tab).close();
+        }
+      };
+    }
+    if (this.yasgui.persistentConfig && this.yasgui.persistentConfig.hasLastClosedTab()) {
+      this.reOpenOldTab.onclick = () => this.yasgui.restoreLastTab();
+    } else {
+      addClass(this.reOpenOldTab, "disabled");
+    }
+  }
+  public closeConfigMenu = () => {
+    this.tabRef = undefined;
+    if (this.contextEl) this.contextEl.remove();
+  };
+
+  public static get(yasgui: Yasgui, rootEl: HTMLElement) {
+    const instance = new TabContextMenu(yasgui, rootEl);
+    return instance;
+  }
+  public unregisterEventListeners() {
+    document.removeEventListener("click", this.handleContextClick);
+    document.removeEventListener("keyup", this.closeConfigMenu);
+  }
+  public destroy() {
+    this.unregisterEventListeners();
+  }
+}

package/src/TabElements.scss

@@ -0,0 +1,134 @@
+@use "sass:color";
+$minTabHeight: 35px;
+.yasgui {
+  .tabsList {
+    .sortable-placeholder {
+      min-width: 100px;
+      min-height: $minTabHeight;
+      border: 2px dotted color.adjust(#555, $lightness: 20%);
+    }
+    display: flex;
+    flex-wrap: wrap;
+    a {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: $minTabHeight;
+      border-bottom: 2px solid transparent;
+      box-sizing: border-box;
+    }
+    .addTab {
+      cursor: pointer;
+      height: 100%;
+      font-size: 120%;
+      font-weight: 800;
+      margin-left: 15px;
+      padding: 0px 5px 2px 5px;
+      background: inherit;
+      border: none;
+      color: #337ab7;
+
+      &:hover,
+      &:focus-visible {
+        transform: scale(1.1);
+      }
+      &:focus {
+        color: #faa857;
+      }
+    }
+    .tab {
+      position: relative;
+      $activeColor: #337ab7;
+      $hoverColor: color.adjust($activeColor, $lightness: 30%);
+
+      .loader {
+        display: none;
+        background-color: color.adjust(#555, $lightness: 50%);
+        height: 2px;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 100%;
+        animation-name: slide;
+        animation-duration: 2s;
+        animation-timing-function: ease;
+        animation-iteration-count: infinite;
+      }
+      @keyframes slide {
+        0% {
+          left: 0;
+          right: 100%;
+        }
+        70% {
+          left: 0;
+          right: 0;
+        }
+        100% {
+          left: 100%;
+          right: 0;
+        }
+      }
+      &.active .loader {
+        background-color: $hoverColor;
+      }
+      &:hover .loader {
+        background-color: $activeColor;
+      }
+      &.querying .loader {
+        display: block;
+      }
+      &.active a {
+        border-bottom-color: $activeColor;
+        color: #555;
+      }
+      input {
+        display: none;
+        outline: none;
+        border: none;
+      }
+      &.renaming {
+        span {
+          display: none;
+        }
+        .closeTab {
+          display: none;
+        }
+        input {
+          display: block;
+        }
+      }
+      a {
+        font-weight: 600;
+        color: color.adjust(#555, $lightness: 20%);
+        font-size: 15px;
+        line-height: 1.5rem;
+        font-weight: 500;
+        min-width: 120px;
+        padding: 0px 24px 0px 30px;
+        white-space: nowrap;
+        overflow: hidden;
+        &:hover {
+          border-bottom-color: $hoverColor;
+          color: #555;
+        }
+        &:focus {
+          border-bottom-color: #faa857;
+          color: #555;
+        }
+        .closeTab {
+          color: #000;
+          margin-left: 7px;
+          font-size: 15px;
+          text-shadow: 0 1px 0 #fff;
+          opacity: 0.2;
+          font-weight: 700;
+          padding: 2px;
+          &:hover {
+            opacity: 0.5;
+          }
+        }
+      }
+    }
+  }
+}

package/src/TabElements.ts

@@ -0,0 +1,336 @@
+import Yasgui from "./";
+import TabContextMenu from "./TabContextMenu";
+import { hasClass, addClass, removeClass } from "@matdata/yasgui-utils";
+const sortablejs = require("sortablejs");
+require("./TabElements.scss");
+export interface TabList {}
+export class TabListEl {
+  private tabList: TabList;
+  private tabId: string;
+  private yasgui: Yasgui;
+  private renameEl?: HTMLInputElement;
+  private nameEl?: HTMLSpanElement;
+  public tabEl?: HTMLDivElement;
+  constructor(yasgui: Yasgui, tabList: TabList, tabId: string) {
+    this.tabList = tabList;
+    this.yasgui = yasgui;
+    this.tabId = tabId;
+  }
+  public delete() {
+    if (this.tabEl) {
+      this.tabList._tabsListEl?.removeChild(this.tabEl);
+      delete this.tabList._tabs[this.tabId];
+    }
+  }
+  public startRename() {
+    if (this.renameEl) {
+      const tab = this.yasgui.getTab(this.tabId);
+      if (tab) {
+        this.renameEl.value = tab.name();
+        addClass(this.tabEl, "renaming");
+        this.renameEl.focus();
+      }
+    }
+  }
+  public active(active: boolean) {
+    if (!this.tabEl) return;
+    if (active) {
+      addClass(this.tabEl, "active");
+      // add aria-properties
+      this.tabEl.children[0].setAttribute("aria-selected", "true");
+      this.tabEl.children[0].setAttribute("tabindex", "0");
+    } else {
+      removeClass(this.tabEl, "active");
+      // remove aria-properties
+      this.tabEl.children[0].setAttribute("aria-selected", "false");
+      this.tabEl.children[0].setAttribute("tabindex", "-1");
+    }
+  }
+  public rename(name: string) {
+    if (this.nameEl) {
+      this.nameEl.textContent = name;
+    }
+  }
+  public setAsQuerying(querying: boolean) {
+    if (querying) {
+      addClass(this.tabEl, "querying");
+    } else {
+      removeClass(this.tabEl, "querying");
+    }
+  }
+  public draw(name: string) {
+    this.tabEl = document.createElement("div");
+    this.tabEl.setAttribute("role", "presentation");
+    this.tabEl.ondblclick = () => {
+      this.startRename();
+    };
+    addClass(this.tabEl, "tab");
+    this.tabEl.addEventListener("keydown", (e: KeyboardEvent) => {
+      if (e.code === "Delete") handleDeleteTab();
+    });
+
+    const handleDeleteTab = (e?: MouseEvent) => {
+      e?.preventDefault();
+      this.yasgui.getTab(this.tabId)?.close();
+    };
+
+    const tabLinkEl = document.createElement("a");
+    tabLinkEl.setAttribute("role", "tab");
+    tabLinkEl.href = "#" + this.tabId;
+    tabLinkEl.id = "tab-" + this.tabId; // use the id for the tabpanel which is tabId to set the actual tab id
+    tabLinkEl.setAttribute("aria-controls", this.tabId); // respective tabPanel id
+    tabLinkEl.addEventListener("blur", () => {
+      if (!this.tabEl) return;
+      if (this.tabEl.classList.contains("active")) {
+        tabLinkEl.setAttribute("tabindex", "0");
+      } else {
+        tabLinkEl.setAttribute("tabindex", "-1");
+      }
+    });
+    tabLinkEl.addEventListener("focus", () => {
+      if (!this.tabEl) return;
+      if (this.tabEl.classList.contains("active")) {
+        const allTabs = Object.keys(this.tabList._tabs);
+        const currentTabIndex = allTabs.indexOf(this.tabId);
+        this.tabList.tabEntryIndex = currentTabIndex;
+      }
+    });
+    // if (this.yasgui.persistentConfig.tabIsActive(this.tabId)) {
+    //   this.yasgui.store.dispatch(selectTab(this.tabId))
+    // }
+    tabLinkEl.addEventListener("click", (e) => {
+      e.preventDefault();
+      this.yasgui.selectTabId(this.tabId);
+    });
+
+    //tab name
+    this.nameEl = document.createElement("span");
+    this.nameEl.textContent = name;
+    tabLinkEl.appendChild(this.nameEl);
+
+    //tab close btn
+    const closeBtn = document.createElement("div");
+    closeBtn.innerHTML = "✖";
+    closeBtn.title = "Close tab";
+    closeBtn.setAttribute("tabindex", "-1");
+    closeBtn.setAttribute("aria-hidden", "true");
+    addClass(closeBtn, "closeTab");
+    closeBtn.addEventListener("click", handleDeleteTab);
+    tabLinkEl.appendChild(closeBtn);
+
+    const renameEl = (this.renameEl = document.createElement("input"));
+    renameEl.type = "text";
+    renameEl.value = name;
+    renameEl.onkeyup = (event) => {
+      if (event.key === "Enter") {
+        this.yasgui.getTab(this.tabId)?.setName(renameEl.value);
+        removeClass(this.tabEl, "renaming");
+      }
+    };
+    renameEl.onblur = () => {
+      this.yasgui.getTab(this.tabId)?.setName(renameEl.value);
+      removeClass(this.tabEl, "renaming");
+    };
+    tabLinkEl.appendChild(this.renameEl);
+    tabLinkEl.oncontextmenu = (ev: MouseEvent) => {
+      // Close possible old
+      this.tabList.tabContextMenu?.closeConfigMenu();
+      this.openTabConfigMenu(ev);
+      ev.preventDefault();
+      ev.stopPropagation();
+    };
+    this.tabEl.appendChild(tabLinkEl);
+
+    //draw loading animation overlay
+    const loaderEl = document.createElement("div");
+    addClass(loaderEl, "loader");
+    this.tabEl.appendChild(loaderEl);
+
+    return this.tabEl;
+  }
+  private openTabConfigMenu(event: MouseEvent) {
+    this.tabList.tabContextMenu?.openConfigMenu(this.tabId, this, event);
+  }
+  redrawContextMenu() {
+    this.tabList.tabContextMenu?.redraw();
+  }
+}
+
+export class TabList {
+  yasgui: Yasgui;
+
+  private _selectedTab?: string;
+  private addTabEl?: HTMLDivElement;
+  public _tabs: { [tabId: string]: TabListEl } = {};
+  public _tabsListEl?: HTMLDivElement;
+  public tabContextMenu?: TabContextMenu;
+  public tabEntryIndex: number | undefined;
+
+  constructor(yasgui: Yasgui) {
+    this.yasgui = yasgui;
+    this.registerListeners();
+    this.tabEntryIndex = this.getActiveIndex();
+  }
+  get(tabId: string) {
+    return this._tabs[tabId];
+  }
+
+  private registerListeners() {
+    this.yasgui.on("query", (_yasgui, tab) => {
+      const id = tab.getId();
+      if (this._tabs[id]) {
+        this._tabs[id].setAsQuerying(true);
+      }
+    });
+    this.yasgui.on("queryResponse", (_yasgui, tab) => {
+      const id = tab.getId();
+      if (this._tabs[id]) {
+        this._tabs[id].setAsQuerying(false);
+      }
+    });
+    this.yasgui.on("queryAbort", (_yasgui, tab) => {
+      const id = tab.getId();
+      if (this._tabs[id]) {
+        this._tabs[id].setAsQuerying(false);
+      }
+    });
+  }
+  private getActiveIndex() {
+    if (!this._selectedTab) return;
+    const allTabs = Object.keys(this._tabs);
+    const currentTabIndex = allTabs.indexOf(this._selectedTab);
+    return currentTabIndex;
+  }
+  private handleKeydownArrowKeys = (e: KeyboardEvent) => {
+    if (e.code === "ArrowLeft" || e.code === "ArrowRight") {
+      if (!this._tabsListEl) return;
+      const numOfChildren = this._tabsListEl.childElementCount;
+      if (typeof this.tabEntryIndex !== "number") return;
+      const tabEntryDiv = this._tabsListEl.children[this.tabEntryIndex];
+      // If the current tab does not have active set its tabindex to -1
+      if (!tabEntryDiv.classList.contains("active")) {
+        tabEntryDiv.children[0].setAttribute("tabindex", "-1"); // cur tab removed from tab index
+      }
+      if (e.code === "ArrowLeft") {
+        this.tabEntryIndex--;
+        if (this.tabEntryIndex < 0) {
+          this.tabEntryIndex = numOfChildren - 1;
+        }
+      }
+      if (e.code === "ArrowRight") {
+        this.tabEntryIndex++;
+        if (this.tabEntryIndex >= numOfChildren) {
+          this.tabEntryIndex = 0;
+        }
+      }
+      const newTabEntryDiv = this._tabsListEl.children[this.tabEntryIndex];
+      newTabEntryDiv.children[0].setAttribute("tabindex", "0");
+      (newTabEntryDiv.children[0] as HTMLElement).focus(); // focus on the a tag inside the div for click event
+    }
+  };
+  drawTabsList() {
+    this._tabsListEl = document.createElement("div");
+    addClass(this._tabsListEl, "tabsList");
+    this._tabsListEl.setAttribute("role", "tablist");
+    this._tabsListEl.addEventListener("keydown", this.handleKeydownArrowKeys);
+
+    sortablejs.default.create(this._tabsListEl, {
+      group: "tabList",
+      animation: 100,
+      onUpdate: (_ev: any) => {
+        const tabs = this.deriveTabOrderFromEls();
+        this.yasgui.emit("tabOrderChanged", this.yasgui, tabs);
+        this.yasgui.persistentConfig.setTabOrder(tabs);
+      },
+      filter: ".addTab",
+      onMove: (ev: any, _origEv: any) => {
+        return hasClass(ev.related, "tab");
+      },
+    });
+
+    this.addTabEl = document.createElement("div");
+    this.addTabEl.setAttribute("role", "presentation");
+
+    const addTabLink = document.createElement("button");
+    addTabLink.className = "addTab";
+    addTabLink.textContent = "+";
+    addTabLink.title = "Add tab";
+    addTabLink.setAttribute("aria-label", "Add a new tab");
+    addTabLink.addEventListener("click", this.handleAddNewTab);
+    addTabLink.addEventListener("focus", () => {
+      // sets aria tabEntryIndex to active tab
+      // this.tabEntryIndex = this.getActiveIndex();
+      if (!this._tabsListEl) return;
+      this.tabEntryIndex = this._tabsListEl.childElementCount - 1; // sets tabEntry to add tab, visually makes sense, not sure about accessibility-wise
+    });
+    addTabLink.addEventListener("blur", () => {
+      addTabLink.setAttribute("tabindex", "0"); // maintains tabability
+    });
+    this.addTabEl.appendChild(addTabLink);
+    this._tabsListEl.appendChild(this.addTabEl);
+    this.tabContextMenu = TabContextMenu.get(
+      this.yasgui,
+      this.yasgui.config.contextMenuContainer ? this.yasgui.config.contextMenuContainer : this._tabsListEl,
+    );
+    return this._tabsListEl;
+  }
+  handleAddNewTab = (event: Event) => {
+    event.preventDefault();
+    this.yasgui.addTab(true);
+  };
+  // drawPanels() {
+  //   this.tabPanelsEl = document.createElement("div");
+  //   return this.tabsListEl;
+  // }
+  public addTab(tabId: string, index?: number) {
+    return this.drawTab(tabId, index);
+  }
+  public deriveTabOrderFromEls() {
+    const tabs: string[] = [];
+    if (this._tabsListEl) {
+      for (let i = 0; i < this._tabsListEl.children.length; i++) {
+        const child = this._tabsListEl.children[i]; //this is the tab div
+        const anchorTag = child.children[0]; //this one has an href
+        if (anchorTag) {
+          const href = (<HTMLAnchorElement>anchorTag).href;
+          if (href && href.indexOf("#") >= 0) {
+            tabs.push(href.substr(href.indexOf("#") + 1));
+          }
+        }
+      }
+    }
+    return tabs;
+  }
+
+  public selectTab(tabId: string) {
+    this._selectedTab = tabId;
+    for (const id in this._tabs) {
+      this._tabs[id].active(this._selectedTab === id);
+    }
+  }
+
+  public drawTab(tabId: string, index?: number) {
+    this._tabs[tabId] = new TabListEl(this.yasgui, this, tabId);
+    const tabConf = this.yasgui.persistentConfig.getTab(tabId);
+    if (index !== undefined && index < this.yasgui.persistentConfig.getTabs().length - 1) {
+      this._tabsListEl?.insertBefore(
+        this._tabs[tabId].draw(tabConf.name),
+        this._tabs[this.yasgui.persistentConfig.getTabs()[index + 1]].tabEl || null,
+      );
+    } else {
+      this._tabsListEl?.insertBefore(this._tabs[tabId].draw(tabConf.name), this.addTabEl || null);
+    }
+  }
+  public destroy() {
+    for (const tabId in this._tabs) {
+      const tab = this._tabs[tabId];
+      tab.delete();
+    }
+    this._tabs = {};
+    this.tabContextMenu?.destroy();
+    this._tabsListEl?.remove();
+    this._tabsListEl = undefined;
+  }
+}
+
+export default TabList;