From bfd51550ea8d184cc28b1718887daa1ce03fb835 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Fri, 6 Nov 2020 15:52:55 +0100 Subject: [PATCH] Convert `Ui/Comment/Response/Add` to TypeScript --- global.d.ts | 2 +- .../Core/Ui/Comment/Response/Add.js | 143 +++++++----------- .../Core/Ui/Comment/Response/Add.js | 136 ----------------- .../Core/Ui/Comment/Response/Add.ts | 126 +++++++++++++++ 4 files changed, 185 insertions(+), 222 deletions(-) delete mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Comment/Response/Add.js create mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Comment/Response/Add.ts diff --git a/global.d.ts b/global.d.ts index 4949d6bcec..1136bb7837 100644 --- a/global.d.ts +++ b/global.d.ts @@ -32,7 +32,7 @@ declare global { } interface JQuery { - redactor(...args: any[]): JQuery; + redactor(...args: any[]): unknown; } type ArbitraryObject = Record; diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Response/Add.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Response/Add.js index 2397b657e6..f3d19ca0be 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Response/Add.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Response/Add.js @@ -1,113 +1,86 @@ /** * Handles the comment response add feature. * - * @author Alexander Ebert - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Ui/Comment/Add + * @author Alexander Ebert + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Ui/Comment/Add */ -define([ - 'Core', 'Language', 'Dom/ChangeListener', 'Dom/Util', 'Dom/Traverse', 'Ui/Notification', 'WoltLabSuite/Core/Ui/Comment/Add' -], function (Core, Language, DomChangeListener, DomUtil, DomTraverse, UiNotification, UiCommentAdd) { +define(["require", "exports", "tslib", "../../../Core", "../../../Dom/Change/Listener", "../../../Dom/Util", "../../../Language", "../Add", "../../Notification"], function (require, exports, tslib_1, Core, Listener_1, Util_1, Language, Add_1, UiNotification) { "use strict"; - if (!COMPILER_TARGET_DEFAULT) { - var Fake = function () { }; - Fake.prototype = { - init: function () { }, - getContainer: function () { }, - getContent: function () { }, - setContent: function () { }, - _submitGuestDialog: function () { }, - _submit: function () { }, - _getParameters: function () { }, - _validate: function () { }, - throwError: function () { }, - _showLoadingOverlay: function () { }, - _hideLoadingOverlay: function () { }, - _reset: function () { }, - _handleError: function () { }, - _getEditor: function () { }, - _insertMessage: function () { }, - _ajaxSuccess: function () { }, - _ajaxFailure: function () { }, - _ajaxSetup: function () { } - }; - return Fake; - } - /** - * @constructor - */ - function UiCommentResponseAdd(container, options) { this.init(container, options); } - Core.inherit(UiCommentResponseAdd, UiCommentAdd, { - init: function (container, options) { - UiCommentResponseAdd._super.prototype.init.call(this, container); + Core = tslib_1.__importStar(Core); + Listener_1 = tslib_1.__importDefault(Listener_1); + Util_1 = tslib_1.__importDefault(Util_1); + Language = tslib_1.__importStar(Language); + Add_1 = tslib_1.__importDefault(Add_1); + UiNotification = tslib_1.__importStar(UiNotification); + class UiCommentResponseAdd extends Add_1.default { + constructor(container, options) { + super(container); this._options = Core.extend({ - callbackInsert: null + callbackInsert: null, }, options); - }, + } /** - * Returns the editor container for placement or `null` if the editor is busy. - * - * @return {(Element|null)} + * Returns the editor container for placement. */ - getContainer: function () { - return (this._isBusy) ? null : this._container; - }, + getContainer() { + return this._container; + } /** * Retrieves the current content from the editor. - * - * @return {string} */ - getContent: function () { - return window.jQuery(this._textarea).redactor('code.get'); - }, + getContent() { + return window.jQuery(this._textarea).redactor("code.get"); + } /** * Sets the content and places the caret at the end of the editor. - * - * @param {string} html */ - setContent: function (html) { - window.jQuery(this._textarea).redactor('code.set', html); - window.jQuery(this._textarea).redactor('WoltLabCaret.endOfEditor'); + setContent(html) { + window.jQuery(this._textarea).redactor("code.set", html); + window.jQuery(this._textarea).redactor("WoltLabCaret.endOfEditor"); // the error message can appear anywhere in the container, not exclusively after the textarea - var innerError = elBySel('.innerError', this._textarea.parentNode); - if (innerError !== null) - elRemove(innerError); - this._content.classList.remove('collapsed'); + const innerError = this._textarea.parentElement.querySelector(".innerError"); + if (innerError !== null) { + innerError.remove(); + } + this._content.classList.remove("collapsed"); this._focusEditor(); - }, - _getParameters: function () { - var parameters = UiCommentResponseAdd._super.prototype._getParameters.call(this); - parameters.data.commentID = ~~elData(this._container.closest('.comment'), 'object-id'); + } + _getParameters() { + const parameters = super._getParameters(); + const comment = this._container.closest(".comment"); + parameters.data.commentID = ~~comment.dataset.objectId; return parameters; - }, - _insertMessage: function (data) { - var commentContent = DomTraverse.childByClass(this._container.parentNode, 'commentContent'); - var responseList = commentContent.nextElementSibling; - if (responseList === null || !responseList.classList.contains('commentResponseList')) { - responseList = elCreate('ul'); - responseList.className = 'containerList commentResponseList'; - elData(responseList, 'responses', 0); - commentContent.parentNode.insertBefore(responseList, commentContent.nextSibling); + } + _insertMessage(data) { + const commentContent = this._container.parentElement.querySelector(".commentContent"); + let responseList = commentContent.nextElementSibling; + if (responseList === null || !responseList.classList.contains("commentResponseList")) { + responseList = document.createElement("ul"); + responseList.className = "containerList commentResponseList"; + responseList.dataset.responses = "0"; + commentContent.insertAdjacentElement("afterend", responseList); } // insert HTML - //noinspection JSCheckFunctionSignatures - DomUtil.insertHtml(data.returnValues.template, responseList, 'append'); - UiNotification.show(Language.get('wcf.global.success.add')); - DomChangeListener.trigger(); + Util_1.default.insertHtml(data.returnValues.template, responseList, "append"); + UiNotification.show(Language.get("wcf.global.success.add")); + Listener_1.default.trigger(); // reset editor - window.jQuery(this._textarea).redactor('code.set', ''); - if (this._options.callbackInsert !== null) + window.jQuery(this._textarea).redactor("code.set", ""); + if (this._options.callbackInsert !== null) { this._options.callbackInsert(); + } // update counter - elData(responseList, 'responses', responseList.children.length); + responseList.dataset.responses = responseList.children.length.toString(); return responseList.lastElementChild; - }, - _ajaxSetup: function () { - var data = UiCommentResponseAdd._super.prototype._ajaxSetup.call(this); - data.data.actionName = 'addResponse'; + } + _ajaxSetup() { + const data = super._ajaxSetup(); + data.data.actionName = "addResponse"; return data; } - }); + } + Core.enableLegacyInheritance(UiCommentResponseAdd); return UiCommentResponseAdd; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Comment/Response/Add.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Comment/Response/Add.js deleted file mode 100644 index c5089a30a7..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Comment/Response/Add.js +++ /dev/null @@ -1,136 +0,0 @@ -/** - * Handles the comment response add feature. - * - * @author Alexander Ebert - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Ui/Comment/Add - */ -define([ - 'Core', 'Language', 'Dom/ChangeListener', 'Dom/Util', 'Dom/Traverse', 'Ui/Notification', 'WoltLabSuite/Core/Ui/Comment/Add' -], -function( - Core, Language, DomChangeListener, DomUtil, DomTraverse, UiNotification, UiCommentAdd -) { - "use strict"; - - if (!COMPILER_TARGET_DEFAULT) { - var Fake = function() {}; - Fake.prototype = { - init: function() {}, - getContainer: function() {}, - getContent: function() {}, - setContent: function() {}, - _submitGuestDialog: function() {}, - _submit: function() {}, - _getParameters: function () {}, - _validate: function() {}, - throwError: function() {}, - _showLoadingOverlay: function() {}, - _hideLoadingOverlay: function() {}, - _reset: function() {}, - _handleError: function() {}, - _getEditor: function() {}, - _insertMessage: function() {}, - _ajaxSuccess: function() {}, - _ajaxFailure: function() {}, - _ajaxSetup: function() {} - }; - return Fake; - } - - /** - * @constructor - */ - function UiCommentResponseAdd(container, options) { this.init(container, options); } - Core.inherit(UiCommentResponseAdd, UiCommentAdd, { - init: function (container, options) { - UiCommentResponseAdd._super.prototype.init.call(this, container); - - this._options = Core.extend({ - callbackInsert: null - }, options); - }, - - /** - * Returns the editor container for placement or `null` if the editor is busy. - * - * @return {(Element|null)} - */ - getContainer: function() { - return (this._isBusy) ? null : this._container; - }, - - /** - * Retrieves the current content from the editor. - * - * @return {string} - */ - getContent: function () { - return window.jQuery(this._textarea).redactor('code.get'); - }, - - /** - * Sets the content and places the caret at the end of the editor. - * - * @param {string} html - */ - setContent: function (html) { - window.jQuery(this._textarea).redactor('code.set', html); - window.jQuery(this._textarea).redactor('WoltLabCaret.endOfEditor'); - - // the error message can appear anywhere in the container, not exclusively after the textarea - var innerError = elBySel('.innerError', this._textarea.parentNode); - if (innerError !== null) elRemove(innerError); - - this._content.classList.remove('collapsed'); - this._focusEditor(); - }, - - _getParameters: function () { - var parameters = UiCommentResponseAdd._super.prototype._getParameters.call(this); - parameters.data.commentID = ~~elData(this._container.closest('.comment'), 'object-id'); - - return parameters; - }, - - _insertMessage: function(data) { - var commentContent = DomTraverse.childByClass(this._container.parentNode, 'commentContent'); - var responseList = commentContent.nextElementSibling; - if (responseList === null || !responseList.classList.contains('commentResponseList')) { - responseList = elCreate('ul'); - responseList.className = 'containerList commentResponseList'; - elData(responseList, 'responses', 0); - - commentContent.parentNode.insertBefore(responseList, commentContent.nextSibling); - } - - // insert HTML - //noinspection JSCheckFunctionSignatures - DomUtil.insertHtml(data.returnValues.template, responseList, 'append'); - - UiNotification.show(Language.get('wcf.global.success.add')); - - DomChangeListener.trigger(); - - // reset editor - window.jQuery(this._textarea).redactor('code.set', ''); - - if (this._options.callbackInsert !== null) this._options.callbackInsert(); - - // update counter - elData(responseList, 'responses', responseList.children.length); - - return responseList.lastElementChild; - }, - - _ajaxSetup: function() { - var data = UiCommentResponseAdd._super.prototype._ajaxSetup.call(this); - data.data.actionName = 'addResponse'; - - return data; - } - }); - - return UiCommentResponseAdd; -}); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Comment/Response/Add.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Comment/Response/Add.ts new file mode 100644 index 0000000000..31791cabb1 --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Comment/Response/Add.ts @@ -0,0 +1,126 @@ +/** + * Handles the comment response add feature. + * + * @author Alexander Ebert + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Ui/Comment/Add + */ + +import { AjaxCallbackSetup } from "../../../Ajax/Data"; +import * as Core from "../../../Core"; +import DomChangeListener from "../../../Dom/Change/Listener"; +import DomUtil from "../../../Dom/Util"; +import * as Language from "../../../Language"; +import UiCommentAdd from "../Add"; +import * as UiNotification from "../../Notification"; + +type CallbackInsert = () => void; + +interface ResponseAddOptions { + callbackInsert: CallbackInsert | null; +} + +interface AjaxResponse { + returnValues: { + guestDialog?: string; + template: string; + }; +} + +class UiCommentResponseAdd extends UiCommentAdd { + protected _options: ResponseAddOptions; + + constructor(container: HTMLElement, options: Partial) { + super(container); + + this._options = Core.extend( + { + callbackInsert: null, + }, + options, + ) as ResponseAddOptions; + } + + /** + * Returns the editor container for placement. + */ + getContainer(): HTMLElement { + return this._container; + } + + /** + * Retrieves the current content from the editor. + */ + getContent(): string { + return window.jQuery(this._textarea).redactor("code.get") as string; + } + + /** + * Sets the content and places the caret at the end of the editor. + */ + setContent(html: string): void { + window.jQuery(this._textarea).redactor("code.set", html); + window.jQuery(this._textarea).redactor("WoltLabCaret.endOfEditor"); + + // the error message can appear anywhere in the container, not exclusively after the textarea + const innerError = this._textarea.parentElement!.querySelector(".innerError"); + if (innerError !== null) { + innerError.remove(); + } + + this._content.classList.remove("collapsed"); + this._focusEditor(); + } + + protected _getParameters(): ArbitraryObject { + const parameters = super._getParameters(); + + const comment = this._container.closest(".comment") as HTMLElement; + (parameters.data as ArbitraryObject).commentID = ~~comment.dataset.objectId!; + + return parameters; + } + + protected _insertMessage(data: AjaxResponse): HTMLElement { + const commentContent = this._container.parentElement!.querySelector(".commentContent")!; + let responseList = commentContent.nextElementSibling as HTMLElement; + if (responseList === null || !responseList.classList.contains("commentResponseList")) { + responseList = document.createElement("ul"); + responseList.className = "containerList commentResponseList"; + responseList.dataset.responses = "0"; + + commentContent.insertAdjacentElement("afterend", responseList); + } + + // insert HTML + DomUtil.insertHtml(data.returnValues.template, responseList, "append"); + + UiNotification.show(Language.get("wcf.global.success.add")); + + DomChangeListener.trigger(); + + // reset editor + window.jQuery(this._textarea).redactor("code.set", ""); + + if (this._options.callbackInsert !== null) { + this._options.callbackInsert(); + } + + // update counter + responseList.dataset.responses = responseList.children.length.toString(); + + return responseList.lastElementChild as HTMLElement; + } + + _ajaxSetup(): ReturnType { + const data = super._ajaxSetup(); + (data.data as ArbitraryObject).actionName = "addResponse"; + + return data; + } +} + +Core.enableLegacyInheritance(UiCommentResponseAdd); + +export = UiCommentResponseAdd; -- 2.20.1