Convert `Acp/Ui/Trophy/Badge` to TypeScript
authorAlexander Ebert <ebert@woltlab.com>
Sat, 5 Dec 2020 18:13:44 +0000 (19:13 +0100)
committerAlexander Ebert <ebert@woltlab.com>
Sat, 5 Dec 2020 18:13:44 +0000 (19:13 +0100)
wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.js
wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.js [deleted file]
wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.ts [new file with mode: 0644]

index 6f8e3ad56ecab328f47139a4e50f22bc95964047..e0184813398ba22643d45cb145094f0e7b5f15f5 100644 (file)
 /**
  * Provides the trophy icon designer.
  *
- * @author     Joshua Ruesweg
- * @copyright  2001-2019 WoltLab GmbH
- * @license    GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- * @module     WoltLabSuite/Core/Acp/Ui/Trophy/Badge
+ * @author  Joshua Ruesweg
+ * @copyright  2001-2019 WoltLab GmbH
+ * @license  GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @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 (file)
index f30502b..0000000
+++ /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 <http://opensource.org/licenses/lgpl-license.php>
- * @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 (file)
index 0000000..bedccd0
--- /dev/null
@@ -0,0 +1,202 @@
+/**
+ * Provides the trophy icon designer.
+ *
+ * @author  Joshua Ruesweg
+ * @copyright  2001-2019 WoltLab GmbH
+ * @license  GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @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<DialogCallbackSetup> {
+    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();
+  }
+}