From f966059f4c2a26336737334177e2784c91628058 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Fri, 30 Oct 2020 12:15:57 +0100 Subject: [PATCH] Convert `Ui/Page/Menu/Main` to TypeScript --- .../js/WoltLabSuite/Core/Ui/Page/Menu/Main.js | 118 +++++++++--------- .../Core/Ui/Page/Menu/Abstract.ts | 2 +- .../ts/WoltLabSuite/Core/Ui/Page/Menu/Main.js | 117 ----------------- .../ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts | 108 ++++++++++++++++ 4 files changed, 166 insertions(+), 179 deletions(-) delete mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.js create mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js index 6585378930..47101207ba 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js @@ -1,88 +1,84 @@ /** * Provides the touch-friendly fullscreen main menu. * - * @author Alexander Ebert - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Ui/Page/Menu/Main + * @author Alexander Ebert + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Ui/Page/Menu/Main */ -define(['Core', 'Language', 'Dom/Traverse', './Abstract'], function (Core, Language, DomTraverse, UiPageMenuAbstract) { +define(["require", "exports", "tslib", "../../../Dom/Util", "../../../Language", "./Abstract"], function (require, exports, tslib_1, Util_1, Language, Abstract_1) { "use strict"; - var _optionsTitle = null, _hasItems = null, _list = null, _navigationList = null, _callbackClose = null; - /** - * @constructor - */ - function UiPageMenuMain() { this.init(); } - Core.inherit(UiPageMenuMain, UiPageMenuAbstract, { + Util_1 = tslib_1.__importDefault(Util_1); + Language = tslib_1.__importStar(Language); + Abstract_1 = tslib_1.__importDefault(Abstract_1); + class UiPageMenuMain extends Abstract_1.default { /** * Initializes the touch-friendly fullscreen main menu. */ - init: function () { - UiPageMenuMain._super.prototype.init.call(this, 'com.woltlab.wcf.MainMenuMobile', 'pageMainMenuMobile', '#pageHeader .mainMenu'); - _optionsTitle = elById('pageMainMenuMobilePageOptionsTitle'); - if (_optionsTitle !== null) { - _list = DomTraverse.childByClass(_optionsTitle, 'menuOverlayItemList'); - _navigationList = elBySel('.jsPageNavigationIcons'); - _callbackClose = (function (event) { - this.close(); - event.stopPropagation(); - }).bind(this); + constructor() { + super("com.woltlab.wcf.MainMenuMobile", "pageMainMenuMobile", "#pageHeader .mainMenu"); + this.hasItems = false; + this.title = document.getElementById("pageMainMenuMobilePageOptionsTitle"); + if (this.title !== null) { + this.navigationList = document.querySelector(".jsPageNavigationIcons"); } - elAttr(this._button, 'aria-label', Language.get('wcf.menu.page')); - elAttr(this._button, 'role', 'button'); - }, - open: function (event) { - if (!UiPageMenuMain._super.prototype.open.call(this, event)) { + this.button.setAttribute("aria-label", Language.get("wcf.menu.page")); + this.button.setAttribute("role", "button"); + } + open(event) { + if (!super.open(event)) { return false; } - if (_optionsTitle === null) { + if (this.title === null) { return true; } - _hasItems = _navigationList && _navigationList.childElementCount > 0; - if (_hasItems) { - var item, link; - while (_navigationList.childElementCount) { - item = _navigationList.children[0]; - item.classList.add('menuOverlayItem'); - item.classList.add('menuOverlayItemOption'); - item.addEventListener(WCF_CLICK_EVENT, _callbackClose); - link = item.children[0]; - link.classList.add('menuOverlayItemLink'); - link.classList.add('box24'); - link.children[1].classList.remove('invisible'); - link.children[1].classList.add('menuOverlayItemTitle'); - _optionsTitle.parentNode.insertBefore(item, _optionsTitle.nextSibling); + this.hasItems = this.navigationList && this.navigationList.childElementCount > 0; + if (this.hasItems) { + while (this.navigationList.childElementCount) { + const item = this.navigationList.children[0]; + item.classList.add("menuOverlayItem", "menuOverlayItemOption"); + item.addEventListener("click", (ev) => { + ev.stopPropagation(); + this.close(); + }); + const link = item.children[0]; + link.classList.add("menuOverlayItemLink"); + link.classList.add("box24"); + link.children[1].classList.remove("invisible"); + link.children[1].classList.add("menuOverlayItemTitle"); + this.title.insertAdjacentElement("afterend", item); } - elShow(_optionsTitle); + Util_1.default.show(this.title); } else { - elHide(_optionsTitle); + Util_1.default.hide(this.title); } return true; - }, - close: function (event) { - if (!UiPageMenuMain._super.prototype.close.call(this, event)) { + } + close(event) { + if (!super.close(event)) { return false; } - if (_hasItems) { - elHide(_optionsTitle); - var item = _optionsTitle.nextElementSibling; - var link; - while (item && item.classList.contains('menuOverlayItemOption')) { - item.classList.remove('menuOverlayItem'); - item.classList.remove('menuOverlayItemOption'); - item.removeEventListener(WCF_CLICK_EVENT, _callbackClose); - link = item.children[0]; - link.classList.remove('menuOverlayItemLink'); - link.classList.remove('box24'); - link.children[1].classList.add('invisible'); - link.children[1].classList.remove('menuOverlayItemTitle'); - _navigationList.appendChild(item); + if (this.hasItems) { + Util_1.default.hide(this.title); + let item = this.title.nextElementSibling; + while (item && item.classList.contains("menuOverlayItemOption")) { + item.classList.remove("menuOverlayItem", "menuOverlayItemOption"); + item.removeEventListener("click", (ev) => { + ev.stopPropagation(); + this.close(); + }); + const link = item.children[0]; + link.classList.remove("menuOverlayItemLink"); + link.classList.remove("box24"); + link.children[1].classList.add("invisible"); + link.children[1].classList.remove("menuOverlayItemTitle"); + this.navigationList.appendChild(item); item = item.nextElementSibling; } } return true; } - }); + } return UiPageMenuMain; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Menu/Abstract.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Menu/Abstract.ts index 1b9bff90dd..e6e6a47ece 100644 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Menu/Abstract.ts +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Menu/Abstract.ts @@ -37,7 +37,7 @@ interface ItemData { abstract class UiPageMenuAbstract { private readonly activeList: HTMLOListElement[] = []; - private readonly button: HTMLElement; + protected readonly button: HTMLElement; private depth = 0; private enabled: boolean = true; private readonly eventIdentifier: string; diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.js deleted file mode 100644 index 49752e692e..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.js +++ /dev/null @@ -1,117 +0,0 @@ -/** - * Provides the touch-friendly fullscreen main menu. - * - * @author Alexander Ebert - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Ui/Page/Menu/Main - */ -define(['Core', 'Language', 'Dom/Traverse', './Abstract'], function(Core, Language, DomTraverse, UiPageMenuAbstract) { - "use strict"; - - var _optionsTitle = null, _hasItems = null, _list = null, _navigationList = null, _callbackClose = null; - - /** - * @constructor - */ - function UiPageMenuMain() { this.init(); } - Core.inherit(UiPageMenuMain, UiPageMenuAbstract, { - /** - * Initializes the touch-friendly fullscreen main menu. - */ - init: function() { - UiPageMenuMain._super.prototype.init.call( - this, - 'com.woltlab.wcf.MainMenuMobile', - 'pageMainMenuMobile', - '#pageHeader .mainMenu' - ); - - _optionsTitle = elById('pageMainMenuMobilePageOptionsTitle'); - if (_optionsTitle !== null) { - _list = DomTraverse.childByClass(_optionsTitle, 'menuOverlayItemList'); - _navigationList = elBySel('.jsPageNavigationIcons'); - - _callbackClose = (function(event) { - this.close(); - event.stopPropagation(); - }).bind(this); - } - - elAttr(this._button, 'aria-label', Language.get('wcf.menu.page')); - elAttr(this._button, 'role', 'button'); - }, - - open: function (event) { - if (!UiPageMenuMain._super.prototype.open.call(this, event)) { - return false; - } - - if (_optionsTitle === null) { - return true; - } - - _hasItems = _navigationList && _navigationList.childElementCount > 0; - - if (_hasItems) { - var item, link; - while (_navigationList.childElementCount) { - item = _navigationList.children[0]; - - item.classList.add('menuOverlayItem'); - item.classList.add('menuOverlayItemOption'); - item.addEventListener(WCF_CLICK_EVENT, _callbackClose); - - link = item.children[0]; - link.classList.add('menuOverlayItemLink'); - link.classList.add('box24'); - - link.children[1].classList.remove('invisible'); - link.children[1].classList.add('menuOverlayItemTitle'); - - _optionsTitle.parentNode.insertBefore(item, _optionsTitle.nextSibling); - } - - elShow(_optionsTitle); - } - else { - elHide(_optionsTitle); - } - - return true; - }, - - close: function(event) { - if (!UiPageMenuMain._super.prototype.close.call(this, event)) { - return false; - } - - if (_hasItems) { - elHide(_optionsTitle); - - var item = _optionsTitle.nextElementSibling; - var link; - while (item && item.classList.contains('menuOverlayItemOption')) { - item.classList.remove('menuOverlayItem'); - item.classList.remove('menuOverlayItemOption'); - item.removeEventListener(WCF_CLICK_EVENT, _callbackClose); - - link = item.children[0]; - link.classList.remove('menuOverlayItemLink'); - link.classList.remove('box24'); - - link.children[1].classList.add('invisible'); - link.children[1].classList.remove('menuOverlayItemTitle'); - - _navigationList.appendChild(item); - - item = item.nextElementSibling; - } - } - - return true; - } - }); - - return UiPageMenuMain; -}); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts new file mode 100644 index 0000000000..ff8e6b616e --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts @@ -0,0 +1,108 @@ +/** + * Provides the touch-friendly fullscreen main menu. + * + * @author Alexander Ebert + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Ui/Page/Menu/Main + */ + +import DomUtil from "../../../Dom/Util"; +import * as Language from "../../../Language"; +import UiPageMenuAbstract from "./Abstract"; + +class UiPageMenuMain extends UiPageMenuAbstract { + private hasItems = false; + private readonly navigationList: HTMLOListElement; + private readonly title: HTMLElement; + + /** + * Initializes the touch-friendly fullscreen main menu. + */ + constructor() { + super("com.woltlab.wcf.MainMenuMobile", "pageMainMenuMobile", "#pageHeader .mainMenu"); + + this.title = document.getElementById("pageMainMenuMobilePageOptionsTitle") as HTMLElement; + if (this.title !== null) { + this.navigationList = document.querySelector(".jsPageNavigationIcons") as HTMLOListElement; + } + + this.button.setAttribute("aria-label", Language.get("wcf.menu.page")); + this.button.setAttribute("role", "button"); + } + + open(event?: MouseEvent): boolean { + if (!super.open(event)) { + return false; + } + + if (this.title === null) { + return true; + } + + this.hasItems = this.navigationList && this.navigationList.childElementCount > 0; + + if (this.hasItems) { + while (this.navigationList.childElementCount) { + const item = this.navigationList.children[0]; + + item.classList.add("menuOverlayItem", "menuOverlayItemOption"); + item.addEventListener("click", (ev) => { + ev.stopPropagation(); + + this.close(); + }); + + const link = item.children[0]; + link.classList.add("menuOverlayItemLink"); + link.classList.add("box24"); + + link.children[1].classList.remove("invisible"); + link.children[1].classList.add("menuOverlayItemTitle"); + + this.title.insertAdjacentElement("afterend", item); + } + + DomUtil.show(this.title); + } else { + DomUtil.hide(this.title); + } + + return true; + } + + close(event?: Event): boolean { + if (!super.close(event)) { + return false; + } + + if (this.hasItems) { + DomUtil.hide(this.title); + + let item = this.title.nextElementSibling; + while (item && item.classList.contains("menuOverlayItemOption")) { + item.classList.remove("menuOverlayItem", "menuOverlayItemOption"); + item.removeEventListener("click", (ev) => { + ev.stopPropagation(); + + this.close(); + }); + + const link = item.children[0]; + link.classList.remove("menuOverlayItemLink"); + link.classList.remove("box24"); + + link.children[1].classList.add("invisible"); + link.children[1].classList.remove("menuOverlayItemTitle"); + + this.navigationList.appendChild(item); + + item = item.nextElementSibling; + } + } + + return true; + } +} + +export = UiPageMenuMain; -- 2.20.1