Simplify the interaction with the color picker

Author: dtdesign

ts/WoltLabSuite/Core/Component/Icon/Badge.ts

@@ -7,46 +7,25 @@
  * @since 6.3
  */
 
-export class IconBadge {
-  #iconContainer: HTMLElement;
-  #colorInput?: HTMLInputElement;
-  #backgroundColorInput?: HTMLInputElement;
-
-  constructor(iconFieldId: string, colorFieldId?: string, backgroundColorFieldId?: string) {
-    this.#iconContainer = document.getElementById(`${iconFieldId}_icon`)!;
-    this.#iconContainer.classList.add("iconBadge");
-
-    const observer = new MutationObserver((mutationsList) => {
-      for (const mutation of mutationsList) {
-        if (mutation.type === "attributes" && mutation.attributeName === "value") {
-          this.#updateIcon();
-        }
-      }
+export function setup(iconFieldId: string, colorFieldId: string, backgroundColorFieldId: string) {
+  const container = document.getElementById(`${iconFieldId}_icon`)!;
+  container.classList.add("iconBadge");
+
+  if (colorFieldId !== "") {
+    const colorInput = document.getElementById(colorFieldId) as HTMLInputElement;
+    colorInput.addEventListener("color-picker:submit", () => {
+      container.style.setProperty("color", colorInput.value);
     });
 
-    if (colorFieldId) {
-      this.#colorInput = document.getElementById(colorFieldId) as HTMLInputElement;
-
-      observer.observe(this.#colorInput, {
-        attributes: true,
-        attributeFilter: ["value"],
-      });
-    }
-
-    if (backgroundColorFieldId) {
-      this.#backgroundColorInput = document.getElementById(backgroundColorFieldId) as HTMLInputElement;
-
-      observer.observe(this.#backgroundColorInput, {
-        attributes: true,
-        attributeFilter: ["value"],
-      });
-    }
-
-    this.#updateIcon();
+    container.style.setProperty("color", colorInput.value);
   }
 
-  #updateIcon(): void {
-    this.#iconContainer.style.color = this.#colorInput?.value || "";
-    this.#iconContainer.style.backgroundColor = this.#backgroundColorInput?.value || "";
+  if (backgroundColorFieldId !== "") {
+    const backgroundColorInput = document.getElementById(backgroundColorFieldId) as HTMLInputElement;
+    backgroundColorInput.addEventListener("color-picker:submit", () => {
+      container.style.setProperty("background-color", backgroundColorInput.value);
+    });
+
+    container.style.setProperty("background-color", backgroundColorInput.value);
   }
 }

ts/WoltLabSuite/Core/Ui/Color/Picker.ts

@@ -131,10 +131,10 @@ class UiColorPicker implements DialogCallbackObject {
     <div class="colorPickerComparison">
       <small>${Language.get("wcf.style.colorPicker.new")}</small>
       <div class="colorPickerColorNew">
-        <span style="background-color: ${this.input.value}"></span>
+        <span style="background-color: ${this.input.value}; flex: 1 auto"></span>
       </div>
       <div class="colorPickerColorOld">
-        <span style="background-color: ${this.input.value}"></span>
+        <span style="background-color: ${this.input.value}; flex: 1 auto"></span>
       </div>
       <small>${Language.get("wcf.style.colorPicker.current")}</small>
     </div>
@@ -354,16 +354,15 @@ class UiColorPicker implements DialogCallbackObject {
     const colorString = ColorUtil.rgbaToString(color);
 
     this.oldColor!.style.backgroundColor = colorString;
-    // The change in value via `this.input.value = colorString;` cannot be detected by a MutationObserver.
-    this.input.setAttribute("value", colorString);
+    this.input.value = colorString;
 
-    if (!(this.element instanceof HTMLButtonElement)) {
-      const span = this.element.querySelector("span");
-      if (span) {
-        span.style.backgroundColor = colorString;
-      } else {
-        this.element.style.backgroundColor = colorString;
-      }
+    const event = new CustomEvent<void>("color-picker:submit");
+    this.input.dispatchEvent(event);
+
+    const span = this.element.querySelector("span")
+    if (span !== null) {
+      span.classList.add("colorPickerButton__color");
+      span.style.setProperty("background-color", colorString);
     }
 
     UiDialog.close(this);

wcfsetup/install/files/acp/templates/trophyAdd.tpl

@@ -20,8 +20,8 @@
 {unsafe:$form->getHtml()}
 
 <script data-relocate="true">
-	require(['WoltLabSuite/Core/Component/Icon/Badge'], ({ IconBadge }) => {
-		new IconBadge('iconName', 'iconColor', 'badgeColor');
+	require(["WoltLabSuite/Core/Component/Icon/Badge"], ({ setup }) => {
+		setup("iconName", "iconColor", "badgeColor");
 	});
 </script>