Better code isolation, using consistent types

diff --git a/ts/WoltLabSuite/Core/Ui/Page/Menu/User.ts b/ts/WoltLabSuite/Core/Ui/Page/Menu/User.ts
index 55a7ee45e0e78d6be634b2a40810ee2170f70246..518e446fafa63ff1c94c1d8ddbad4f619071620f 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Page/Menu/User.ts
+++ b/ts/WoltLabSuite/Core/Ui/Page/Menu/User.ts
@@ -18,7 +18,7 @@ import { getElement as getControlPanelElement } from "../../User/Menu/ControlPan
 type CallbackOpen = (event: MouseEvent) => void;
 
 type Tab = HTMLAnchorElement;
-type TabPanel = HTMLDivElement;
+type TabPanel = HTMLElement;
 type TabComponents = [Tab, TabPanel];
 
 type TabData = {
@@ -30,9 +30,9 @@ type TabData = {
 export class PageMenuUser implements PageMenuProvider {
   private readonly callbackOpen: CallbackOpen;
   private readonly container: PageMenuContainer;
-  private readonly userMenuProviders = new Map<HTMLAnchorElement, UserMenuProvider>();
-  private readonly tabPanels = new Map<HTMLAnchorElement, HTMLDivElement>();
-  private readonly tabs: HTMLAnchorElement[] = [];
+  private readonly userMenuProviders = new Map<Tab, UserMenuProvider>();
+  private readonly tabPanels = new Map<Tab, HTMLElement>();
+  private readonly tabs: Tab[] = [];
   private readonly userMenu: HTMLElement;
 
   constructor() {
@@ -96,7 +96,7 @@ export class PageMenuUser implements PageMenuProvider {
     this.openTab(notifications);
   }
 
-  private openTab(tab: HTMLAnchorElement): void {
+  private openTab(tab: Tab): void {
     if (tab.getAttribute("aria-selected") === "true") {
       return;
     }
@@ -123,7 +123,7 @@ export class PageMenuUser implements PageMenuProvider {
     this.attachViewToPanel(tab);
   }
 
-  private attachViewToPanel(tab: HTMLAnchorElement): void {
+  private attachViewToPanel(tab: Tab): void {
     const origin = tab.dataset.origin!;
     const tabPanel = this.tabPanels.get(tab)!;
 
@@ -149,7 +149,7 @@ export class PageMenuUser implements PageMenuProvider {
   }
 
   private keydown(event: KeyboardEvent): void {
-    const tab = event.currentTarget as HTMLAnchorElement;
+    const tab = event.currentTarget as Tab;
 
     if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
@@ -191,7 +191,7 @@ export class PageMenuUser implements PageMenuProvider {
     this.tabs[index].focus();
   }
 
-  private buildTabMenu(): HTMLDivElement {
+  private buildTabMenu(): HTMLElement {
     const tabContainer = document.createElement("div");
     tabContainer.classList.add("pageMenuUserTabContainer");
 
@@ -201,12 +201,7 @@ export class PageMenuUser implements PageMenuProvider {
     tabList.setAttribute("aria-label", Language.get("TODO"));
     tabContainer.append(tabList);
 
-    const [tab, tabPanel] = this.buildControlPanelTab();
-    tabList.append(tab);
-    tabContainer.append(tabPanel);
-
-    this.tabs.push(tab);
-    this.tabPanels.set(tab, tabPanel);
+    this.buildControlPanelTab(tabList, tabContainer);
 
     getUserMenuProviders().forEach((provider) => {
       const [tab, tabPanel] = this.buildTab(provider);
@@ -237,7 +232,7 @@ export class PageMenuUser implements PageMenuProvider {
     return this.buildTabComponents(data);
   }
 
-  private buildControlPanelTab(): TabComponents {
+  private buildControlPanelTab(tabList: HTMLElement, tabContainer: HTMLElement): void {
     const panel = document.getElementById("topMenu")!;
     const userMenu = document.getElementById("userMenu")!;
     const userMenuButton = userMenu.querySelector("a")!;
@@ -248,7 +243,13 @@ export class PageMenuUser implements PageMenuProvider {
       origin: userMenu.id,
     };
 
-    return this.buildTabComponents(data);
+    const [tab, tabPanel] = this.buildTabComponents(data);
+
+    tabList.append(tab);
+    tabContainer.append(tabPanel);
+
+    this.tabs.push(tab);
+    this.tabPanels.set(tab, tabPanel);
   }
 
   private buildTabComponents(data: TabData): TabComponents {

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/User.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/User.js
index d2280f2d176b94a6d43a1b362610886453b5dc61..d364b66165fdf90be0635551ff0c2be6a20178b4 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/User.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/User.js
@@ -157,11 +157,7 @@ define(["require", "exports", "tslib", "./Container", "../../../Language", "../.
             tabList.setAttribute("role", "tablist");
             tabList.setAttribute("aria-label", Language.get("TODO"));
             tabContainer.append(tabList);
-            const [tab, tabPanel] = this.buildControlPanelTab();
-            tabList.append(tab);
-            tabContainer.append(tabPanel);
-            this.tabs.push(tab);
-            this.tabPanels.set(tab, tabPanel);
+            this.buildControlPanelTab(tabList, tabContainer);
             (0, Manager_1.getUserMenuProviders)().forEach((provider) => {
                 const [tab, tabPanel] = this.buildTab(provider);
                 tabList.append(tab);
@@ -183,7 +179,7 @@ define(["require", "exports", "tslib", "./Container", "../../../Language", "../.
             };
             return this.buildTabComponents(data);
         }
-        buildControlPanelTab() {
+        buildControlPanelTab(tabList, tabContainer) {
             const panel = document.getElementById("topMenu");
             const userMenu = document.getElementById("userMenu");
             const userMenuButton = userMenu.querySelector("a");
@@ -192,7 +188,11 @@ define(["require", "exports", "tslib", "./Container", "../../../Language", "../.
                 label: userMenuButton.dataset.title || userMenuButton.title,
                 origin: userMenu.id,
             };
-            return this.buildTabComponents(data);
+            const [tab, tabPanel] = this.buildTabComponents(data);
+            tabList.append(tab);
+            tabContainer.append(tabPanel);
+            this.tabs.push(tab);
+            this.tabPanels.set(tab, tabPanel);
         }
         buildTabComponents(data) {
             const tabId = Util_1.default.getUniqueId();