From 57b9a3da0ed092c688ad0a33c98a59c3e374ab17 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Sat, 28 Nov 2020 16:45:26 +0100 Subject: [PATCH] Convert `Acp/Ui/Box/Add` to TypeScript --- .../js/WoltLabSuite/Core/Acp/Ui/Box/Add.js | 110 +++++++++++------- .../ts/WoltLabSuite/Core/Acp/Ui/Box/Add.js | 75 ------------ .../ts/WoltLabSuite/Core/Acp/Ui/Box/Add.ts | 100 ++++++++++++++++ 3 files changed, 168 insertions(+), 117 deletions(-) delete mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Box/Add.js create mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Box/Add.ts diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Box/Add.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Box/Add.js index 9d5cabf648..c7a0fb0524 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Box/Add.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Box/Add.js @@ -1,67 +1,93 @@ /** * Provides the dialog overlay to add a new box. * - * @author Alexander Ebert - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Acp/Ui/Box/Add + * @author Alexander Ebert + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Acp/Ui/Box/Add */ -define(['Core', 'Language', 'Ui/Dialog'], function (Core, Language, UiDialog) { +define(["require", "exports", "tslib", "../../../Language", "../../../Ui/Dialog"], function (require, exports, tslib_1, Language, Dialog_1) { "use strict"; - var _languages, _link; - /** - * @exports WoltLabSuite/Core/Acp/Ui/Box/Add - */ - return { + Object.defineProperty(exports, "__esModule", { value: true }); + exports.openDialog = exports.init = void 0; + Language = tslib_1.__importStar(Language); + Dialog_1 = tslib_1.__importDefault(Dialog_1); + class AcpUiBoxAdd { + constructor() { + this.supportsI18n = false; + this.link = ""; + } /** * Initializes the box add handler. - * - * @param {string} link redirect URL - * @param {int} languages number of available languages */ - init: function (link, languages) { - _languages = languages; - _link = link; - var buttons = elBySelAll('.jsButtonBoxAdd'); - for (var i = 0, length = buttons.length; i < length; i++) { - buttons[i].addEventListener('click', this.openDialog.bind(this)); - } - }, + init(link, supportsI18n) { + this.link = link; + this.supportsI18n = supportsI18n; + document.querySelectorAll(".jsButtonBoxAdd").forEach((button) => { + button.addEventListener("click", (ev) => this.openDialog(ev)); + }); + } /** * Opens the 'Add Box' dialog. - * - * @param {Event=} event event object */ - openDialog: function (event) { + openDialog(event) { if (event instanceof Event) { event.preventDefault(); } - UiDialog.open(this); - }, - _dialogSetup: function () { + Dialog_1.default.open(this); + } + _dialogSetup() { return { - id: 'boxAddDialog', + id: "boxAddDialog", options: { - onSetup: function (content) { - elBySel('button', content).addEventListener('click', function (event) { + onSetup: (content) => { + content.querySelector("button").addEventListener("click", (event) => { event.preventDefault(); - var boxType = elBySel('input[name="boxType"]:checked', content).value; - var isMultilingual = 0; - if (boxType !== 'system' && _languages > 1) - isMultilingual = elBySel('input[name="isMultilingual"]:checked', content).value; - window.location = _link.replace(/{\$boxType}/, boxType).replace(/{\$isMultilingual}/, isMultilingual); + const boxTypeSelection = content.querySelector('input[name="boxType"]:checked'); + const boxType = boxTypeSelection.value; + let isMultilingual = "0"; + if (boxType !== "system" && this.supportsI18n) { + const i18nSelection = content.querySelector('input[name="isMultilingual"]:checked'); + isMultilingual = i18nSelection.value; + } + window.location.href = this.link + .replace("{$boxType}", boxType) + .replace("{$isMultilingual}", isMultilingual); }); - elBySelAll('input[type="radio"][name="boxType"]', content, function (element) { - element.addEventListener('change', function (event) { - elBySelAll('input[type="radio"][name="isMultilingual"]', content, function (element) { - element.disabled = (event.currentTarget.value === 'system'); + content.querySelectorAll('input[type="radio"][name="boxType"]').forEach((boxType) => { + boxType.addEventListener("change", () => { + content + .querySelectorAll('input[type="radio"][name="isMultilingual"]') + .forEach((i18nSelection) => { + i18nSelection.disabled = boxType.value === "system"; }); }); }); }, - title: Language.get('wcf.acp.box.add') - } + title: Language.get("wcf.acp.box.add"), + }, }; } - }; + } + let acpUiDialogAdd; + function getAcpUiDialogAdd() { + if (!acpUiDialogAdd) { + acpUiDialogAdd = new AcpUiBoxAdd(); + } + return acpUiDialogAdd; + } + /** + * Initializes the box add handler. + */ + function init(link, availableLanguages) { + getAcpUiDialogAdd().init(link, availableLanguages > 1); + } + exports.init = init; + /** + * Opens the 'Add Box' dialog. + */ + function openDialog(event) { + getAcpUiDialogAdd().openDialog(event); + } + exports.openDialog = openDialog; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Box/Add.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Box/Add.js deleted file mode 100644 index 710acdfb93..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Box/Add.js +++ /dev/null @@ -1,75 +0,0 @@ -/** - * Provides the dialog overlay to add a new box. - * - * @author Alexander Ebert - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Acp/Ui/Box/Add - */ -define(['Core', 'Language', 'Ui/Dialog'], function(Core, Language, UiDialog) { - "use strict"; - - var _languages, _link; - - /** - * @exports WoltLabSuite/Core/Acp/Ui/Box/Add - */ - return { - /** - * Initializes the box add handler. - * - * @param {string} link redirect URL - * @param {int} languages number of available languages - */ - init: function(link, languages) { - _languages = languages; - _link = link; - - var buttons = elBySelAll('.jsButtonBoxAdd'); - for (var i = 0, length = buttons.length; i < length; i++) { - buttons[i].addEventListener('click', this.openDialog.bind(this)); - } - }, - - /** - * Opens the 'Add Box' dialog. - * - * @param {Event=} event event object - */ - openDialog: function(event) { - if (event instanceof Event) { - event.preventDefault(); - } - - UiDialog.open(this); - }, - - _dialogSetup: function() { - return { - id: 'boxAddDialog', - options: { - onSetup: function(content) { - elBySel('button', content).addEventListener('click', function(event) { - event.preventDefault(); - - var boxType = elBySel('input[name="boxType"]:checked', content).value; - var isMultilingual = 0; - if (boxType !== 'system' && _languages > 1) isMultilingual = elBySel('input[name="isMultilingual"]:checked', content).value; - - window.location = _link.replace(/{\$boxType}/, boxType).replace(/{\$isMultilingual}/, isMultilingual); - }); - - elBySelAll('input[type="radio"][name="boxType"]', content, function(element) { - element.addEventListener('change', function(event) { - elBySelAll('input[type="radio"][name="isMultilingual"]', content, function(element) { - element.disabled = (event.currentTarget.value === 'system'); - }); - }); - }); - }, - title: Language.get('wcf.acp.box.add') - } - }; - } - }; -}); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Box/Add.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Box/Add.ts new file mode 100644 index 0000000000..60f494e344 --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Box/Add.ts @@ -0,0 +1,100 @@ +/** + * Provides the dialog overlay to add a new box. + * + * @author Alexander Ebert + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Acp/Ui/Box/Add + */ + +import { DialogCallbackObject, DialogCallbackSetup } from "../../../Ui/Dialog/Data"; +import * as Language from "../../../Language"; +import UiDialog from "../../../Ui/Dialog"; + +class AcpUiBoxAdd implements DialogCallbackObject { + private supportsI18n = false; + private link = ""; + + /** + * Initializes the box add handler. + */ + init(link: string, supportsI18n: boolean): void { + this.link = link; + this.supportsI18n = supportsI18n; + + document.querySelectorAll(".jsButtonBoxAdd").forEach((button: HTMLElement) => { + button.addEventListener("click", (ev) => this.openDialog(ev)); + }); + } + + /** + * Opens the 'Add Box' dialog. + */ + openDialog(event?: MouseEvent): void { + if (event instanceof Event) { + event.preventDefault(); + } + + UiDialog.open(this); + } + + _dialogSetup(): ReturnType { + return { + id: "boxAddDialog", + options: { + onSetup: (content) => { + content.querySelector("button")!.addEventListener("click", (event) => { + event.preventDefault(); + + const boxTypeSelection = content.querySelector('input[name="boxType"]:checked') as HTMLInputElement; + const boxType = boxTypeSelection.value; + let isMultilingual = "0"; + if (boxType !== "system" && this.supportsI18n) { + const i18nSelection = content.querySelector('input[name="isMultilingual"]:checked') as HTMLInputElement; + isMultilingual = i18nSelection.value; + } + + window.location.href = this.link + .replace("{$boxType}", boxType) + .replace("{$isMultilingual}", isMultilingual); + }); + + content.querySelectorAll('input[type="radio"][name="boxType"]').forEach((boxType: HTMLInputElement) => { + boxType.addEventListener("change", () => { + content + .querySelectorAll('input[type="radio"][name="isMultilingual"]') + .forEach((i18nSelection: HTMLInputElement) => { + i18nSelection.disabled = boxType.value === "system"; + }); + }); + }); + }, + title: Language.get("wcf.acp.box.add"), + }, + }; + } +} + +let acpUiDialogAdd: AcpUiBoxAdd; + +function getAcpUiDialogAdd(): AcpUiBoxAdd { + if (!acpUiDialogAdd) { + acpUiDialogAdd = new AcpUiBoxAdd(); + } + + return acpUiDialogAdd; +} + +/** + * Initializes the box add handler. + */ +export function init(link: string, availableLanguages: number): void { + getAcpUiDialogAdd().init(link, availableLanguages > 1); +} + +/** + * Opens the 'Add Box' dialog. + */ +export function openDialog(event?: MouseEvent): void { + getAcpUiDialogAdd().openDialog(event); +} -- 2.20.1