"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",
"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",
/**
* 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");
+ }
});
+++ /dev/null
-/**
- * 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');
- }
- };
-});
--- /dev/null
+/**
+ * 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");
+}