From ffe59483441c6798669fa6c18e91c1d22a438559 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Fri, 1 Jan 2021 13:25:29 +0100 Subject: [PATCH] Convert `Controller/Style/Changer` to TypeScript --- .../Core/Controller/Style/Changer.js | 100 ++++++++++-------- .../Core/Controller/Style/Changer.js | 79 -------------- .../Core/Controller/Style/Changer.ts | 93 ++++++++++++++++ 3 files changed, 151 insertions(+), 121 deletions(-) delete mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/Style/Changer.js create mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/Style/Changer.ts diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Style/Changer.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Style/Changer.js index 785d9df3c2..702f883ffc 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Style/Changer.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Style/Changer.js @@ -1,72 +1,88 @@ /** * Dialog based style changer. * - * @author Alexander Ebert - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Controller/Style/Changer + * @author Alexander Ebert + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Controller/Style/Changer */ -define(['Ajax', 'Language', 'Ui/Dialog'], function (Ajax, Language, UiDialog) { +define(["require", "exports", "tslib", "../../Ajax", "../../Language", "../../Ui/Dialog"], function (require, exports, tslib_1, Ajax, Language, Dialog_1) { "use strict"; - /** - * @exports WoltLabSuite/Core/Controller/Style/Changer - */ - return { + Object.defineProperty(exports, "__esModule", { value: true }); + exports.showDialog = exports.setup = void 0; + Ajax = tslib_1.__importStar(Ajax); + Language = tslib_1.__importStar(Language); + Dialog_1 = tslib_1.__importDefault(Dialog_1); + class ControllerStyleChanger { /** * Adds the style changer to the bottom navigation. */ - setup: function () { - elBySelAll('.jsButtonStyleChanger', undefined, (function (link) { - link.addEventListener('click', this.showDialog.bind(this)); - }).bind(this)); - }, + constructor() { + document.querySelectorAll(".jsButtonStyleChanger").forEach((link) => { + link.addEventListener("click", (ev) => this.showDialog(ev)); + }); + } /** * Loads and displays the style change dialog. - * - * @param {object} event event object */ - showDialog: function (event) { + showDialog(event) { event.preventDefault(); - UiDialog.open(this); - }, - _dialogSetup: function () { + Dialog_1.default.open(this); + } + _dialogSetup() { return { - id: 'styleChanger', + id: "styleChanger", options: { disableContentPadding: true, - title: Language.get('wcf.style.changeStyle') + title: Language.get("wcf.style.changeStyle"), }, source: { data: { - actionName: 'getStyleChooser', - className: 'wcf\\data\\style\\StyleAction' + actionName: "getStyleChooser", + className: "wcf\\data\\style\\StyleAction", + }, + after: (content) => { + content.querySelectorAll(".styleList > li").forEach((style) => { + style.classList.add("pointer"); + style.addEventListener("click", (ev) => this.click(ev)); + }); }, - after: (function (content) { - var styles = elBySelAll('.styleList > li', content); - for (var i = 0, length = styles.length; i < length; i++) { - var style = styles[i]; - style.classList.add('pointer'); - style.addEventListener('click', this._click.bind(this)); - } - }).bind(this) - } + }, }; - }, + } /** * Changes the style and reloads current page. - * - * @param {object} event event object */ - _click: function (event) { + click(event) { event.preventDefault(); + const listElement = event.currentTarget; Ajax.apiOnce({ data: { - actionName: 'changeStyle', - className: 'wcf\\data\\style\\StyleAction', - objectIDs: [elData(event.currentTarget, 'style-id')] + actionName: "changeStyle", + className: "wcf\\data\\style\\StyleAction", + objectIDs: [listElement.dataset.styleId], + }, + success: function () { + window.location.reload(); }, - success: function () { window.location.reload(); } }); } - }; + } + let controllerStyleChanger; + /** + * Adds the style changer to the bottom navigation. + */ + function setup() { + if (!controllerStyleChanger) { + new ControllerStyleChanger(); + } + } + exports.setup = setup; + /** + * Loads and displays the style change dialog. + */ + function showDialog(event) { + controllerStyleChanger.showDialog(event); + } + exports.showDialog = showDialog; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/Style/Changer.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/Style/Changer.js deleted file mode 100644 index 5c1bec9ccb..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/Style/Changer.js +++ /dev/null @@ -1,79 +0,0 @@ -/** - * Dialog based style changer. - * - * @author Alexander Ebert - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Controller/Style/Changer - */ -define(['Ajax', 'Language', 'Ui/Dialog'], function(Ajax, Language, UiDialog) { - "use strict"; - - /** - * @exports WoltLabSuite/Core/Controller/Style/Changer - */ - return { - /** - * Adds the style changer to the bottom navigation. - */ - setup: function() { - elBySelAll('.jsButtonStyleChanger', undefined, (function (link) { - link.addEventListener('click', this.showDialog.bind(this)); - }).bind(this)); - }, - - /** - * Loads and displays the style change dialog. - * - * @param {object} event event object - */ - showDialog: function(event) { - event.preventDefault(); - - UiDialog.open(this); - }, - - _dialogSetup: function() { - return { - id: 'styleChanger', - options: { - disableContentPadding: true, - title: Language.get('wcf.style.changeStyle') - }, - source: { - data: { - actionName: 'getStyleChooser', - className: 'wcf\\data\\style\\StyleAction' - }, - after: (function(content) { - var styles = elBySelAll('.styleList > li', content); - for (var i = 0, length = styles.length; i < length; i++) { - var style = styles[i]; - - style.classList.add('pointer'); - style.addEventListener('click', this._click.bind(this)); - } - }).bind(this) - } - }; - }, - - /** - * Changes the style and reloads current page. - * - * @param {object} event event object - */ - _click: function(event) { - event.preventDefault(); - - Ajax.apiOnce({ - data: { - actionName: 'changeStyle', - className: 'wcf\\data\\style\\StyleAction', - objectIDs: [ elData(event.currentTarget, 'style-id') ] - }, - success: function() { window.location.reload(); } - }); - } - }; -}); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/Style/Changer.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/Style/Changer.ts new file mode 100644 index 0000000000..8fd8264ab8 --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Controller/Style/Changer.ts @@ -0,0 +1,93 @@ +/** + * Dialog based style changer. + * + * @author Alexander Ebert + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Controller/Style/Changer + */ + +import * as Ajax from "../../Ajax"; +import * as Language from "../../Language"; +import UiDialog from "../../Ui/Dialog"; +import { DialogCallbackSetup } from "../../Ui/Dialog/Data"; + +class ControllerStyleChanger { + /** + * Adds the style changer to the bottom navigation. + */ + constructor() { + document.querySelectorAll(".jsButtonStyleChanger").forEach((link: HTMLAnchorElement) => { + link.addEventListener("click", (ev) => this.showDialog(ev)); + }); + } + + /** + * Loads and displays the style change dialog. + */ + showDialog(event: MouseEvent): void { + event.preventDefault(); + + UiDialog.open(this); + } + + _dialogSetup(): ReturnType { + return { + id: "styleChanger", + options: { + disableContentPadding: true, + title: Language.get("wcf.style.changeStyle"), + }, + source: { + data: { + actionName: "getStyleChooser", + className: "wcf\\data\\style\\StyleAction", + }, + after: (content) => { + content.querySelectorAll(".styleList > li").forEach((style: HTMLLIElement) => { + style.classList.add("pointer"); + style.addEventListener("click", (ev) => this.click(ev)); + }); + }, + }, + }; + } + + /** + * Changes the style and reloads current page. + */ + private click(event: MouseEvent): void { + event.preventDefault(); + + const listElement = event.currentTarget as HTMLLIElement; + + Ajax.apiOnce({ + data: { + actionName: "changeStyle", + className: "wcf\\data\\style\\StyleAction", + objectIDs: [listElement.dataset.styleId], + }, + success: function () { + window.location.reload(); + }, + }); + } +} + +let controllerStyleChanger: ControllerStyleChanger; + +/** + * Adds the style changer to the bottom navigation. + */ +export function setup(): void { + if (!controllerStyleChanger) { + new ControllerStyleChanger(); + } +} + +/** + * Loads and displays the style change dialog. + */ +export function showDialog(event: MouseEvent): void { + controllerStyleChanger.showDialog(event); +} -- 2.20.1