/**
* Provides the touch-friendly fullscreen user 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/Ui/Page/Menu/User
+ * @author Alexander Ebert
+ * @copyright 2001-2019 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @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;
});
private enabled: boolean = true;
private readonly eventIdentifier: string;
private readonly items = new Map<HTMLAnchorElement, ItemData>();
- private readonly menu: HTMLElement;
+ protected readonly menu: HTMLElement;
private removeActiveList = false;
protected constructor(eventIdentifier: string, elementId: string, buttonSelector: string) {
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) => {
+++ /dev/null
-/**
- * Provides the touch-friendly fullscreen user 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/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;
-});
--- /dev/null
+/**
+ * Provides the touch-friendly fullscreen user 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/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;
projects / GitHub / WoltLab / WCF.git / commitdiff