/**
* Dialog based style changer.
*
- * @author Alexander Ebert
- * @copyright 2001-2019 WoltLab GmbH
- * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- * @module WoltLabSuite/Core/Controller/Style/Changer
+ * @author Alexander Ebert
+ * @copyright 2001-2019 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @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;
});
+++ /dev/null
-/**
- * Dialog based style changer.
- *
- * @author Alexander Ebert
- * @copyright 2001-2019 WoltLab GmbH
- * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- * @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(); }
- });
- }
- };
-});
--- /dev/null
+/**
+ * Dialog based style changer.
+ *
+ * @author Alexander Ebert
+ * @copyright 2001-2019 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @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<DialogCallbackSetup> {
+ 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);
+}
projects / GitHub / WoltLab / WCF.git / commitdiff