/**
* Provides the touch-friendly fullscreen main 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/Main
+ * @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/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;
});
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;
+++ /dev/null
-/**
- * Provides the touch-friendly fullscreen main 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/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;
-});
--- /dev/null
+/**
+ * Provides the touch-friendly fullscreen main 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/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;
projects / GitHub / WoltLab / WCF.git / commitdiff