From 67df160321d264e0babcee4d262986350fb33376 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Sat, 5 Dec 2020 19:13:44 +0100 Subject: [PATCH] Convert `Acp/Ui/Trophy/Badge` to TypeScript --- .../WoltLabSuite/Core/Acp/Ui/Trophy/Badge.js | 210 +++++++++--------- .../WoltLabSuite/Core/Acp/Ui/Trophy/Badge.js | 182 --------------- .../WoltLabSuite/Core/Acp/Ui/Trophy/Badge.ts | 202 +++++++++++++++++ 3 files changed, 312 insertions(+), 282 deletions(-) delete mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.js create mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.ts diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.js index 6f8e3ad56e..e018481339 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.js @@ -1,149 +1,159 @@ /** * Provides the trophy icon designer. * - * @author Joshua Ruesweg - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Acp/Ui/Trophy/Badge + * @author Joshua Ruesweg + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Acp/Ui/Trophy/Badge */ -define(['Core', 'Dictionary', 'Language', 'Ui/Dialog', 'WoltLabSuite/Core/Ui/Color/Picker', 'WoltLabSuite/Core/Ui/Style/FontAwesome'], function (Core, Dictionary, Language, UiDialog, UiColorPicker, UiStyleFontAwesome) { +define(["require", "exports", "tslib", "../../../Language", "../../../Ui/Dialog", "../../../Ui/Style/FontAwesome"], function (require, exports, tslib_1, Language, Dialog_1, UiStyleFontAwesome) { "use strict"; - var _icon, _iconNameInput, _iconColorInput, _badgeColorInput, _dialogContent, _iconColor, _badgeColor; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.init = void 0; + Language = tslib_1.__importStar(Language); + Dialog_1 = tslib_1.__importDefault(Dialog_1); + UiStyleFontAwesome = tslib_1.__importStar(UiStyleFontAwesome); /** * @exports WoltLabSuite/Core/Acp/Ui/Trophy/Badge */ - return { + class AcpUiTrophyBadge { /** * Initializes the badge designer. */ - init: function () { - var iconContainer = elById('badgeContainer'); - elBySel('.button', iconContainer).addEventListener('click', this._click.bind(this)); - _iconNameInput = elBySel('input[name="iconName"]', iconContainer); - _iconColorInput = elBySel('input[name="iconColor"]', iconContainer); - _badgeColorInput = elBySel('input[name="badgeColor"]', iconContainer); - }, + constructor() { + this.badgeColor = undefined; + this.dialogContent = undefined; + this.icon = undefined; + this.iconColor = undefined; + const iconContainer = document.getElementById("badgeContainer"); + const button = iconContainer.querySelector(".button"); + button.addEventListener("click", (ev) => this.click(ev)); + this.iconNameInput = iconContainer.querySelector('input[name="iconName"]'); + this.iconColorInput = iconContainer.querySelector('input[name="iconColor"]'); + this.badgeColorInput = iconContainer.querySelector('input[name="badgeColor"]'); + } /** * Opens the icon designer. - * - * @param {Event} event event object - * @protected */ - _click: function (event) { + click(event) { event.preventDefault(); - UiDialog.open(this); - }, + Dialog_1.default.open(this); + } /** * Sets the icon name. - * - * @param {string} iconName icon name - * @protected */ - _setIcon: function (iconName) { - _icon.textContent = iconName; - this._renderIcon(); - }, + setIcon(iconName) { + this.icon.textContent = iconName; + this.renderIcon(); + } /** * Sets the icon color, can be either a string or an object holding the * individual r, g, b and a values. - * - * @param {(string|Object)} color color data - * @protected */ - _setIconColor: function (color) { + setIconColor(color) { if (typeof color !== "string") { - color = 'rgba(' + color.r + ', ' + color.g + ', ' + color.b + ', ' + color.a + ')'; + color = `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`; } - elData(_iconColor, 'color', color); - _iconColor.style.setProperty('background-color', color, ''); - this._renderIcon(); - }, + this.iconColor.dataset.color = color; + this.iconColor.style.setProperty("background-color", color, ""); + this.renderIcon(); + } /** * Sets the badge color, can be either a string or an object holding the * individual r, g, b and a values. - * - * @param {(string|Object)} color color data - * @protected */ - _setBadgeColor: function (color) { + setBadgeColor(color) { if (typeof color !== "string") { - color = 'rgba(' + color.r + ', ' + color.g + ', ' + color.b + ', ' + color.a + ')'; + color = `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`; } - elData(_badgeColor, 'color', color); - _badgeColor.style.setProperty('background-color', color, ''); - this._renderIcon(); - }, + this.badgeColor.dataset.color = color; + this.badgeColor.style.setProperty("background-color", color, ""); + this.renderIcon(); + } /** * Renders the custom icon preview. - * - * @protected */ - _renderIcon: function () { - var iconColor = _iconColor.style.getPropertyValue('background-color'); - var badgeColor = _badgeColor.style.getPropertyValue('background-color'); - var icon = elBySel('.jsTrophyIcon', _dialogContent); + renderIcon() { + const iconColor = this.iconColor.style.getPropertyValue("background-color"); + const badgeColor = this.badgeColor.style.getPropertyValue("background-color"); + const icon = this.dialogContent.querySelector(".jsTrophyIcon"); // set icon - icon.className = icon.className.replace(/\b(fa-[a-z0-9\-]+)\b/, ''); - icon.classList.add('fa-' + _icon.textContent); - icon.style.setProperty('color', iconColor, ''); - icon.style.setProperty('background-color', badgeColor, ''); - }, + icon.className = icon.className.replace(/\b(fa-[a-z0-9-]+)\b/, ""); + icon.classList.add(`fa-${this.icon.textContent}`); + icon.style.setProperty("color", iconColor, ""); + icon.style.setProperty("background-color", badgeColor, ""); + } /** * Saves the custom icon design. - * - * @param {Event} event event object - * @protected */ - _save: function (event) { + save(event) { event.preventDefault(); - var iconColor = _iconColor.style.getPropertyValue('background-color'); - var badgeColor = _badgeColor.style.getPropertyValue('background-color'); - var icon = _icon.textContent; - _iconNameInput.value = icon; - _badgeColorInput.value = badgeColor; - _iconColorInput.value = iconColor; - var previewIcon = elBySel('.jsTrophyIcon', elById('iconContainer')); + const iconColor = this.iconColor.style.getPropertyValue("background-color"); + const badgeColor = this.badgeColor.style.getPropertyValue("background-color"); + const icon = this.icon.textContent; + this.iconNameInput.value = icon; + this.badgeColorInput.value = badgeColor; + this.iconColorInput.value = iconColor; + const iconContainer = document.getElementById("iconContainer"); + const previewIcon = iconContainer.querySelector(".jsTrophyIcon"); // set icon - previewIcon.className = previewIcon.className.replace(/\b(fa-[a-z0-9\-]+)\b/, ''); - previewIcon.classList.add('fa-' + icon); - previewIcon.style.setProperty('color', iconColor, ''); - previewIcon.style.setProperty('background-color', badgeColor, ''); - UiDialog.close(this); - }, - _dialogSetup: function () { + previewIcon.className = previewIcon.className.replace(/\b(fa-[a-z0-9-]+)\b/, ""); + previewIcon.classList.add("fa-" + icon); + previewIcon.style.setProperty("color", iconColor, ""); + previewIcon.style.setProperty("background-color", badgeColor, ""); + Dialog_1.default.close(this); + } + _dialogSetup() { return { - id: 'trophyIconEditor', + id: "trophyIconEditor", options: { - onSetup: (function (context) { - _dialogContent = context; - _iconColor = elBySel('#jsIconColorContainer .colorBoxValue', context); - _badgeColor = elBySel('#jsBadgeColorContainer .colorBoxValue', context); - _icon = elBySel('.jsTrophyIconName', context); - elBySel('.jsTrophyIconName + .button', context).addEventListener('click', (function (event) { + onSetup: (context) => { + this.dialogContent = context; + this.iconColor = context.querySelector("#jsIconColorContainer .colorBoxValue"); + this.badgeColor = context.querySelector("#jsBadgeColorContainer .colorBoxValue"); + this.icon = context.querySelector(".jsTrophyIconName"); + const buttonIconPicker = context.querySelector(".jsTrophyIconName + .button"); + buttonIconPicker.addEventListener("click", (event) => { event.preventDefault(); - UiStyleFontAwesome.open(this._setIcon.bind(this)); - }).bind(this)); - elBySel('.jsButtonIconColorPicker', elById('jsIconColorContainer')).addEventListener('click', function (event) { + UiStyleFontAwesome.open((iconName) => this.setIcon(iconName)); + }); + const iconColorContainer = document.getElementById("jsIconColorContainer"); + const iconColorPicker = iconColorContainer.querySelector(".jsButtonIconColorPicker"); + iconColorPicker.addEventListener("click", (event) => { event.preventDefault(); - Core.triggerEvent(elBySel('.jsColorPicker', elById('jsIconColorContainer')), 'click'); + const picker = iconColorContainer.querySelector(".jsColorPicker"); + picker.click(); }); - elBySel('.jsButtonBadgeColorPicker', elById('jsBadgeColorContainer')).addEventListener('click', function (event) { + const badgeColorContainer = document.getElementById("jsBadgeColorContainer"); + const badgeColorPicker = badgeColorContainer.querySelector(".jsButtonBadgeColorPicker"); + badgeColorPicker.addEventListener("click", (event) => { event.preventDefault(); - Core.triggerEvent(elBySel('.jsColorPicker', elById('jsBadgeColorContainer')), 'click'); + const picker = badgeColorContainer.querySelector(".jsColorPicker"); + picker.click(); }); - var colorPicker = new WCF.ColorPicker('.jsColorPicker'); - colorPicker.setCallbackSubmit(this._renderIcon.bind(this)); - elBySel('.formSubmit > .buttonPrimary', context).addEventListener('click', this._save.bind(this)); - return; - }).bind(this), - onShow: (function () { - this._setIcon(_iconNameInput.value); - this._setIconColor(_iconColorInput.value); - this._setBadgeColor(_badgeColorInput.value); - }).bind(this), - title: Language.get('wcf.acp.trophy.badge.edit') - } + const colorPicker = new window.WCF.ColorPicker(".jsColorPicker"); + colorPicker.setCallbackSubmit(() => this.renderIcon()); + const submitButton = context.querySelector(".formSubmit > .buttonPrimary"); + submitButton.addEventListener("click", (ev) => this.save(ev)); + }, + onShow: () => { + this.setIcon(this.iconNameInput.value); + this.setIconColor(this.iconColorInput.value); + this.setBadgeColor(this.badgeColorInput.value); + }, + title: Language.get("wcf.acp.trophy.badge.edit"), + }, }; } - }; + } + let acpUiTrophyBadge; + /** + * Initializes the badge designer. + */ + function init() { + if (!acpUiTrophyBadge) { + acpUiTrophyBadge = new AcpUiTrophyBadge(); + } + } + exports.init = init; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.js deleted file mode 100644 index f30502b4ce..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.js +++ /dev/null @@ -1,182 +0,0 @@ -/** - * Provides the trophy icon designer. - * - * @author Joshua Ruesweg - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Acp/Ui/Trophy/Badge - */ -define(['Core', 'Dictionary', 'Language', 'Ui/Dialog', 'WoltLabSuite/Core/Ui/Color/Picker', 'WoltLabSuite/Core/Ui/Style/FontAwesome'], function (Core, Dictionary, Language, UiDialog, UiColorPicker, UiStyleFontAwesome) { - "use strict"; - - var _icon, _iconNameInput, _iconColorInput, _badgeColorInput, _dialogContent, _iconColor, _badgeColor; - - /** - * @exports WoltLabSuite/Core/Acp/Ui/Trophy/Badge - */ - return { - /** - * Initializes the badge designer. - */ - init: function () { - var iconContainer = elById('badgeContainer'); - elBySel('.button', iconContainer).addEventListener('click', this._click.bind(this)); - - _iconNameInput = elBySel('input[name="iconName"]', iconContainer); - _iconColorInput = elBySel('input[name="iconColor"]', iconContainer); - _badgeColorInput = elBySel('input[name="badgeColor"]', iconContainer); - }, - - /** - * Opens the icon designer. - * - * @param {Event} event event object - * @protected - */ - _click: function (event) { - event.preventDefault(); - - UiDialog.open(this); - }, - - /** - * Sets the icon name. - * - * @param {string} iconName icon name - * @protected - */ - _setIcon: function (iconName) { - _icon.textContent = iconName; - - this._renderIcon(); - }, - - /** - * Sets the icon color, can be either a string or an object holding the - * individual r, g, b and a values. - * - * @param {(string|Object)} color color data - * @protected - */ - _setIconColor: function (color) { - if (typeof color !== "string") { - color = 'rgba(' + color.r + ', ' + color.g + ', ' + color.b + ', ' + color.a + ')'; - } - - elData(_iconColor, 'color', color); - _iconColor.style.setProperty('background-color', color, ''); - - this._renderIcon(); - }, - - /** - * Sets the badge color, can be either a string or an object holding the - * individual r, g, b and a values. - * - * @param {(string|Object)} color color data - * @protected - */ - _setBadgeColor: function (color) { - if (typeof color !== "string") { - color = 'rgba(' + color.r + ', ' + color.g + ', ' + color.b + ', ' + color.a + ')'; - } - - elData(_badgeColor, 'color', color); - _badgeColor.style.setProperty('background-color', color, ''); - - this._renderIcon(); - }, - - /** - * Renders the custom icon preview. - * - * @protected - */ - _renderIcon: function () { - var iconColor = _iconColor.style.getPropertyValue('background-color'); - var badgeColor = _badgeColor.style.getPropertyValue('background-color'); - - var icon = elBySel('.jsTrophyIcon', _dialogContent); - - // set icon - icon.className = icon.className.replace(/\b(fa-[a-z0-9\-]+)\b/, ''); - icon.classList.add('fa-' + _icon.textContent); - - icon.style.setProperty('color', iconColor, ''); - icon.style.setProperty('background-color', badgeColor, ''); - }, - - /** - * Saves the custom icon design. - * - * @param {Event} event event object - * @protected - */ - _save: function(event) { - event.preventDefault(); - - var iconColor = _iconColor.style.getPropertyValue('background-color'); - var badgeColor = _badgeColor.style.getPropertyValue('background-color'); - var icon = _icon.textContent; - - _iconNameInput.value = icon; - _badgeColorInput.value = badgeColor; - _iconColorInput.value = iconColor; - - var previewIcon = elBySel('.jsTrophyIcon', elById('iconContainer')); - - // set icon - previewIcon.className = previewIcon.className.replace(/\b(fa-[a-z0-9\-]+)\b/, ''); - previewIcon.classList.add('fa-' + icon); - previewIcon.style.setProperty('color', iconColor, ''); - previewIcon.style.setProperty('background-color', badgeColor, ''); - - UiDialog.close(this); - }, - - _dialogSetup: function () { - return { - id: 'trophyIconEditor', - options: { - onSetup: (function (context) { - _dialogContent = context; - - _iconColor = elBySel('#jsIconColorContainer .colorBoxValue', context); - _badgeColor = elBySel('#jsBadgeColorContainer .colorBoxValue', context); - _icon = elBySel('.jsTrophyIconName', context); - - elBySel('.jsTrophyIconName + .button', context).addEventListener('click', (function (event) { - event.preventDefault(); - - UiStyleFontAwesome.open(this._setIcon.bind(this)); - }).bind(this)); - - elBySel('.jsButtonIconColorPicker', elById('jsIconColorContainer')).addEventListener('click', function (event) { - event.preventDefault(); - - Core.triggerEvent(elBySel('.jsColorPicker', elById('jsIconColorContainer')), 'click'); - }); - - elBySel('.jsButtonBadgeColorPicker', elById('jsBadgeColorContainer')).addEventListener('click', function (event) { - event.preventDefault(); - - Core.triggerEvent(elBySel('.jsColorPicker', elById('jsBadgeColorContainer')), 'click'); - }); - - var colorPicker = new WCF.ColorPicker('.jsColorPicker'); - colorPicker.setCallbackSubmit(this._renderIcon.bind(this)); - - elBySel('.formSubmit > .buttonPrimary', context).addEventListener('click', this._save.bind(this)); - return; - }).bind(this), - onShow: (function () { - this._setIcon(_iconNameInput.value); - this._setIconColor(_iconColorInput.value); - this._setBadgeColor(_badgeColorInput.value); - }).bind(this), - title: Language.get('wcf.acp.trophy.badge.edit') - } - }; - } - }; -}); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.ts new file mode 100644 index 0000000000..bedccd0e82 --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.ts @@ -0,0 +1,202 @@ +/** + * Provides the trophy icon designer. + * + * @author Joshua Ruesweg + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Acp/Ui/Trophy/Badge + */ + +import * as Language from "../../../Language"; +import UiDialog from "../../../Ui/Dialog"; +import * as UiStyleFontAwesome from "../../../Ui/Style/FontAwesome"; +import { DialogCallbackObject, DialogCallbackSetup } from "../../../Ui/Dialog/Data"; + +interface Rgba { + r: number; + g: number; + b: number; + a: number; +} + +type Color = string | Rgba; + +/** + * @exports WoltLabSuite/Core/Acp/Ui/Trophy/Badge + */ +class AcpUiTrophyBadge implements DialogCallbackObject { + private badgeColor?: HTMLSpanElement = undefined; + private readonly badgeColorInput: HTMLInputElement; + private dialogContent?: HTMLElement = undefined; + private icon?: HTMLSpanElement = undefined; + private iconColor?: HTMLSpanElement = undefined; + private readonly iconColorInput: HTMLInputElement; + private readonly iconNameInput: HTMLInputElement; + + /** + * Initializes the badge designer. + */ + constructor() { + const iconContainer = document.getElementById("badgeContainer")!; + const button = iconContainer.querySelector(".button") as HTMLElement; + button.addEventListener("click", (ev) => this.click(ev)); + + this.iconNameInput = iconContainer.querySelector('input[name="iconName"]') as HTMLInputElement; + this.iconColorInput = iconContainer.querySelector('input[name="iconColor"]') as HTMLInputElement; + this.badgeColorInput = iconContainer.querySelector('input[name="badgeColor"]') as HTMLInputElement; + } + + /** + * Opens the icon designer. + */ + private click(event: MouseEvent): void { + event.preventDefault(); + + UiDialog.open(this); + } + + /** + * Sets the icon name. + */ + private setIcon(iconName: string): void { + this.icon!.textContent = iconName; + + this.renderIcon(); + } + + /** + * Sets the icon color, can be either a string or an object holding the + * individual r, g, b and a values. + */ + private setIconColor(color: Color): void { + if (typeof color !== "string") { + color = `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`; + } + + this.iconColor!.dataset.color = color; + this.iconColor!.style.setProperty("background-color", color, ""); + + this.renderIcon(); + } + + /** + * Sets the badge color, can be either a string or an object holding the + * individual r, g, b and a values. + */ + private setBadgeColor(color: Color): void { + if (typeof color !== "string") { + color = `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`; + } + + this.badgeColor!.dataset.color = color; + this.badgeColor!.style.setProperty("background-color", color, ""); + + this.renderIcon(); + } + + /** + * Renders the custom icon preview. + */ + private renderIcon(): void { + const iconColor = this.iconColor!.style.getPropertyValue("background-color"); + const badgeColor = this.badgeColor!.style.getPropertyValue("background-color"); + + const icon = this.dialogContent!.querySelector(".jsTrophyIcon") as HTMLElement; + + // set icon + icon.className = icon.className.replace(/\b(fa-[a-z0-9-]+)\b/, ""); + icon.classList.add(`fa-${this.icon!.textContent!}`); + + icon.style.setProperty("color", iconColor, ""); + icon.style.setProperty("background-color", badgeColor, ""); + } + + /** + * Saves the custom icon design. + */ + private save(event: MouseEvent): void { + event.preventDefault(); + + const iconColor = this.iconColor!.style.getPropertyValue("background-color"); + const badgeColor = this.badgeColor!.style.getPropertyValue("background-color"); + const icon = this.icon!.textContent!; + + this.iconNameInput.value = icon; + this.badgeColorInput.value = badgeColor; + this.iconColorInput.value = iconColor; + + const iconContainer = document.getElementById("iconContainer")!; + const previewIcon = iconContainer.querySelector(".jsTrophyIcon") as HTMLElement; + + // set icon + previewIcon.className = previewIcon.className.replace(/\b(fa-[a-z0-9-]+)\b/, ""); + previewIcon.classList.add("fa-" + icon); + previewIcon.style.setProperty("color", iconColor, ""); + previewIcon.style.setProperty("background-color", badgeColor, ""); + + UiDialog.close(this); + } + + _dialogSetup(): ReturnType { + return { + id: "trophyIconEditor", + options: { + onSetup: (context) => { + this.dialogContent = context; + + this.iconColor = context.querySelector("#jsIconColorContainer .colorBoxValue") as HTMLSpanElement; + this.badgeColor = context.querySelector("#jsBadgeColorContainer .colorBoxValue") as HTMLSpanElement; + this.icon = context.querySelector(".jsTrophyIconName") as HTMLSpanElement; + + const buttonIconPicker = context.querySelector(".jsTrophyIconName + .button") as HTMLAnchorElement; + buttonIconPicker.addEventListener("click", (event) => { + event.preventDefault(); + + UiStyleFontAwesome.open((iconName) => this.setIcon(iconName)); + }); + + const iconColorContainer = document.getElementById("jsIconColorContainer")!; + const iconColorPicker = iconColorContainer.querySelector(".jsButtonIconColorPicker") as HTMLAnchorElement; + iconColorPicker.addEventListener("click", (event) => { + event.preventDefault(); + + const picker = iconColorContainer.querySelector(".jsColorPicker") as HTMLAnchorElement; + picker.click(); + }); + + const badgeColorContainer = document.getElementById("jsBadgeColorContainer")!; + const badgeColorPicker = badgeColorContainer.querySelector(".jsButtonBadgeColorPicker") as HTMLAnchorElement; + badgeColorPicker.addEventListener("click", (event) => { + event.preventDefault(); + + const picker = badgeColorContainer.querySelector(".jsColorPicker") as HTMLAnchorElement; + picker.click(); + }); + + const colorPicker = new window.WCF.ColorPicker(".jsColorPicker"); + colorPicker.setCallbackSubmit(() => this.renderIcon()); + + const submitButton = context.querySelector(".formSubmit > .buttonPrimary") as HTMLElement; + submitButton.addEventListener("click", (ev) => this.save(ev)); + }, + onShow: () => { + this.setIcon(this.iconNameInput.value); + this.setIconColor(this.iconColorInput.value); + this.setBadgeColor(this.badgeColorInput.value); + }, + title: Language.get("wcf.acp.trophy.badge.edit"), + }, + }; + } +} + +let acpUiTrophyBadge: AcpUiTrophyBadge; + +/** + * Initializes the badge designer. + */ +export function init(): void { + if (!acpUiTrophyBadge) { + acpUiTrophyBadge = new AcpUiTrophyBadge(); + } +} -- 2.20.1