From bdb31f493fe95872ab3c42ec712283d056469acf Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Mon, 2 Nov 2020 21:10:51 +0100 Subject: [PATCH] Convert `Ui/Reaction/Profile/Loader` to TypeScript --- .../Core/Ui/Reaction/Profile/Loader.js | 164 +++++++-------- .../Core/Ui/Reaction/Profile/Loader.js | 185 ----------------- .../Core/Ui/Reaction/Profile/Loader.ts | 192 ++++++++++++++++++ 3 files changed, 270 insertions(+), 271 deletions(-) delete mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Reaction/Profile/Loader.js create mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Reaction/Profile/Loader.ts diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Reaction/Profile/Loader.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Reaction/Profile/Loader.js index 07da03bb78..c9f52420a2 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Reaction/Profile/Loader.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Reaction/Profile/Loader.js @@ -1,159 +1,151 @@ /** * Handles the reaction list in the user profile. * - * @author Joshua Ruesweg - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Ui/Reaction/Profile/Loader + * @author Joshua Ruesweg + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Ui/Reaction/Profile/Loader * @since 5.2 */ -define(['Ajax', 'Core', 'Language'], function (Ajax, Core, Language) { +define(["require", "exports", "tslib", "../../../Ajax", "../../../Core", "../../../Dom/Util", "../../../Language"], function (require, exports, tslib_1, Ajax, Core, Util_1, Language) { "use strict"; - /** - * @constructor - */ - function UiReactionProfileLoader(userID) { this.init(userID); } - UiReactionProfileLoader.prototype = { + Ajax = tslib_1.__importStar(Ajax); + Core = tslib_1.__importStar(Core); + Util_1 = tslib_1.__importDefault(Util_1); + Language = tslib_1.__importStar(Language); + class UiReactionProfileLoader { /** * Initializes a new ReactionListLoader object. - * - * @param integer userID */ - init: function (userID) { - this._container = elById('likeList'); - this._userID = userID; + constructor(userID) { this._reactionTypeID = null; - this._targetType = 'received'; + this._targetType = "received"; + this._container = document.getElementById("likeList"); + this._userID = userID; this._options = { - parameters: [] + parameters: {}, }; if (!this._userID) { throw new Error("[WoltLabSuite/Core/Ui/Reaction/Profile/Loader] Invalid parameter 'userID' given."); } - var loadButtonList = elCreate('li'); - loadButtonList.className = 'likeListMore showMore'; - this._noMoreEntries = elCreate('small'); - this._noMoreEntries.innerHTML = Language.get('wcf.like.reaction.noMoreEntries'); - this._noMoreEntries.style.display = 'none'; + const loadButtonList = document.createElement("li"); + loadButtonList.className = "likeListMore showMore"; + this._noMoreEntries = document.createElement("small"); + this._noMoreEntries.innerHTML = Language.get("wcf.like.reaction.noMoreEntries"); + this._noMoreEntries.style.display = "none"; loadButtonList.appendChild(this._noMoreEntries); - this._loadButton = elCreate('button'); - this._loadButton.className = 'small'; - this._loadButton.innerHTML = Language.get('wcf.like.reaction.more'); - this._loadButton.addEventListener('click', this._loadReactions.bind(this)); - this._loadButton.style.display = 'none'; + this._loadButton = document.createElement("button"); + this._loadButton.className = "small"; + this._loadButton.innerHTML = Language.get("wcf.like.reaction.more"); + this._loadButton.addEventListener("click", () => this._loadReactions()); + this._loadButton.style.display = "none"; loadButtonList.appendChild(this._loadButton); this._container.appendChild(loadButtonList); - if (elBySel('#likeList > li').length === 2) { - this._noMoreEntries.style.display = ''; + if (document.querySelectorAll("#likeList > li").length === 2) { + this._noMoreEntries.style.display = ""; } else { - this._loadButton.style.display = ''; + this._loadButton.style.display = ""; } this._setupReactionTypeButtons(); this._setupTargetTypeButtons(); - }, + } /** * Set up the reaction type buttons. */ - _setupReactionTypeButtons: function () { - var element, elements = elBySelAll('#reactionType .button'); - for (var i = 0, length = elements.length; i < length; i++) { - element = elements[i]; - element.addEventListener('click', this._changeReactionTypeValue.bind(this, ~~elData(element, 'reaction-type-id'))); - } - }, + _setupReactionTypeButtons() { + document.querySelectorAll("#reactionType .button").forEach((element) => { + element.addEventListener("click", () => this._changeReactionTypeValue(~~element.dataset.reactionTypeId)); + }); + } /** * Set up the target type buttons. */ - _setupTargetTypeButtons: function () { - var element, elements = elBySelAll('#likeType .button'); - for (var i = 0, length = elements.length; i < length; i++) { - element = elements[i]; - element.addEventListener('click', this._changeTargetType.bind(this, elData(element, 'like-type'))); - } - }, + _setupTargetTypeButtons() { + document.querySelectorAll("#likeType .button").forEach((element) => { + element.addEventListener("click", () => this._changeTargetType(element.dataset.likeType)); + }); + } /** * Changes the reaction target type (given or received) and reload the entire element. - * - * @param {string} targetType */ - _changeTargetType: function (targetType) { - if (targetType !== 'given' && targetType !== 'received') { + _changeTargetType(targetType) { + if (targetType !== "given" && targetType !== "received") { throw new Error("[WoltLabSuite/Core/Ui/Reaction/Profile/Loader] Invalid parameter 'targetType' given."); } if (targetType !== this._targetType) { // remove old active state - elBySel('#likeType .button.active').classList.remove('active'); - // add active status to new button - elBySel('#likeType .button[data-like-type="' + targetType + '"]').classList.add('active'); + document.querySelector("#likeType .button.active").classList.remove("active"); + // add active status to new button + document.querySelector(`#likeType .button[data-like-type="${targetType}"]`).classList.add("active"); this._targetType = targetType; this._reload(); } - }, + } /** * Changes the reaction type value and reload the entire element. - * - * @param {int} reactionTypeID */ - _changeReactionTypeValue: function (reactionTypeID) { + _changeReactionTypeValue(reactionTypeID) { // remove old active state - var activeButton = elBySel('#reactionType .button.active'); + const activeButton = document.querySelector("#reactionType .button.active"); if (activeButton) { - activeButton.classList.remove('active'); + activeButton.classList.remove("active"); } if (this._reactionTypeID !== reactionTypeID) { - // add active status to new button - elBySel('#reactionType .button[data-reaction-type-id="' + reactionTypeID + '"]').classList.add('active'); + // add active status to new button + document + .querySelector(`#reactionType .button[data-reaction-type-id="${reactionTypeID}"]`) + .classList.add("active"); this._reactionTypeID = reactionTypeID; } else { this._reactionTypeID = null; } this._reload(); - }, + } /** * Handles reload. */ - _reload: function () { - var elements = elBySelAll('#likeList > li:not(:first-child):not(:last-child)'); - for (var i = 0, length = elements.length; i < length; i++) { - this._container.removeChild(elements[i]); - } - elData(this._container, 'last-like-time', 0); + _reload() { + document.querySelectorAll("#likeList > li:not(:first-child):not(:last-child)").forEach((el) => el.remove()); + this._container.dataset.lastLikeTime = "0"; this._loadReactions(); - }, + } /** * Load a list of reactions. */ - _loadReactions: function () { + _loadReactions() { this._options.parameters.userID = this._userID; - this._options.parameters.lastLikeTime = elData(this._container, 'last-like-time'); + this._options.parameters.lastLikeTime = ~~this._container.dataset.lastLikeTime; this._options.parameters.targetType = this._targetType; - this._options.parameters.reactionTypeID = this._reactionTypeID; + this._options.parameters.reactionTypeID = ~~this._reactionTypeID; Ajax.api(this, { - parameters: this._options.parameters + parameters: this._options.parameters, }); - }, - _ajaxSuccess: function (data) { + } + _ajaxSuccess(data) { if (data.returnValues.template) { - elBySel('#likeList > li:nth-last-child(1)').insertAdjacentHTML('beforebegin', data.returnValues.template); - elData(this._container, 'last-like-time', data.returnValues.lastLikeTime); - this._noMoreEntries.style.display = 'none'; - this._loadButton.style.display = ''; + document + .querySelector("#likeList > li:nth-last-child(1)") + .insertAdjacentHTML("beforebegin", data.returnValues.template); + this._container.dataset.lastLikeTime = data.returnValues.lastLikeTime.toString(); + Util_1.default.hide(this._noMoreEntries); + Util_1.default.show(this._loadButton); } else { - this._noMoreEntries.style.display = ''; - this._loadButton.style.display = 'none'; + Util_1.default.show(this._noMoreEntries); + Util_1.default.hide(this._loadButton); } - }, - _ajaxSetup: function () { + } + _ajaxSetup() { return { data: { - actionName: 'load', - className: '\\wcf\\data\\reaction\\ReactionAction' - } + actionName: "load", + className: "\\wcf\\data\\reaction\\ReactionAction", + }, }; } - }; + } + Core.enableLegacyInheritance(UiReactionProfileLoader); return UiReactionProfileLoader; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Reaction/Profile/Loader.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Reaction/Profile/Loader.js deleted file mode 100644 index 2bb33790f7..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Reaction/Profile/Loader.js +++ /dev/null @@ -1,185 +0,0 @@ -/** - * Handles the reaction list in the user profile. - * - * @author Joshua Ruesweg - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Ui/Reaction/Profile/Loader - * @since 5.2 - */ -define(['Ajax', 'Core', 'Language'], function(Ajax, Core, Language) { - "use strict"; - - /** - * @constructor - */ - function UiReactionProfileLoader(userID) { this.init(userID); } - UiReactionProfileLoader.prototype = { - /** - * Initializes a new ReactionListLoader object. - * - * @param integer userID - */ - init: function(userID) { - this._container = elById('likeList'); - this._userID = userID; - this._reactionTypeID = null; - this._targetType = 'received'; - this._options = { - parameters: [] - }; - - if (!this._userID) { - throw new Error("[WoltLabSuite/Core/Ui/Reaction/Profile/Loader] Invalid parameter 'userID' given."); - } - - var loadButtonList = elCreate('li'); - loadButtonList.className = 'likeListMore showMore'; - this._noMoreEntries = elCreate('small'); - this._noMoreEntries.innerHTML = Language.get('wcf.like.reaction.noMoreEntries'); - this._noMoreEntries.style.display = 'none'; - loadButtonList.appendChild(this._noMoreEntries); - - this._loadButton = elCreate('button'); - this._loadButton.className = 'small'; - this._loadButton.innerHTML = Language.get('wcf.like.reaction.more'); - this._loadButton.addEventListener('click', this._loadReactions.bind(this)); - this._loadButton.style.display = 'none'; - loadButtonList.appendChild(this._loadButton); - this._container.appendChild(loadButtonList); - - if (elBySel('#likeList > li').length === 2) { - this._noMoreEntries.style.display = ''; - } - else { - this._loadButton.style.display = ''; - } - - this._setupReactionTypeButtons(); - this._setupTargetTypeButtons(); - }, - - /** - * Set up the reaction type buttons. - */ - _setupReactionTypeButtons: function() { - var element, elements = elBySelAll('#reactionType .button'); - for (var i = 0, length = elements.length; i < length; i++) { - element = elements[i]; - element.addEventListener('click', this._changeReactionTypeValue.bind(this, ~~elData(element, 'reaction-type-id'))); - } - }, - - /** - * Set up the target type buttons. - */ - _setupTargetTypeButtons: function() { - var element, elements = elBySelAll('#likeType .button'); - for (var i = 0, length = elements.length; i < length; i++) { - element = elements[i]; - element.addEventListener('click', this._changeTargetType.bind(this, elData(element, 'like-type'))); - } - }, - - /** - * Changes the reaction target type (given or received) and reload the entire element. - * - * @param {string} targetType - */ - _changeTargetType: function(targetType) { - if (targetType !== 'given' && targetType !== 'received') { - throw new Error("[WoltLabSuite/Core/Ui/Reaction/Profile/Loader] Invalid parameter 'targetType' given."); - } - - if (targetType !== this._targetType) { - // remove old active state - elBySel('#likeType .button.active').classList.remove('active'); - - // add active status to new button - elBySel('#likeType .button[data-like-type="'+ targetType +'"]').classList.add('active'); - - this._targetType = targetType; - this._reload(); - } - }, - - /** - * Changes the reaction type value and reload the entire element. - * - * @param {int} reactionTypeID - */ - _changeReactionTypeValue: function(reactionTypeID) { - // remove old active state - var activeButton = elBySel('#reactionType .button.active'); - if (activeButton) { - activeButton.classList.remove('active'); - } - - if (this._reactionTypeID !== reactionTypeID) { - // add active status to new button - elBySel('#reactionType .button[data-reaction-type-id="'+ reactionTypeID +'"]').classList.add('active'); - - this._reactionTypeID = reactionTypeID; - } - else { - this._reactionTypeID = null; - } - - this._reload(); - }, - - /** - * Handles reload. - */ - _reload: function() { - var elements = elBySelAll('#likeList > li:not(:first-child):not(:last-child)'); - - for (var i = 0, length = elements.length; i < length; i++) { - this._container.removeChild(elements[i]); - } - - elData(this._container, 'last-like-time', 0); - - this._loadReactions(); - }, - - /** - * Load a list of reactions. - */ - _loadReactions: function() { - this._options.parameters.userID = this._userID; - this._options.parameters.lastLikeTime = elData(this._container, 'last-like-time'); - this._options.parameters.targetType = this._targetType; - this._options.parameters.reactionTypeID = this._reactionTypeID; - - Ajax.api(this, { - parameters: this._options.parameters - }); - }, - - _ajaxSuccess: function(data) { - if (data.returnValues.template) { - elBySel('#likeList > li:nth-last-child(1)').insertAdjacentHTML('beforebegin', data.returnValues.template); - - elData(this._container, 'last-like-time', data.returnValues.lastLikeTime); - this._noMoreEntries.style.display = 'none'; - this._loadButton.style.display = ''; - } - else { - this._noMoreEntries.style.display = ''; - this._loadButton.style.display = 'none'; - } - }, - - _ajaxSetup: function() { - return { - data: { - actionName: 'load', - className: '\\wcf\\data\\reaction\\ReactionAction' - } - }; - } - }; - - return UiReactionProfileLoader; -}); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Reaction/Profile/Loader.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Reaction/Profile/Loader.ts new file mode 100644 index 0000000000..26d709c586 --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Reaction/Profile/Loader.ts @@ -0,0 +1,192 @@ +/** + * Handles the reaction list in the user profile. + * + * @author Joshua Ruesweg + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Ui/Reaction/Profile/Loader + * @since 5.2 + */ + +import * as Ajax from "../../../Ajax"; +import { AjaxCallbackSetup, ResponseData } from "../../../Ajax/Data"; +import * as Core from "../../../Core"; +import DomUtil from "../../../Dom/Util"; +import * as Language from "../../../Language"; + +interface AjaxParameters { + parameters: { + [key: string]: number | string; + }; +} + +interface AjaxResponse extends ResponseData { + returnValues: { + template?: string; + lastLikeTime: number; + }; +} + +class UiReactionProfileLoader { + protected readonly _container: HTMLElement; + protected readonly _loadButton: HTMLButtonElement; + protected readonly _noMoreEntries: HTMLElement; + protected readonly _options: AjaxParameters; + protected _reactionTypeID: number | null = null; + protected _targetType = "received"; + protected readonly _userID: number; + + /** + * Initializes a new ReactionListLoader object. + */ + constructor(userID: number) { + this._container = document.getElementById("likeList")!; + this._userID = userID; + this._options = { + parameters: {}, + }; + + if (!this._userID) { + throw new Error("[WoltLabSuite/Core/Ui/Reaction/Profile/Loader] Invalid parameter 'userID' given."); + } + + const loadButtonList = document.createElement("li"); + loadButtonList.className = "likeListMore showMore"; + this._noMoreEntries = document.createElement("small"); + this._noMoreEntries.innerHTML = Language.get("wcf.like.reaction.noMoreEntries"); + this._noMoreEntries.style.display = "none"; + loadButtonList.appendChild(this._noMoreEntries); + + this._loadButton = document.createElement("button"); + this._loadButton.className = "small"; + this._loadButton.innerHTML = Language.get("wcf.like.reaction.more"); + this._loadButton.addEventListener("click", () => this._loadReactions()); + this._loadButton.style.display = "none"; + loadButtonList.appendChild(this._loadButton); + this._container.appendChild(loadButtonList); + + if (document.querySelectorAll("#likeList > li").length === 2) { + this._noMoreEntries.style.display = ""; + } else { + this._loadButton.style.display = ""; + } + + this._setupReactionTypeButtons(); + this._setupTargetTypeButtons(); + } + + /** + * Set up the reaction type buttons. + */ + protected _setupReactionTypeButtons(): void { + document.querySelectorAll("#reactionType .button").forEach((element: HTMLElement) => { + element.addEventListener("click", () => this._changeReactionTypeValue(~~element.dataset.reactionTypeId!)); + }); + } + + /** + * Set up the target type buttons. + */ + protected _setupTargetTypeButtons(): void { + document.querySelectorAll("#likeType .button").forEach((element: HTMLElement) => { + element.addEventListener("click", () => this._changeTargetType(element.dataset.likeType!)); + }); + } + + /** + * Changes the reaction target type (given or received) and reload the entire element. + */ + protected _changeTargetType(targetType: string): void { + if (targetType !== "given" && targetType !== "received") { + throw new Error("[WoltLabSuite/Core/Ui/Reaction/Profile/Loader] Invalid parameter 'targetType' given."); + } + + if (targetType !== this._targetType) { + // remove old active state + document.querySelector("#likeType .button.active")!.classList.remove("active"); + + // add active status to new button + document.querySelector(`#likeType .button[data-like-type="${targetType}"]`)!.classList.add("active"); + + this._targetType = targetType; + this._reload(); + } + } + + /** + * Changes the reaction type value and reload the entire element. + */ + protected _changeReactionTypeValue(reactionTypeID: number): void { + // remove old active state + const activeButton = document.querySelector("#reactionType .button.active"); + if (activeButton) { + activeButton.classList.remove("active"); + } + + if (this._reactionTypeID !== reactionTypeID) { + // add active status to new button + document + .querySelector(`#reactionType .button[data-reaction-type-id="${reactionTypeID}"]`)! + .classList.add("active"); + + this._reactionTypeID = reactionTypeID; + } else { + this._reactionTypeID = null; + } + + this._reload(); + } + + /** + * Handles reload. + */ + protected _reload(): void { + document.querySelectorAll("#likeList > li:not(:first-child):not(:last-child)").forEach((el) => el.remove()); + + this._container.dataset.lastLikeTime = "0"; + + this._loadReactions(); + } + + /** + * Load a list of reactions. + */ + protected _loadReactions(): void { + this._options.parameters.userID = this._userID; + this._options.parameters.lastLikeTime = ~~this._container.dataset.lastLikeTime!; + this._options.parameters.targetType = this._targetType; + this._options.parameters.reactionTypeID = ~~this._reactionTypeID!; + + Ajax.api(this, { + parameters: this._options.parameters, + }); + } + + _ajaxSuccess(data: AjaxResponse): void { + if (data.returnValues.template) { + document + .querySelector("#likeList > li:nth-last-child(1)")! + .insertAdjacentHTML("beforebegin", data.returnValues.template); + + this._container.dataset.lastLikeTime = data.returnValues.lastLikeTime.toString(); + DomUtil.hide(this._noMoreEntries); + DomUtil.show(this._loadButton); + } else { + DomUtil.show(this._noMoreEntries); + DomUtil.hide(this._loadButton); + } + } + + _ajaxSetup(): ReturnType { + return { + data: { + actionName: "load", + className: "\\wcf\\data\\reaction\\ReactionAction", + }, + }; + } +} + +Core.enableLegacyInheritance(UiReactionProfileLoader); + +export = UiReactionProfileLoader; -- 2.20.1