From 60e5708913fe37332f1a26cdbc73bc5dd28a17fe Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Fri, 6 Nov 2020 16:54:50 +0100 Subject: [PATCH] Convert `Ui/Comment/Response/Edit` to TypeScript --- .../Core/Ui/Comment/Response/Edit.js | 150 ++++++--------- .../Core/Ui/Comment/Response/Edit.js | 177 ------------------ .../Core/Ui/Comment/Response/Edit.ts | 143 ++++++++++++++ 3 files changed, 200 insertions(+), 270 deletions(-) delete mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Comment/Response/Edit.js create mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Comment/Response/Edit.ts diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Response/Edit.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Response/Edit.js index f7fd40137e..c65c8fa963 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Response/Edit.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Response/Edit.js @@ -1,149 +1,113 @@ /** * Provides editing support for comment responses. * - * @author Alexander Ebert - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Ui/Comment/Response/Edit + * @author Alexander Ebert + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Ui/Comment/Response/Edit */ -define([ - 'Ajax', 'Core', 'Dictionary', 'Environment', - 'EventHandler', 'Language', 'List', 'Dom/ChangeListener', 'Dom/Traverse', - 'Dom/Util', 'Ui/Notification', 'Ui/ReusableDropdown', 'WoltLabSuite/Core/Ui/Scroll', 'WoltLabSuite/Core/Ui/Comment/Edit' -], function (Ajax, Core, Dictionary, Environment, EventHandler, Language, List, DomChangeListener, DomTraverse, DomUtil, UiNotification, UiReusableDropdown, UiScroll, UiCommentEdit) { +define(["require", "exports", "tslib", "../../../Ajax", "../../../Core", "../../../Dom/Change/Listener", "../../../Dom/Util", "../Edit", "../../Notification"], function (require, exports, tslib_1, Ajax, Core, Listener_1, Util_1, Edit_1, UiNotification) { "use strict"; - if (!COMPILER_TARGET_DEFAULT) { - var Fake = function () { }; - Fake.prototype = { - init: function () { }, - rebuild: function () { }, - _click: function () { }, - _prepare: function () { }, - _showEditor: function () { }, - _restoreMessage: function () { }, - _save: function () { }, - _validate: function () { }, - throwError: function () { }, - _showMessage: function () { }, - _hideEditor: function () { }, - _restoreEditor: function () { }, - _destroyEditor: function () { }, - _getEditorId: function () { }, - _getObjectId: function () { }, - _ajaxFailure: function () { }, - _ajaxSuccess: function () { }, - _ajaxSetup: function () { } - }; - return Fake; - } - /** - * @constructor - */ - function UiCommentResponseEdit(container) { this.init(container); } - Core.inherit(UiCommentResponseEdit, UiCommentEdit, { + Ajax = tslib_1.__importStar(Ajax); + Core = tslib_1.__importStar(Core); + Listener_1 = tslib_1.__importDefault(Listener_1); + Util_1 = tslib_1.__importDefault(Util_1); + Edit_1 = tslib_1.__importDefault(Edit_1); + UiNotification = tslib_1.__importStar(UiNotification); + class UiCommentResponseEdit extends Edit_1.default { /** * Initializes the comment edit manager. * - * @param {Element} container container element + * @param {Element} container container element */ - init: function (container) { - this._activeElement = null; - this._callbackClick = null; - this._container = container; - this._editorContainer = null; - this._responses = new List(); - this.rebuild(); - DomChangeListener.add('Ui/Comment/Response/Edit_' + DomUtil.identify(this._container), this.rebuild.bind(this)); - }, + constructor(container) { + super(container); + this._responses = new Set(); + this.rebuildResponses(); + Listener_1.default.add("Ui/Comment/Response/Edit_" + Util_1.default.identify(this._container), () => this.rebuildResponses()); + } + rebuild() { + // Do nothing, we want to avoid implicitly invoking `UiCommentEdit.rebuild()`. + } /** * Initializes each applicable message, should be called whenever new * messages are being displayed. */ - rebuild: function () { - elBySelAll('.commentResponse', this._container, (function (response) { + rebuildResponses() { + this._container.querySelectorAll(".commentResponse").forEach((response) => { if (this._responses.has(response)) { return; } - if (elDataBool(response, 'can-edit')) { - var button = elBySel('.jsCommentResponseEditButton', response); + if (Core.stringToBool(response.dataset.canEdit || "")) { + const button = response.querySelector(".jsCommentResponseEditButton"); if (button !== null) { - if (this._callbackClick === null) { - this._callbackClick = this._click.bind(this); - } - button.addEventListener('click', this._callbackClick); + button.addEventListener("click", (ev) => this._click(ev)); } } this._responses.add(response); - }).bind(this)); - }, + }); + } /** * Handles clicks on the edit button. - * - * @param {?Event} event event object - * @protected */ - _click: function (event) { + _click(event) { event.preventDefault(); if (this._activeElement === null) { - this._activeElement = event.currentTarget.closest('.commentResponse'); + const target = event.currentTarget; + this._activeElement = target.closest(".commentResponse"); this._prepare(); Ajax.api(this, { - actionName: 'beginEdit', - objectIDs: [this._getObjectId(this._activeElement)] + actionName: "beginEdit", + objectIDs: [this._getObjectId(this._activeElement)], }); } else { - UiNotification.show('wcf.message.error.editorAlreadyInUse', null, 'warning'); + UiNotification.show("wcf.message.error.editorAlreadyInUse", null, "warning"); } - }, + } /** * Prepares the message for editor display. * * @protected */ - _prepare: function () { - this._editorContainer = elCreate('div'); - this._editorContainer.className = 'commentEditorContainer'; + _prepare() { + this._editorContainer = document.createElement("div"); + this._editorContainer.className = "commentEditorContainer"; this._editorContainer.innerHTML = ''; - var content = elBySel('.commentResponseContent', this._activeElement); + const content = this._activeElement.querySelector(".commentResponseContent"); content.insertBefore(this._editorContainer, content.firstChild); - }, + } /** * Shows the update message. - * - * @param {Object} data ajax response data - * @protected */ - _showMessage: function (data) { + _showMessage(data) { // set new content - //noinspection JSCheckFunctionSignatures - DomUtil.setInnerHtml(elBySel('.commentResponseContent .userMessage', this._editorContainer.parentNode), data.returnValues.message); + const parent = this._editorContainer.parentElement; + Util_1.default.setInnerHtml(parent.querySelector(".commentResponseContent .userMessage"), data.returnValues.message); this._restoreMessage(); UiNotification.show(); - }, + } /** * Returns the unique editor id. - * - * @return {string} editor id - * @protected */ - _getEditorId: function () { - return 'commentResponseEditor' + this._getObjectId(this._activeElement); - }, - _ajaxSetup: function () { - var objectTypeId = ~~elData(this._container, 'object-type-id'); + _getEditorId() { + return `commentResponseEditor${this._getObjectId(this._activeElement)}`; + } + _ajaxSetup() { + const objectTypeId = ~~this._container.dataset.objectTypeId; return { data: { - className: 'wcf\\data\\comment\\response\\CommentResponseAction', + className: "wcf\\data\\comment\\response\\CommentResponseAction", parameters: { data: { - objectTypeID: objectTypeId - } - } + objectTypeID: objectTypeId, + }, + }, }, - silent: true + silent: true, }; } - }); + } + Core.enableLegacyInheritance(UiCommentResponseEdit); return UiCommentResponseEdit; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Comment/Response/Edit.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Comment/Response/Edit.js deleted file mode 100644 index a7c5244b28..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Comment/Response/Edit.js +++ /dev/null @@ -1,177 +0,0 @@ -/** - * Provides editing support for comment responses. - * - * @author Alexander Ebert - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Ui/Comment/Response/Edit - */ -define( - [ - 'Ajax', 'Core', 'Dictionary', 'Environment', - 'EventHandler', 'Language', 'List', 'Dom/ChangeListener', 'Dom/Traverse', - 'Dom/Util', 'Ui/Notification', 'Ui/ReusableDropdown', 'WoltLabSuite/Core/Ui/Scroll', 'WoltLabSuite/Core/Ui/Comment/Edit' - ], - function( - Ajax, Core, Dictionary, Environment, - EventHandler, Language, List, DomChangeListener, DomTraverse, - DomUtil, UiNotification, UiReusableDropdown, UiScroll, UiCommentEdit - ) -{ - "use strict"; - - if (!COMPILER_TARGET_DEFAULT) { - var Fake = function() {}; - Fake.prototype = { - init: function() {}, - rebuild: function() {}, - _click: function() {}, - _prepare: function() {}, - _showEditor: function() {}, - _restoreMessage: function() {}, - _save: function() {}, - _validate: function() {}, - throwError: function() {}, - _showMessage: function() {}, - _hideEditor: function() {}, - _restoreEditor: function() {}, - _destroyEditor: function() {}, - _getEditorId: function() {}, - _getObjectId: function() {}, - _ajaxFailure: function() {}, - _ajaxSuccess: function() {}, - _ajaxSetup: function() {} - }; - return Fake; - } - - /** - * @constructor - */ - function UiCommentResponseEdit(container) { this.init(container); } - Core.inherit(UiCommentResponseEdit, UiCommentEdit, { - /** - * Initializes the comment edit manager. - * - * @param {Element} container container element - */ - init: function(container) { - this._activeElement = null; - this._callbackClick = null; - this._container = container; - this._editorContainer = null; - this._responses = new List(); - - this.rebuild(); - - DomChangeListener.add('Ui/Comment/Response/Edit_' + DomUtil.identify(this._container), this.rebuild.bind(this)); - }, - - /** - * Initializes each applicable message, should be called whenever new - * messages are being displayed. - */ - rebuild: function() { - elBySelAll('.commentResponse', this._container, (function (response) { - if (this._responses.has(response)) { - return; - } - - if (elDataBool(response, 'can-edit')) { - var button = elBySel('.jsCommentResponseEditButton', response); - if (button !== null) { - if (this._callbackClick === null) { - this._callbackClick = this._click.bind(this); - } - - button.addEventListener('click', this._callbackClick); - } - } - - this._responses.add(response); - }).bind(this)); - }, - - /** - * Handles clicks on the edit button. - * - * @param {?Event} event event object - * @protected - */ - _click: function(event) { - event.preventDefault(); - - if (this._activeElement === null) { - this._activeElement = event.currentTarget.closest('.commentResponse'); - - this._prepare(); - - Ajax.api(this, { - actionName: 'beginEdit', - objectIDs: [this._getObjectId(this._activeElement)] - }); - } - else { - UiNotification.show('wcf.message.error.editorAlreadyInUse', null, 'warning'); - } - }, - - /** - * Prepares the message for editor display. - * - * @protected - */ - _prepare: function() { - this._editorContainer = elCreate('div'); - this._editorContainer.className = 'commentEditorContainer'; - this._editorContainer.innerHTML = ''; - - var content = elBySel('.commentResponseContent', this._activeElement); - content.insertBefore(this._editorContainer, content.firstChild); - }, - - /** - * Shows the update message. - * - * @param {Object} data ajax response data - * @protected - */ - _showMessage: function(data) { - // set new content - //noinspection JSCheckFunctionSignatures - DomUtil.setInnerHtml(elBySel('.commentResponseContent .userMessage', this._editorContainer.parentNode), data.returnValues.message); - - this._restoreMessage(); - - UiNotification.show(); - }, - - /** - * Returns the unique editor id. - * - * @return {string} editor id - * @protected - */ - _getEditorId: function() { - return 'commentResponseEditor' + this._getObjectId(this._activeElement); - }, - - _ajaxSetup: function() { - var objectTypeId = ~~elData(this._container, 'object-type-id'); - - return { - data: { - className: 'wcf\\data\\comment\\response\\CommentResponseAction', - parameters: { - data: { - objectTypeID: objectTypeId - } - } - }, - silent: true - }; - } - }); - - return UiCommentResponseEdit; -}); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Comment/Response/Edit.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Comment/Response/Edit.ts new file mode 100644 index 0000000000..f28f11ef16 --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Comment/Response/Edit.ts @@ -0,0 +1,143 @@ +/** + * Provides editing support for comment responses. + * + * @author Alexander Ebert + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Ui/Comment/Response/Edit + */ + +import * as Ajax from "../../../Ajax"; +import { AjaxCallbackSetup } from "../../../Ajax/Data"; +import * as Core from "../../../Core"; +import DomChangeListener from "../../../Dom/Change/Listener"; +import DomUtil from "../../../Dom/Util"; +import UiCommentEdit from "../Edit"; +import * as UiNotification from "../../Notification"; + +interface AjaxResponse { + actionName: string; + returnValues: { + message: string; + template: string; + }; +} + +class UiCommentResponseEdit extends UiCommentEdit { + protected readonly _responses = new Set(); + + /** + * Initializes the comment edit manager. + * + * @param {Element} container container element + */ + constructor(container: HTMLElement) { + super(container); + + this.rebuildResponses(); + + DomChangeListener.add("Ui/Comment/Response/Edit_" + DomUtil.identify(this._container), () => + this.rebuildResponses(), + ); + } + + rebuild(): void { + // Do nothing, we want to avoid implicitly invoking `UiCommentEdit.rebuild()`. + } + + /** + * Initializes each applicable message, should be called whenever new + * messages are being displayed. + */ + rebuildResponses(): void { + this._container.querySelectorAll(".commentResponse").forEach((response: HTMLElement) => { + if (this._responses.has(response)) { + return; + } + + if (Core.stringToBool(response.dataset.canEdit || "")) { + const button = response.querySelector(".jsCommentResponseEditButton") as HTMLAnchorElement; + if (button !== null) { + button.addEventListener("click", (ev) => this._click(ev)); + } + } + + this._responses.add(response); + }); + } + + /** + * Handles clicks on the edit button. + */ + protected _click(event: MouseEvent): void { + event.preventDefault(); + + if (this._activeElement === null) { + const target = event.currentTarget as HTMLElement; + this._activeElement = target.closest(".commentResponse") as HTMLElement; + + this._prepare(); + + Ajax.api(this, { + actionName: "beginEdit", + objectIDs: [this._getObjectId(this._activeElement)], + }); + } else { + UiNotification.show("wcf.message.error.editorAlreadyInUse", null, "warning"); + } + } + + /** + * Prepares the message for editor display. + * + * @protected + */ + protected _prepare(): void { + this._editorContainer = document.createElement("div"); + this._editorContainer.className = "commentEditorContainer"; + this._editorContainer.innerHTML = ''; + + const content = this._activeElement!.querySelector(".commentResponseContent")!; + content.insertBefore(this._editorContainer, content.firstChild); + } + + /** + * Shows the update message. + */ + protected _showMessage(data: AjaxResponse): void { + // set new content + const parent = this._editorContainer!.parentElement!; + DomUtil.setInnerHtml(parent.querySelector(".commentResponseContent .userMessage")!, data.returnValues.message); + + this._restoreMessage(); + + UiNotification.show(); + } + + /** + * Returns the unique editor id. + */ + protected _getEditorId(): string { + return `commentResponseEditor${this._getObjectId(this._activeElement!)}`; + } + + _ajaxSetup(): ReturnType { + const objectTypeId = ~~this._container.dataset.objectTypeId!; + + return { + data: { + className: "wcf\\data\\comment\\response\\CommentResponseAction", + parameters: { + data: { + objectTypeID: objectTypeId, + }, + }, + }, + silent: true, + }; + } +} + +Core.enableLegacyInheritance(UiCommentResponseEdit); + +export = UiCommentResponseEdit; -- 2.20.1