From 8db6f6db184b033ddd2b01f4c6206d004f60e034 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Sat, 31 Oct 2020 00:46:36 +0100 Subject: [PATCH] Convert `Ui/User/Profile/Menu/Item/Abstract` to TypeScript --- .../Ui/User/Profile/Menu/Item/Abstract.js | 111 ++++++--------- .../Ui/User/Profile/Menu/Item/Abstract.js | 129 ------------------ .../Ui/User/Profile/Menu/Item/Abstract.ts | 109 +++++++++++++++ 3 files changed, 153 insertions(+), 196 deletions(-) delete mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/Profile/Menu/Item/Abstract.js create mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/Profile/Menu/Item/Abstract.ts diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Profile/Menu/Item/Abstract.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Profile/Menu/Item/Abstract.js index e9153bbb91..976d53d1fe 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Profile/Menu/Item/Abstract.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Profile/Menu/Item/Abstract.js @@ -1,115 +1,92 @@ /** * Default implementation for user interaction menu items used in the user profile. * - * @author Alexander Ebert - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Ui/User/Profile/Menu/Item/Abstract + * @author Alexander Ebert + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Ui/User/Profile/Menu/Item/Abstract */ -define(['Ajax', 'Dom/Util'], function (Ajax, DomUtil) { +define(["require", "exports", "tslib", "../../../../../Ajax"], function (require, exports, tslib_1, Ajax) { "use strict"; - /** - * Creates a new user profile menu item. - * - * @param {int} userId user id - * @param {boolean} isActive true if item is initially active - * @constructor - */ - function UiUserProfileMenuItemAbstract(userId, isActive) { } - UiUserProfileMenuItemAbstract.prototype = { + Ajax = tslib_1.__importStar(Ajax); + class UiUserProfileMenuItemAbstract { /** * Creates a new user profile menu item. - * - * @param {int} userId user id - * @param {boolean} isActive true if item is initially active */ - init: function (userId, isActive) { + constructor(userId, isActive) { + this._button = document.createElement("a"); + this._listItem = document.createElement("li"); this._userId = userId; - this._isActive = (isActive !== false); + this._isActive = isActive; this._initButton(); this._updateButton(); - }, + } /** * Initializes the menu item. - * - * @protected */ - _initButton: function () { - var button = elCreate('a'); - button.href = '#'; - button.addEventListener('click', this._toggle.bind(this)); - var listItem = elCreate('li'); - listItem.appendChild(button); - var menu = elBySel('.userProfileButtonMenu[data-menu="interaction"]'); - DomUtil.prepend(listItem, menu); - this._button = button; - this._listItem = listItem; - }, + _initButton() { + this._button.href = "#"; + this._button.addEventListener("click", (ev) => this._toggle(ev)); + this._listItem.appendChild(this._button); + const menu = document.querySelector(`.userProfileButtonMenu[data-menu="interaction"]`); + menu.insertAdjacentElement("afterbegin", this._listItem); + } /** * Handles clicks on the menu item button. - * - * @param {Event} event event object - * @protected */ - _toggle: function (event) { + _toggle(event) { event.preventDefault(); Ajax.api(this, { actionName: this._getAjaxActionName(), parameters: { data: { - userID: this._userId - } - } + userID: this._userId, + }, + }, }); - }, + } /** * Updates the button state and label. * * @protected */ - _updateButton: function () { + _updateButton() { this._button.textContent = this._getLabel(); - this._listItem.classList[(this._isActive ? 'add' : 'remove')]('active'); - }, + if (this._isActive) { + this._listItem.classList.add("active"); + } + else { + this._listItem.classList.remove("active"); + } + } /** * Returns the button label. - * - * @return {string} button label - * @protected - * @abstract */ - _getLabel: function () { + _getLabel() { + // This should be an abstract method, but cannot be marked as such for backwards compatibility. throw new Error("Implement me!"); - }, + } /** * Returns the Ajax action name. - * - * @return {string} ajax action name - * @protected - * @abstract */ - _getAjaxActionName: function () { + _getAjaxActionName() { + // This should be an abstract method, but cannot be marked as such for backwards compatibility. throw new Error("Implement me!"); - }, + } /** * Handles successful Ajax requests. - * - * @protected - * @abstract */ - _ajaxSuccess: function () { + _ajaxSuccess() { + // This should be an abstract method, but cannot be marked as such for backwards compatibility. throw new Error("Implement me!"); - }, + } /** * Returns the default Ajax request data - * - * @return {Object} ajax request data - * @protected - * @abstract */ - _ajaxSetup: function () { + _ajaxSetup() { + // This should be an abstract method, but cannot be marked as such for backwards compatibility. throw new Error("Implement me!"); } - }; + } return UiUserProfileMenuItemAbstract; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/Profile/Menu/Item/Abstract.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/Profile/Menu/Item/Abstract.js deleted file mode 100644 index 2249fa1efb..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/Profile/Menu/Item/Abstract.js +++ /dev/null @@ -1,129 +0,0 @@ -/** - * Default implementation for user interaction menu items used in the user profile. - * - * @author Alexander Ebert - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Ui/User/Profile/Menu/Item/Abstract - */ -define(['Ajax', 'Dom/Util'], function(Ajax, DomUtil) { - "use strict"; - - /** - * Creates a new user profile menu item. - * - * @param {int} userId user id - * @param {boolean} isActive true if item is initially active - * @constructor - */ - function UiUserProfileMenuItemAbstract(userId, isActive) {} - UiUserProfileMenuItemAbstract.prototype = { - /** - * Creates a new user profile menu item. - * - * @param {int} userId user id - * @param {boolean} isActive true if item is initially active - */ - init: function(userId, isActive) { - this._userId = userId; - this._isActive = (isActive !== false); - - this._initButton(); - this._updateButton(); - }, - - /** - * Initializes the menu item. - * - * @protected - */ - _initButton: function() { - var button = elCreate('a'); - button.href = '#'; - button.addEventListener('click', this._toggle.bind(this)); - - var listItem = elCreate('li'); - listItem.appendChild(button); - - var menu = elBySel('.userProfileButtonMenu[data-menu="interaction"]'); - DomUtil.prepend(listItem, menu); - - this._button = button; - this._listItem = listItem; - }, - - /** - * Handles clicks on the menu item button. - * - * @param {Event} event event object - * @protected - */ - _toggle: function(event) { - event.preventDefault(); - - Ajax.api(this, { - actionName: this._getAjaxActionName(), - parameters: { - data: { - userID: this._userId - } - } - }); - }, - - /** - * Updates the button state and label. - * - * @protected - */ - _updateButton: function() { - this._button.textContent = this._getLabel(); - this._listItem.classList[(this._isActive ? 'add' : 'remove')]('active'); - }, - - /** - * Returns the button label. - * - * @return {string} button label - * @protected - * @abstract - */ - _getLabel: function() { - throw new Error("Implement me!"); - }, - - /** - * Returns the Ajax action name. - * - * @return {string} ajax action name - * @protected - * @abstract - */ - _getAjaxActionName: function() { - throw new Error("Implement me!"); - }, - - /** - * Handles successful Ajax requests. - * - * @protected - * @abstract - */ - _ajaxSuccess: function() { - throw new Error("Implement me!"); - }, - - /** - * Returns the default Ajax request data - * - * @return {Object} ajax request data - * @protected - * @abstract - */ - _ajaxSetup: function() { - throw new Error("Implement me!"); - } - }; - - return UiUserProfileMenuItemAbstract; -}); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/Profile/Menu/Item/Abstract.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/Profile/Menu/Item/Abstract.ts new file mode 100644 index 0000000000..311c89ede7 --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/Profile/Menu/Item/Abstract.ts @@ -0,0 +1,109 @@ +/** + * Default implementation for user interaction menu items used in the user profile. + * + * @author Alexander Ebert + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Ui/User/Profile/Menu/Item/Abstract + */ + +import * as Ajax from "../../../../../Ajax"; +import { AjaxCallbackObject, RequestOptions } from "../../../../../Ajax/Data"; + +abstract class UiUserProfileMenuItemAbstract implements AjaxCallbackObject { + readonly _button = document.createElement("a"); + readonly _isActive: boolean; + readonly _listItem = document.createElement("li"); + readonly _userId: number; + + /** + * Creates a new user profile menu item. + */ + protected constructor(userId: number, isActive: boolean) { + this._userId = userId; + this._isActive = isActive; + + this._initButton(); + this._updateButton(); + } + + /** + * Initializes the menu item. + */ + protected _initButton(): void { + this._button.href = "#"; + this._button.addEventListener("click", (ev) => this._toggle(ev)); + this._listItem.appendChild(this._button); + + const menu = document.querySelector(`.userProfileButtonMenu[data-menu="interaction"]`) as HTMLElement; + menu.insertAdjacentElement("afterbegin", this._listItem); + } + + /** + * Handles clicks on the menu item button. + */ + protected _toggle(event: MouseEvent): void { + event.preventDefault(); + + Ajax.api(this, { + actionName: this._getAjaxActionName(), + parameters: { + data: { + userID: this._userId, + }, + }, + }); + } + + /** + * Updates the button state and label. + * + * @protected + */ + protected _updateButton(): void { + this._button.textContent = this._getLabel(); + if (this._isActive) { + this._listItem.classList.add("active"); + } else { + this._listItem.classList.remove("active"); + } + } + + /** + * Returns the button label. + */ + protected _getLabel(): string { + // This should be an abstract method, but cannot be marked as such for backwards compatibility. + + throw new Error("Implement me!"); + } + + /** + * Returns the Ajax action name. + */ + protected _getAjaxActionName(): string { + // This should be an abstract method, but cannot be marked as such for backwards compatibility. + + throw new Error("Implement me!"); + } + + /** + * Handles successful Ajax requests. + */ + _ajaxSuccess(): void { + // This should be an abstract method, but cannot be marked as such for backwards compatibility. + + throw new Error("Implement me!"); + } + + /** + * Returns the default Ajax request data + */ + _ajaxSetup(): RequestOptions { + // This should be an abstract method, but cannot be marked as such for backwards compatibility. + + throw new Error("Implement me!"); + } +} + +export = UiUserProfileMenuItemAbstract; -- 2.20.1