From 9fbb1e7111f5fecb304c91f3d018f0334525024a Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Mon, 30 Nov 2020 02:02:29 +0100 Subject: [PATCH] Convert `Acp/Ui/Page/Menu` to TypeScript --- package-lock.json | 19 ++ package.json | 1 + .../js/WoltLabSuite/Core/Acp/Ui/Page/Menu.js | 183 +++++++++--------- .../ts/WoltLabSuite/Core/Acp/Ui/Page/Menu.js | 121 ------------ .../ts/WoltLabSuite/Core/Acp/Ui/Page/Menu.ts | 122 ++++++++++++ 5 files changed, 236 insertions(+), 210 deletions(-) delete mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Page/Menu.js create mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Page/Menu.ts diff --git a/package-lock.json b/package-lock.json index 222da74e37..3122337da6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", @@ -188,6 +189,15 @@ "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", @@ -1885,6 +1895,15 @@ "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", diff --git a/package.json b/package.json index 25b2d34e87..58b3562c7a 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Page/Menu.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Page/Menu.js index e6dcbb28dc..5d1d8965df 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Page/Menu.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Page/Menu.js @@ -1,102 +1,107 @@ /** * Provides the ACP menu navigation. * - * @author Alexander Ebert - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Acp/Ui/Page/Menu + * @author Alexander Ebert + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @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 index ac0eaf7a04..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Page/Menu.js +++ /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 - * @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 index 0000000000..175d35020f --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Page/Menu.ts @@ -0,0 +1,122 @@ +/** + * Provides the ACP menu navigation. + * + * @author Alexander Ebert + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @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(); +const _menuItemContainers = new Map(); +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"); +} -- 2.20.1