/**
* Handles the reaction list in the user profile.
*
- * @author Joshua Ruesweg
- * @copyright 2001-2019 WoltLab GmbH
- * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- * @module WoltLabSuite/Core/Ui/Reaction/Profile/Loader
+ * @author Joshua Ruesweg
+ * @copyright 2001-2019 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @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;
});
+++ /dev/null
-/**
- * Handles the reaction list in the user profile.
- *
- * @author Joshua Ruesweg
- * @copyright 2001-2019 WoltLab GmbH
- * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- * @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;
-});
--- /dev/null
+/**
+ * Handles the reaction list in the user profile.
+ *
+ * @author Joshua Ruesweg
+ * @copyright 2001-2019 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @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<AjaxCallbackSetup> {
+ return {
+ data: {
+ actionName: "load",
+ className: "\\wcf\\data\\reaction\\ReactionAction",
+ },
+ };
+ }
+}
+
+Core.enableLegacyInheritance(UiReactionProfileLoader);
+
+export = UiReactionProfileLoader;
projects / GitHub / WoltLab / WCF.git / commitdiff