Convert `Acp/Ui/Page/Menu` to TypeScript
authorAlexander Ebert <ebert@woltlab.com>
Mon, 30 Nov 2020 01:02:29 +0000 (02:02 +0100)
committerAlexander Ebert <ebert@woltlab.com>
Mon, 30 Nov 2020 01:02:29 +0000 (02:02 +0100)
package-lock.json
package.json
wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Page/Menu.js
wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Page/Menu.js [deleted file]
wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Page/Menu.ts [new file with mode: 0644]

index 222da74e3751f62cbdbece40b8f82de2438597cd..3122337da696afcadcd128055df169dd24558bf4 100644 (file)
@@ -16,6 +16,7 @@
         "tslib": "^2.0.3"
       },
       "devDependencies": {
+        "@types/perfect-scrollbar": "^0.6.1",
         "@typescript-eslint/eslint-plugin": "^4.6.0",
         "@typescript-eslint/parser": "^4.6.0",
         "@woltlab/zxcvbn": "git+https://github.com/WoltLab/zxcvbn.git#master",
       "integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==",
       "dev": true
     },
+    "node_modules/@types/perfect-scrollbar": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@types/perfect-scrollbar/-/perfect-scrollbar-0.6.1.tgz",
+      "integrity": "sha1-HtNyph9rywlKnS0ZQSdLGFuVpT8=",
+      "dev": true,
+      "dependencies": {
+        "@types/jquery": "*"
+      }
+    },
     "node_modules/@types/pica": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/@types/pica/-/pica-5.1.2.tgz",
       "integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==",
       "dev": true
     },
+    "@types/perfect-scrollbar": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@types/perfect-scrollbar/-/perfect-scrollbar-0.6.1.tgz",
+      "integrity": "sha1-HtNyph9rywlKnS0ZQSdLGFuVpT8=",
+      "dev": true,
+      "requires": {
+        "@types/jquery": "*"
+      }
+    },
     "@types/pica": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/@types/pica/-/pica-5.1.2.tgz",
