From: Alexander Ebert Date: Sat, 2 Jan 2021 15:26:42 +0000 (+0100) Subject: Convert `Acp/Ui/Devtools/Notification/Test` to TypeScript X-Git-Tag: 5.4.0_Alpha_1~484^2~9 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=7edb3b1c0b49472e9b283eb3a911df331f58f687;p=GitHub%2FWoltLab%2FWCF.git Convert `Acp/Ui/Devtools/Notification/Test` to TypeScript --- diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Devtools/Notification/Test.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Devtools/Notification/Test.js index f6044f56e3..d583655c09 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Devtools/Notification/Test.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Devtools/Notification/Test.js @@ -1,109 +1,117 @@ /** * Executes user notification tests. * - * @author Matthias Schmidt - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Acp/Ui/Devtools/Project/QuickSetup + * @author Matthias Schmidt + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Acp/Ui/Devtools/Project/QuickSetup */ -define(['Ajax', 'Dictionary', 'Language', 'Ui/Dialog'], function (Ajax, Dictionary, Language, UiDialog) { - var _buttons = elByClass('jsTestEventButton'); - var _titles = new Dictionary(); - return { +define(["require", "exports", "tslib", "../../../../Ajax", "../../../../Language", "../../../../Ui/Dialog", "../../../../Dom/Util"], function (require, exports, tslib_1, Ajax, Language, Dialog_1, Util_1) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.init = void 0; + Ajax = tslib_1.__importStar(Ajax); + Language = tslib_1.__importStar(Language); + Dialog_1 = tslib_1.__importDefault(Dialog_1); + Util_1 = tslib_1.__importDefault(Util_1); + class AcpUiDevtoolsNotificationTest { /** * Initializes the user notification test handler. */ - init: function () { - Array.prototype.forEach.call(_buttons, function (button) { - button.addEventListener('click', this._test.bind(this)); - _titles.set(~~elData(button, 'event-id'), elData(button, 'title')); - }.bind(this)); - }, + constructor() { + this.titles = new Map(); + this.buttons = Array.from(document.querySelectorAll(".jsTestEventButton")); + this.buttons.forEach((button) => { + button.addEventListener("click", (ev) => this.test(ev)); + const eventId = ~~button.dataset.eventId; + const title = button.dataset.title; + this.titles.set(eventId, title); + }); + } /** * Returns the data used to setup the AJAX request object. - * - * @return {object} setup data */ - _ajaxSetup: function () { + _ajaxSetup() { return { data: { - actionName: 'testEvent', - className: 'wcf\\data\\user\\notification\\event\\UserNotificationEventAction' - } + actionName: "testEvent", + className: "wcf\\data\\user\\notification\\event\\UserNotificationEventAction", + }, }; - }, + } /** * Handles successful AJAX request. - * - * @param {object} data response data */ - _ajaxSuccess: function (data) { - UiDialog.open(this, data.returnValues.template); - UiDialog.setTitle(this, _titles.get(~~data.returnValues.eventID)); - var dialog = UiDialog.getDialog(this).dialog; - elBySelAll('.formSubmit button', dialog, function (button) { - button.addEventListener('click', this._changeView.bind(this)); - }.bind(this)); + _ajaxSuccess(data) { + Dialog_1.default.open(this, data.returnValues.template); + Dialog_1.default.setTitle(this, this.titles.get(~~data.returnValues.eventID)); + const dialog = Dialog_1.default.getDialog(this).dialog; + dialog.querySelectorAll(".formSubmit button").forEach((button) => { + button.addEventListener("click", (ev) => this.changeView(ev)); + }); // fix some margin issues - var errors = elByClass('error', dialog); + const errors = Array.from(dialog.querySelectorAll(".error")); if (errors.length === 1) { - errors.item(0).style.setProperty('margin-top', '0px'); - errors.item(0).style.setProperty('margin-bottom', '20px'); + errors[0].style.setProperty("margin-top", "0px"); + errors[0].style.setProperty("margin-bottom", "20px"); } - elBySelAll('.notificationTestSection', dialog, function (section) { - section.style.setProperty('margin-top', '0px'); + dialog.querySelectorAll(".notificationTestSection").forEach((section) => { + section.style.setProperty("margin-top", "0px"); }); - elById('notificationTestDialog').parentNode.scrollTop = 0; + document.getElementById("notificationTestDialog").parentElement.scrollTop = 0; // restore buttons - Array.prototype.forEach.call(_buttons, function (button) { - button.innerHTML = Language.get('wcf.acp.devtools.notificationTest.button.test'); + this.buttons.forEach((button) => { + button.innerHTML = Language.get("wcf.acp.devtools.notificationTest.button.test"); button.disabled = false; }); - }, + } /** * Changes the view after clicking on one of the buttons. - * - * @param {Event} event button click event */ - _changeView: function (event) { - var button = event.currentTarget; - var dialog = UiDialog.getDialog(this).dialog; - elBySelAll('.notificationTestSection', dialog, elHide); - elShow(elById(button.id.replace('Button', ''))); - var primaryButton = elBySel('.formSubmit .buttonPrimary', dialog); - primaryButton.classList.remove('buttonPrimary'); - primaryButton.classList.add('button'); - button.classList.remove('button'); - button.classList.add('buttonPrimary'); - elById('notificationTestDialog').parentNode.scrollTop = 0; - }, + changeView(event) { + const button = event.currentTarget; + const dialog = Dialog_1.default.getDialog(this).dialog; + dialog.querySelectorAll(".notificationTestSection").forEach((section) => Util_1.default.hide(section)); + const containerId = button.id.replace("Button", ""); + Util_1.default.show(document.getElementById(containerId)); + const primaryButton = dialog.querySelector(".formSubmit .buttonPrimary"); + primaryButton.classList.remove("buttonPrimary"); + primaryButton.classList.add("button"); + button.classList.remove("button"); + button.classList.add("buttonPrimary"); + document.getElementById("notificationTestDialog").parentElement.scrollTop = 0; + } /** * Returns the data used to setup the dialog. - * - * @return {object} setup data */ - _dialogSetup: function () { + _dialogSetup() { return { - id: 'notificationTestDialog', - source: null + id: "notificationTestDialog", + source: null, }; - }, + } /** * Executes a test after clicking on a test button. - * - * @param {Event} event */ - _test: function (event) { - var button = event.currentTarget; + test(event) { + const button = event.currentTarget; button.innerHTML = ''; - Array.prototype.forEach.call(_buttons, function (button) { - button.disabled = true; - }); + this.buttons.forEach((button) => (button.disabled = true)); Ajax.api(this, { parameters: { - eventID: elData(button, 'event-id') - } + eventID: ~~button.dataset.eventId, + }, }); } - }; + } + let acpUiDevtoolsNotificationTest; + /** + * Initializes the user notification test handler. + */ + function init() { + if (!acpUiDevtoolsNotificationTest) { + acpUiDevtoolsNotificationTest = new AcpUiDevtoolsNotificationTest(); + } + } + exports.init = init; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Notification/Test.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Notification/Test.js deleted file mode 100644 index 06a0c7ad18..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Notification/Test.js +++ /dev/null @@ -1,130 +0,0 @@ -/** - * Executes user notification tests. - * - * @author Matthias Schmidt - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Acp/Ui/Devtools/Project/QuickSetup - */ -define(['Ajax', 'Dictionary', 'Language', 'Ui/Dialog'], function(Ajax, Dictionary, Language, UiDialog) { - var _buttons = elByClass('jsTestEventButton'); - var _titles = new Dictionary(); - - return { - /** - * Initializes the user notification test handler. - */ - init: function() { - Array.prototype.forEach.call(_buttons, function(button) { - button.addEventListener('click', this._test.bind(this)); - - _titles.set(~~elData(button, 'event-id'), elData(button, 'title')); - }.bind(this)); - }, - - /** - * Returns the data used to setup the AJAX request object. - * - * @return {object} setup data - */ - _ajaxSetup: function() { - return { - data: { - actionName: 'testEvent', - className: 'wcf\\data\\user\\notification\\event\\UserNotificationEventAction' - } - } - }, - - /** - * Handles successful AJAX request. - * - * @param {object} data response data - */ - _ajaxSuccess: function(data) { - UiDialog.open(this, data.returnValues.template); - UiDialog.setTitle(this, _titles.get(~~data.returnValues.eventID)); - - var dialog = UiDialog.getDialog(this).dialog; - - elBySelAll('.formSubmit button', dialog, function(button) { - button.addEventListener('click', this._changeView.bind(this)); - }.bind(this)); - - // fix some margin issues - var errors = elByClass('error', dialog); - if (errors.length === 1) { - errors.item(0).style.setProperty('margin-top', '0px'); - errors.item(0).style.setProperty('margin-bottom', '20px'); - } - - elBySelAll('.notificationTestSection', dialog, function(section) { - section.style.setProperty('margin-top', '0px'); - }); - - elById('notificationTestDialog').parentNode.scrollTop = 0; - - // restore buttons - Array.prototype.forEach.call(_buttons, function(button) { - button.innerHTML = Language.get('wcf.acp.devtools.notificationTest.button.test'); - button.disabled = false; - }); - }, - - /** - * Changes the view after clicking on one of the buttons. - * - * @param {Event} event button click event - */ - _changeView: function(event) { - var button = event.currentTarget; - - var dialog = UiDialog.getDialog(this).dialog; - - elBySelAll('.notificationTestSection', dialog, elHide); - elShow(elById(button.id.replace('Button', ''))); - - var primaryButton = elBySel('.formSubmit .buttonPrimary', dialog); - primaryButton.classList.remove('buttonPrimary'); - primaryButton.classList.add('button'); - - button.classList.remove('button'); - button.classList.add('buttonPrimary'); - - elById('notificationTestDialog').parentNode.scrollTop = 0; - }, - - /** - * Returns the data used to setup the dialog. - * - * @return {object} setup data - */ - _dialogSetup: function() { - return { - id: 'notificationTestDialog', - source: null - } - }, - - /** - * Executes a test after clicking on a test button. - * - * @param {Event} event - */ - _test: function(event) { - var button = event.currentTarget; - - button.innerHTML = ''; - - Array.prototype.forEach.call(_buttons, function(button) { - button.disabled = true; - }); - - Ajax.api(this, { - parameters: { - eventID: elData(button, 'event-id') - } - }); - } - }; -}); \ No newline at end of file diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Notification/Test.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Notification/Test.ts new file mode 100644 index 0000000000..72b2cf6bf3 --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Notification/Test.ts @@ -0,0 +1,147 @@ +/** + * Executes user notification tests. + * + * @author Matthias Schmidt + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Acp/Ui/Devtools/Project/QuickSetup + */ + +import * as Ajax from "../../../../Ajax"; +import * as Language from "../../../../Language"; +import UiDialog from "../../../../Ui/Dialog"; +import { AjaxCallbackObject, AjaxCallbackSetup } from "../../../../Ajax/Data"; +import { DialogCallbackObject, DialogCallbackSetup } from "../../../../Ui/Dialog/Data"; +import DomUtil from "../../../../Dom/Util"; + +interface AjaxResponse { + returnValues: { + eventID: number; + template: string; + }; +} + +class AcpUiDevtoolsNotificationTest implements AjaxCallbackObject, DialogCallbackObject { + private readonly buttons: HTMLButtonElement[]; + private readonly titles = new Map(); + + /** + * Initializes the user notification test handler. + */ + constructor() { + this.buttons = Array.from(document.querySelectorAll(".jsTestEventButton")); + + this.buttons.forEach((button) => { + button.addEventListener("click", (ev) => this.test(ev)); + + const eventId = ~~button.dataset.eventId!; + const title = button.dataset.title!; + this.titles.set(eventId, title); + }); + } + + /** + * Returns the data used to setup the AJAX request object. + */ + _ajaxSetup(): ReturnType { + return { + data: { + actionName: "testEvent", + className: "wcf\\data\\user\\notification\\event\\UserNotificationEventAction", + }, + }; + } + + /** + * Handles successful AJAX request. + */ + _ajaxSuccess(data: AjaxResponse): void { + UiDialog.open(this, data.returnValues.template); + UiDialog.setTitle(this, this.titles.get(~~data.returnValues.eventID)!); + + const dialog = UiDialog.getDialog(this)!.dialog; + + dialog.querySelectorAll(".formSubmit button").forEach((button: HTMLButtonElement) => { + button.addEventListener("click", (ev) => this.changeView(ev)); + }); + + // fix some margin issues + const errors: HTMLElement[] = Array.from(dialog.querySelectorAll(".error")); + if (errors.length === 1) { + errors[0].style.setProperty("margin-top", "0px"); + errors[0].style.setProperty("margin-bottom", "20px"); + } + + dialog.querySelectorAll(".notificationTestSection").forEach((section: HTMLElement) => { + section.style.setProperty("margin-top", "0px"); + }); + + document.getElementById("notificationTestDialog")!.parentElement!.scrollTop = 0; + + // restore buttons + this.buttons.forEach((button) => { + button.innerHTML = Language.get("wcf.acp.devtools.notificationTest.button.test"); + button.disabled = false; + }); + } + + /** + * Changes the view after clicking on one of the buttons. + */ + private changeView(event: MouseEvent): void { + const button = event.currentTarget as HTMLButtonElement; + + const dialog = UiDialog.getDialog(this)!.dialog; + + dialog.querySelectorAll(".notificationTestSection").forEach((section: HTMLElement) => DomUtil.hide(section)); + const containerId = button.id.replace("Button", ""); + DomUtil.show(document.getElementById(containerId)!); + + const primaryButton = dialog.querySelector(".formSubmit .buttonPrimary") as HTMLElement; + primaryButton.classList.remove("buttonPrimary"); + primaryButton.classList.add("button"); + + button.classList.remove("button"); + button.classList.add("buttonPrimary"); + + document.getElementById("notificationTestDialog")!.parentElement!.scrollTop = 0; + } + + /** + * Returns the data used to setup the dialog. + */ + _dialogSetup(): ReturnType { + return { + id: "notificationTestDialog", + source: null, + }; + } + + /** + * Executes a test after clicking on a test button. + */ + private test(event: MouseEvent): void { + const button = event.currentTarget as HTMLButtonElement; + + button.innerHTML = ''; + + this.buttons.forEach((button) => (button.disabled = true)); + + Ajax.api(this, { + parameters: { + eventID: ~~button.dataset.eventId!, + }, + }); + } +} + +let acpUiDevtoolsNotificationTest: AcpUiDevtoolsNotificationTest; + +/** + * Initializes the user notification test handler. + */ +export function init(): void { + if (!acpUiDevtoolsNotificationTest) { + acpUiDevtoolsNotificationTest = new AcpUiDevtoolsNotificationTest(); + } +}