From: Alexander Ebert Date: Fri, 30 Oct 2020 11:50:30 +0000 (+0100) Subject: Convert `Ui/Page/Menu/User` to TypeScript X-Git-Tag: 5.4.0_Alpha_1~660^2~22 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=631de7d6836f6015591a60211a6caa25b5a52e0e;p=GitHub%2FWoltLab%2FWCF.git Convert `Ui/Page/Menu/User` to TypeScript --- 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 1cf6690b80..9b8260b951 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/User.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/User.js @@ -1,66 +1,68 @@ /** * Provides the touch-friendly fullscreen user menu. * - * @author Alexander Ebert - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Ui/Page/Menu/User + * @author Alexander Ebert + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Ui/Page/Menu/User */ -define(['Core', 'EventHandler', 'Language', './Abstract'], function (Core, EventHandler, Language, UiPageMenuAbstract) { +define(["require", "exports", "tslib", "../../../Event/Handler", "../../../Language", "./Abstract"], function (require, exports, tslib_1, EventHandler, Language, Abstract_1) { "use strict"; - /** - * @constructor - */ - function UiPageMenuUser() { this.init(); } - Core.inherit(UiPageMenuUser, UiPageMenuAbstract, { + EventHandler = tslib_1.__importStar(EventHandler); + Language = tslib_1.__importStar(Language); + Abstract_1 = tslib_1.__importDefault(Abstract_1); + class UiPageMenuUser extends Abstract_1.default { /** * Initializes the touch-friendly fullscreen user menu. */ - init: function () { + constructor() { // check if user menu is actually empty - var menu = elBySel('#pageUserMenuMobile > .menuOverlayItemList'); - if (menu.childElementCount === 1 && menu.children[0].classList.contains('menuOverlayTitle')) { - elBySel('#pageHeader .userPanel').classList.add('hideUserPanel'); + const menu = document.querySelector("#pageUserMenuMobile > .menuOverlayItemList"); + if (menu.childElementCount === 1 && menu.children[0].classList.contains("menuOverlayTitle")) { + const userPanel = document.querySelector("#pageHeader .userPanel"); + userPanel.classList.add("hideUserPanel"); return; } - UiPageMenuUser._super.prototype.init.call(this, 'com.woltlab.wcf.UserMenuMobile', 'pageUserMenuMobile', '#pageHeader .userPanel'); - EventHandler.add('com.woltlab.wcf.userMenu', 'updateBadge', (function (data) { - elBySelAll('.menuOverlayItemBadge', this._menu, (function (item) { - if (elData(item, 'badge-identifier') === data.identifier) { - var badge = elBySel('.badge', item); - if (data.count) { - if (badge === null) { - badge = elCreate('span'); - badge.className = 'badge badgeUpdate'; - item.appendChild(badge); - } - badge.textContent = data.count; - } - else if (badge !== null) { - elRemove(badge); - } - this._updateButtonState(); - } - }).bind(this)); - }).bind(this)); - elAttr(this._button, 'aria-label', Language.get('wcf.menu.user')); - elAttr(this._button, 'role', 'button'); - }, - close: function (event) { + super("com.woltlab.wcf.UserMenuMobile", "pageUserMenuMobile", "#pageHeader .userPanel"); + EventHandler.add("com.woltlab.wcf.userMenu", "updateBadge", (data) => this.updateBadge(data)); + this.button.setAttribute("aria-label", Language.get("wcf.menu.user")); + this.button.setAttribute("role", "button"); + } + close(event) { // The user menu is not initialized if there are no items to display. - if (this._menu === undefined) { - return; + if (this.menu === undefined) { + return false; } - var dropdown = WCF.Dropdown.Interactive.Handler.getOpenDropdown(); + const dropdown = window.WCF.Dropdown.Interactive.Handler.getOpenDropdown(); if (dropdown) { - event.preventDefault(); - event.stopPropagation(); + if (event) { + event.preventDefault(); + event.stopPropagation(); + } dropdown.close(); + return true; } - else { - UiPageMenuUser._super.prototype.close.call(this, event); - } + return super.close(event); + } + updateBadge(data) { + this.menu.querySelectorAll(".menuOverlayItemBadge").forEach((item) => { + if (item.dataset.badgeIdentifier === data.identifier) { + let badge = item.querySelector(".badge"); + if (data.count) { + if (badge === null) { + badge = document.createElement("span"); + badge.className = "badge badgeUpdate"; + item.appendChild(badge); + } + badge.textContent = data.count.toString(); + } + else if (badge !== null) { + badge.remove(); + } + this.updateButtonState(); + } + }); } - }); + } return UiPageMenuUser; }); 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 e6e6a47ece..4c3a228fc3 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 @@ -42,7 +42,7 @@ abstract class UiPageMenuAbstract { private enabled: boolean = true; private readonly eventIdentifier: string; private readonly items = new Map(); - private readonly menu: HTMLElement; + protected readonly menu: HTMLElement; private removeActiveList = false; protected constructor(eventIdentifier: string, elementId: string, buttonSelector: string) { @@ -548,7 +548,7 @@ abstract class UiPageMenuAbstract { child.style.setProperty("transform", `translateX(${offset}%)`, ""); } - private updateButtonState(): void { + protected updateButtonState(): void { let hasNewContent = false; const itemList = this.menu.querySelector(".menuOverlayItemList"); this.menu.querySelectorAll(".badgeUpdate").forEach((badge) => { diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Menu/User.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Menu/User.js deleted file mode 100644 index 967740aef6..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Menu/User.js +++ /dev/null @@ -1,81 +0,0 @@ -/** - * Provides the touch-friendly fullscreen user menu. - * - * @author Alexander Ebert - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Ui/Page/Menu/User - */ -define(['Core', 'EventHandler', 'Language', './Abstract'], function(Core, EventHandler, Language, UiPageMenuAbstract) { - "use strict"; - - /** - * @constructor - */ - function UiPageMenuUser() { this.init(); } - Core.inherit(UiPageMenuUser, UiPageMenuAbstract, { - /** - * Initializes the touch-friendly fullscreen user menu. - */ - init: function() { - // check if user menu is actually empty - var menu = elBySel('#pageUserMenuMobile > .menuOverlayItemList'); - if (menu.childElementCount === 1 && menu.children[0].classList.contains('menuOverlayTitle')) { - elBySel('#pageHeader .userPanel').classList.add('hideUserPanel'); - return; - } - - UiPageMenuUser._super.prototype.init.call( - this, - 'com.woltlab.wcf.UserMenuMobile', - 'pageUserMenuMobile', - '#pageHeader .userPanel' - ); - - EventHandler.add('com.woltlab.wcf.userMenu', 'updateBadge', (function (data) { - elBySelAll('.menuOverlayItemBadge', this._menu, (function (item) { - if (elData(item, 'badge-identifier') === data.identifier) { - var badge = elBySel('.badge', item); - if (data.count) { - if (badge === null) { - badge = elCreate('span'); - badge.className = 'badge badgeUpdate'; - item.appendChild(badge); - } - - badge.textContent = data.count; - } - else if (badge !== null) { - elRemove(badge); - } - - this._updateButtonState(); - } - }).bind(this)); - }).bind(this)); - - elAttr(this._button, 'aria-label', Language.get('wcf.menu.user')); - elAttr(this._button, 'role', 'button'); - }, - - close: function (event) { - // The user menu is not initialized if there are no items to display. - if (this._menu === undefined) { - return; - } - - var dropdown = WCF.Dropdown.Interactive.Handler.getOpenDropdown(); - if (dropdown) { - event.preventDefault(); - event.stopPropagation(); - - dropdown.close(); - } - else { - UiPageMenuUser._super.prototype.close.call(this, event); - } - } - }); - - return UiPageMenuUser; -}); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Menu/User.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Menu/User.ts new file mode 100644 index 0000000000..396ec4abc0 --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Page/Menu/User.ts @@ -0,0 +1,83 @@ +/** + * Provides the touch-friendly fullscreen user menu. + * + * @author Alexander Ebert + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Ui/Page/Menu/User + */ + +import * as EventHandler from "../../../Event/Handler"; +import * as Language from "../../../Language"; +import UiPageMenuAbstract from "./Abstract"; + +interface EventPayload { + count: number; + identifier: string; +} + +class UiPageMenuUser extends UiPageMenuAbstract { + /** + * Initializes the touch-friendly fullscreen user menu. + */ + constructor() { + // check if user menu is actually empty + const menu = document.querySelector("#pageUserMenuMobile > .menuOverlayItemList")!; + if (menu.childElementCount === 1 && menu.children[0].classList.contains("menuOverlayTitle")) { + const userPanel = document.querySelector("#pageHeader .userPanel")!; + userPanel.classList.add("hideUserPanel"); + return; + } + + super("com.woltlab.wcf.UserMenuMobile", "pageUserMenuMobile", "#pageHeader .userPanel"); + + EventHandler.add("com.woltlab.wcf.userMenu", "updateBadge", (data) => this.updateBadge(data)); + + this.button.setAttribute("aria-label", Language.get("wcf.menu.user")); + this.button.setAttribute("role", "button"); + } + + close(event?: Event): boolean { + // The user menu is not initialized if there are no items to display. + if (this.menu === undefined) { + return false; + } + + const dropdown = window.WCF.Dropdown.Interactive.Handler.getOpenDropdown(); + if (dropdown) { + if (event) { + event.preventDefault(); + event.stopPropagation(); + } + + dropdown.close(); + + return true; + } + + return super.close(event); + } + + private updateBadge(data: EventPayload): void { + this.menu.querySelectorAll(".menuOverlayItemBadge").forEach((item: HTMLElement) => { + if (item.dataset.badgeIdentifier === data.identifier) { + let badge = item.querySelector(".badge"); + if (data.count) { + if (badge === null) { + badge = document.createElement("span"); + badge.className = "badge badgeUpdate"; + item.appendChild(badge); + } + + badge.textContent = data.count.toString(); + } else if (badge !== null) { + badge.remove(); + } + + this.updateButtonState(); + } + }); + } +} + +export = UiPageMenuUser;