index 25b2d34e878666214724b17220014cf337868e13..58b3562c7a7ded9e13d9e2f7b58c794bf6667583 100644 (file)
@@ -2,6 +2,7 @@
   "name": "@woltlab/wcf",
   "version": "5.4.0",
   "devDependencies": {
+    "@types/perfect-scrollbar": "^0.6.1",
     "@typescript-eslint/eslint-plugin": "^4.6.0",
     "@typescript-eslint/parser": "^4.6.0",
     "@woltlab/zxcvbn": "git+https://github.com/WoltLab/zxcvbn.git#master",
index e6dcbb28dc74180ce6ea611e77909fece40bcaf8..5d1d8965dfa7f6d7a6f2fff110c901b6406358ee 100644 (file)
 /**
  * Provides the ACP menu navigation.
  *
- * @author     Alexander Ebert
- * @copyright  2001-2019 WoltLab GmbH
- * @license    GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- * @module     WoltLabSuite/Core/Acp/Ui/Page/Menu
+ * @author  Alexander Ebert
+ * @copyright  2001-2019 WoltLab GmbH
+ * @license  GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module  WoltLabSuite/Core/Acp/Ui/Page/Menu
  */
-define(['Dictionary', 'EventHandler', 'perfect-scrollbar', 'Ui/Screen'], function (Dictionary, EventHandler, perfectScrollbar, UiScreen) {
+define(["require", "exports", "tslib", "perfect-scrollbar", "../../../Event/Handler", "../../../Ui/Screen"], function (require, exports, tslib_1, perfect_scrollbar_1, EventHandler, UiScreen) {
     "use strict";
-    var _acpPageMenu = elById('acpPageMenu');
-    var _acpPageSubMenu = elById('acpPageSubMenu');
-    var _activeMenuItem = '';
-    var _menuItems = new Dictionary();
-    var _menuItemContainers = new Dictionary();
-    var _pageContainer = elById('pageContainer');
-    var _perfectScrollbarActive = false;
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.init = void 0;
+    perfect_scrollbar_1 = tslib_1.__importDefault(perfect_scrollbar_1);
+    EventHandler = tslib_1.__importStar(EventHandler);
+    UiScreen = tslib_1.__importStar(UiScreen);
+    const _acpPageMenu = document.getElementById("acpPageMenu");
+    const _acpPageSubMenu = document.getElementById("acpPageSubMenu");
+    let _activeMenuItem = "";
+    const _menuItems = new Map();
+    const _menuItemContainers = new Map();
+    const _pageContainer = document.getElementById("pageContainer");
+    let _perfectScrollbarActive = false;
     /**
-     * @exports     WoltLabSuite/Core/Acp/Ui/Page/Menu
+     * Initializes the ACP menu navigation.
      */
-    return {
-        /**
-         * Initializes the ACP menu navigation.
-         */
-        init: function () {
-            elBySelAll('.acpPageMenuLink', null, (function (link) {
-                var menuItem = elData(link, 'menu-item');
-                if (link.classList.contains('active')) {
-                    _activeMenuItem = menuItem;
-                }
-                link.addEventListener('click', this._toggle.bind(this));
-                _menuItems.set(menuItem, link);
-            }).bind(this));
-            elBySelAll('.acpPageSubMenuCategoryList', null, function (container) {
-                _menuItemContainers.set(elData(container, 'menu-item'), container);
-            });
-            // menu is missing on the login page or during WCFSetup
-            if (_acpPageMenu === null) {
-                return;
-            }
-            var enablePerfectScrollbar = function () {
-                var options = {
-                    wheelPropagation: false,
-                    swipePropagation: false,
-                    suppressScrollX: true
-                };
-                perfectScrollbar.initialize(_acpPageMenu, options);
-                perfectScrollbar.initialize(_acpPageSubMenu, options);
-                _perfectScrollbarActive = true;
-            };
-            UiScreen.on('screen-lg', {
-                match: enablePerfectScrollbar,
-                unmatch: function () {
-                    perfectScrollbar.destroy(_acpPageMenu);
-                    perfectScrollbar.destroy(_acpPageSubMenu);
-                    _perfectScrollbarActive = false;
-                },
-                setup: enablePerfectScrollbar
-            });
-            window.addEventListener('resize', function () {
-                if (_perfectScrollbarActive) {
-                    perfectScrollbar.update(_acpPageMenu);
-                    perfectScrollbar.update(_acpPageSubMenu);
-                }
-            });
-        },
-        /**
-         * Toggles a menu item.
-         *
-         * @param       {Event}         event           event object
-         * @protected
-         */
-        _toggle: function (event) {
-            event.preventDefault();
-            event.stopPropagation();
-            var link = event.currentTarget;
-            var menuItem = elData(link, 'menu-item');
-            var acpPageSubMenuActive = false;
-            // remove active marking from currently active menu
-            if (_activeMenuItem) {
-                _menuItems.get(_activeMenuItem).classList.remove('active');
-                _menuItemContainers.get(_activeMenuItem).classList.remove('active');
-            }
-            if (_activeMenuItem === menuItem) {
-                // current item was active before
-                _activeMenuItem = '';
-            }
-            else {
-                link.classList.add('active');
-                _menuItemContainers.get(menuItem).classList.add('active');
+    function init() {
+        document.querySelectorAll(".acpPageMenuLink").forEach((link) => {
+            const menuItem = link.dataset.menuItem;
+            if (link.classList.contains("active")) {
                 _activeMenuItem = menuItem;
-                acpPageSubMenuActive = true;
             }
-            _pageContainer.classList[(acpPageSubMenuActive ? 'add' : 'remove')]('acpPageSubMenuActive');
+            link.addEventListener("click", (ev) => toggle(ev));
+            _menuItems.set(menuItem, link);
+        });
+        document.querySelectorAll(".acpPageSubMenuCategoryList").forEach((container) => {
+            const menuItem = container.dataset.menuItem;
+            _menuItemContainers.set(menuItem, container);
+        });
+        // menu is missing on the login page or during WCFSetup
+        if (_acpPageMenu === null) {
+            return;
+        }
+        UiScreen.on("screen-lg", {
+            match: enablePerfectScrollbar,
+            unmatch: disablePerfectScrollbar,
+            setup: enablePerfectScrollbar,
+        });
+        window.addEventListener("resize", () => {
             if (_perfectScrollbarActive) {
-                _acpPageSubMenu.scrollTop = 0;
-                perfectScrollbar.update(_acpPageSubMenu);
+                perfect_scrollbar_1.default.update(_acpPageMenu);
+                perfect_scrollbar_1.default.update(_acpPageSubMenu);
             }
-            EventHandler.fire('com.woltlab.wcf.AcpMenu', 'resize');
+        });
+    }
+    exports.init = init;
+    function enablePerfectScrollbar() {
+        const options = {
+            wheelPropagation: false,
+            swipePropagation: false,
+            suppressScrollX: true,
+        };
+        perfect_scrollbar_1.default.initialize(_acpPageMenu, options);
+        perfect_scrollbar_1.default.initialize(_acpPageSubMenu, options);
+        _perfectScrollbarActive = true;
+    }
+    function disablePerfectScrollbar() {
+        perfect_scrollbar_1.default.destroy(_acpPageMenu);
+        perfect_scrollbar_1.default.destroy(_acpPageSubMenu);
+        _perfectScrollbarActive = false;
+    }
+    /**
+     * Toggles a menu item.
+     */
+    function toggle(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const link = event.currentTarget;
+        const menuItem = link.dataset.menuItem;
+        let acpPageSubMenuActive = false;
+        // remove active marking from currently active menu
+        if (_activeMenuItem) {
+            _menuItems.get(_activeMenuItem).classList.remove("active");
+            _menuItemContainers.get(_activeMenuItem).classList.remove("active");
+        }
+        if (_activeMenuItem === menuItem) {
+            // current item was active before
+            _activeMenuItem = "";
+        }
+        else {
+            link.classList.add("active");
+            _menuItemContainers.get(menuItem).classList.add("active");
+            _activeMenuItem = menuItem;
+            acpPageSubMenuActive = true;
+        }
+        if (acpPageSubMenuActive) {
+            _pageContainer.classList.add("acpPageSubMenuActive");
+        }
+        else {
+            _pageContainer.classList.remove("acpPageSubMenuActive");
+        }
+        if (_perfectScrollbarActive) {
+            _acpPageSubMenu.scrollTop = 0;
+            perfect_scrollbar_1.default.update(_acpPageSubMenu);
         }
-    };
+        EventHandler.fire("com.woltlab.wcf.AcpMenu", "resize");
+    }
 });
diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Page/Menu.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Page/Menu.js
deleted file mode 100644 (file)
index ac0eaf7..0000000
+++ /dev/null
@@ -1,121 +0,0 @@
-/**
- * Provides the ACP menu navigation.
- * 
- * @author     Alexander Ebert
- * @copyright  2001-2019 WoltLab GmbH
- * @license    GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- * @module     WoltLabSuite/Core/Acp/Ui/Page/Menu
- */
-define(['Dictionary', 'EventHandler', 'perfect-scrollbar', 'Ui/Screen'], function(Dictionary, EventHandler, perfectScrollbar, UiScreen) {
-       "use strict";
-       
-       var _acpPageMenu = elById('acpPageMenu');
-       var _acpPageSubMenu = elById('acpPageSubMenu');
-       var _activeMenuItem = '';
-       var _menuItems = new Dictionary();
-       var _menuItemContainers = new Dictionary();
-       var _pageContainer = elById('pageContainer');
-       var _perfectScrollbarActive = false;
-       
-       /**
-        * @exports     WoltLabSuite/Core/Acp/Ui/Page/Menu
-        */
-       return {
-               /**
-                * Initializes the ACP menu navigation.
-                */
-               init: function() {
-                       elBySelAll('.acpPageMenuLink', null, (function(link) {
-                               var menuItem = elData(link, 'menu-item');
-                               if (link.classList.contains('active')) {
-                                       _activeMenuItem = menuItem;
-                               }
-                               
-                               link.addEventListener('click', this._toggle.bind(this));
-                               
-                               _menuItems.set(menuItem, link);
-                       }).bind(this));
-                       
-                       elBySelAll('.acpPageSubMenuCategoryList', null, function(container) {
-                               _menuItemContainers.set(elData(container, 'menu-item'), container);
-                       });
-                       
-                       // menu is missing on the login page or during WCFSetup
-                       if (_acpPageMenu === null) {
-                               return;
-                       }
-                       
-                       var enablePerfectScrollbar = function () {
-                               var options = {
-                                       wheelPropagation: false,
-                                       swipePropagation: false,
-                                       suppressScrollX: true
-                               };
-                               
-                               perfectScrollbar.initialize(_acpPageMenu, options);
-                               perfectScrollbar.initialize(_acpPageSubMenu, options);
-                               
-                               _perfectScrollbarActive = true;
-                       };
-                       
-                       UiScreen.on('screen-lg', {
-                               match: enablePerfectScrollbar,
-                               unmatch: function () {
-                                       perfectScrollbar.destroy(_acpPageMenu);
-                                       perfectScrollbar.destroy(_acpPageSubMenu);
-                                       
-                                       _perfectScrollbarActive = false;
-                               },
-                               setup: enablePerfectScrollbar
-                       });
-                       
-                       window.addEventListener('resize', function () {
-                               if (_perfectScrollbarActive) {
-                                       perfectScrollbar.update(_acpPageMenu);
-                                       perfectScrollbar.update(_acpPageSubMenu);
-                               }
-                       })
-               },
-               
-               /**
-                * Toggles a menu item.
-                * 
-                * @param       {Event}         event           event object
-                * @protected
-                */
-               _toggle: function(event) {
-                       event.preventDefault();
-                       event.stopPropagation();
-                       
-                       var link = event.currentTarget;
-                       var menuItem = elData(link, 'menu-item');
-                       var acpPageSubMenuActive = false;
-                       
-                       // remove active marking from currently active menu
-                       if (_activeMenuItem) {
-                               _menuItems.get(_activeMenuItem).classList.remove('active');
-                               _menuItemContainers.get(_activeMenuItem).classList.remove('active');
-                       }
-                       
-                       if (_activeMenuItem === menuItem) {
-                               // current item was active before
-                               _activeMenuItem = '';
-                       }
-                       else {
-                               link.classList.add('active');
-                               _menuItemContainers.get(menuItem).classList.add('active');
-                               
-                               _activeMenuItem = menuItem;
-                               acpPageSubMenuActive = true;
-                       }
-                       
-                       _pageContainer.classList[(acpPageSubMenuActive ? 'add' : 'remove')]('acpPageSubMenuActive');
-                       if (_perfectScrollbarActive) {
-                               _acpPageSubMenu.scrollTop = 0;
-                               perfectScrollbar.update(_acpPageSubMenu);
-                       }
-                       
-                       EventHandler.fire('com.woltlab.wcf.AcpMenu', 'resize');
-               }
-       };
-});
diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Page/Menu.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Page/Menu.ts
new file mode 100644 (file)
index 0000000..175d350
--- /dev/null
@@ -0,0 +1,122 @@
+/**
+ * Provides the ACP menu navigation.
+ *
+ * @author  Alexander Ebert
+ * @copyright  2001-2019 WoltLab GmbH
+ * @license  GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module  WoltLabSuite/Core/Acp/Ui/Page/Menu
+ */
+
+import perfectScrollbar from "perfect-scrollbar";
+
+import * as EventHandler from "../../../Event/Handler";
+import * as UiScreen from "../../../Ui/Screen";
+
+const _acpPageMenu = document.getElementById("acpPageMenu") as HTMLElement;
+const _acpPageSubMenu = document.getElementById("acpPageSubMenu") as HTMLElement;
+let _activeMenuItem = "";
+const _menuItems = new Map<string, HTMLAnchorElement>();
+const _menuItemContainers = new Map<string, HTMLOListElement>();
+const _pageContainer = document.getElementById("pageContainer") as HTMLElement;
+let _perfectScrollbarActive = false;
+
+/**
+ * Initializes the ACP menu navigation.
+ */
+export function init(): void {
+  document.querySelectorAll(".acpPageMenuLink").forEach((link: HTMLAnchorElement) => {
+    const menuItem = link.dataset.menuItem!;
+    if (link.classList.contains("active")) {
+      _activeMenuItem = menuItem;
+    }
+
+    link.addEventListener("click", (ev) => toggle(ev));
+
+    _menuItems.set(menuItem, link);
+  });
+
+  document.querySelectorAll(".acpPageSubMenuCategoryList").forEach((container: HTMLOListElement) => {
+    const menuItem = container.dataset.menuItem!;
+    _menuItemContainers.set(menuItem, container);
+  });
+
+  // menu is missing on the login page or during WCFSetup
+  if (_acpPageMenu === null) {
+    return;
+  }
+
+  UiScreen.on("screen-lg", {
+    match: enablePerfectScrollbar,
+    unmatch: disablePerfectScrollbar,
+    setup: enablePerfectScrollbar,
+  });
+
+  window.addEventListener("resize", () => {
+    if (_perfectScrollbarActive) {
+      perfectScrollbar.update(_acpPageMenu);
+      perfectScrollbar.update(_acpPageSubMenu);
+    }
+  });
+}
+
+function enablePerfectScrollbar(): void {
+  const options = {
+    wheelPropagation: false,
+    swipePropagation: false,
+    suppressScrollX: true,
+  };
+
+  perfectScrollbar.initialize(_acpPageMenu, options);
+  perfectScrollbar.initialize(_acpPageSubMenu, options);
+
+  _perfectScrollbarActive = true;
+}
+
+function disablePerfectScrollbar(): void {
+  perfectScrollbar.destroy(_acpPageMenu);
+  perfectScrollbar.destroy(_acpPageSubMenu);
+
+  _perfectScrollbarActive = false;
+}
+
+/**
+ * Toggles a menu item.
+ */
+function toggle(event: MouseEvent): void {
+  event.preventDefault();
+  event.stopPropagation();
+
+  const link = event.currentTarget as HTMLAnchorElement;
+  const menuItem = link.dataset.menuItem!;
+  let acpPageSubMenuActive = false;
+
+  // remove active marking from currently active menu
+  if (_activeMenuItem) {
+    _menuItems.get(_activeMenuItem)!.classList.remove("active");
+    _menuItemContainers.get(_activeMenuItem)!.classList.remove("active");
+  }
+
+  if (_activeMenuItem === menuItem) {
+    // current item was active before
+    _activeMenuItem = "";
+  } else {
+    link.classList.add("active");
+    _menuItemContainers.get(menuItem)!.classList.add("active");
+
+    _activeMenuItem = menuItem;
+    acpPageSubMenuActive = true;
+  }
+
+  if (acpPageSubMenuActive) {
+    _pageContainer.classList.add("acpPageSubMenuActive");
+  } else {
+    _pageContainer.classList.remove("acpPageSubMenuActive");
+  }
+
+  if (_perfectScrollbarActive) {
+    _acpPageSubMenu.scrollTop = 0;
+    perfectScrollbar.update(_acpPageSubMenu);
+  }
+
+  EventHandler.fire("com.woltlab.wcf.AcpMenu", "resize");
+}