Reduce the jittery of the live preview of label badges

See https://www.woltlab.com/community/thread/314429/

Author: dtdesign

com.woltlab.wcf/templates/shared_badgeColorFormField.tpl

@@ -1,6 +1,6 @@
 <ul class="labelSelection{if !$field->getClasses()|empty} {implode from=$field->getClasses() item=class glue=' '}{$class}{/implode}{/if}">
 	{foreach from=$field->getOptions() item=color}
-		<li{if $color == 'custom'} class="custom"{/if}>
+		<li{if $color === 'custom'} class="labelSelection__custom custom"{/if}>
 			<label class="labelSelection__label">
 				<input {*
 					*}type="radio" {*
@@ -11,8 +11,8 @@
 					*}{if $field->isImmutable()} disabled{/if}{*
 					*}{foreach from=$field->getFieldAttributes() key=attributeName item=attributeValue} {$attributeName}="{$attributeValue}"{/foreach}{*
 					*}>
-				{if $color == 'custom'}
-					<span class="labelSelection__span">
+				{if $color === 'custom'}
+					<span class="labelSelection__span labelSelection__span--custom">
 						<input type="text" id="{$field->getPrefixedId()}Custom" {*
 							*}name="{$field->getPrefixedId()}customCssClassName" {*
 						    *}value="{$field->getCustomClassName()}" {*
@@ -30,8 +30,8 @@
 
 <script data-relocate="true">
 	{if $field->getTextReferenceNodeId()}
-		require(["WoltLabSuite/Core/Form/Builder/Field/Controller/BadgeColor"], ({ BadgeColorPreview }) => {
-			new BadgeColorPreview(
+		require(["WoltLabSuite/Core/Form/Builder/Field/Controller/BadgeColor"], ({ setup }) => {
+			setup(
 				'{unsafe:$field->getPrefixedId()|encodeJS}Container',
 				'{unsafe:$field->getTextReferenceNodeId()|encodeJS}',
 				'{unsafe:$field->getDefaultLabelText()|encodeJS}',

ts/WoltLabSuite/Core/Form/Builder/Field/Controller/BadgeColor.ts

@@ -1,36 +1,45 @@
 /**
- * @author    Olaf Braun
- * @copyright 2001-2024 WoltLab GmbH
+ * @author    Alexander Ebert
+ * @copyright 2001-2025 WoltLab GmbH
  * @license   GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @since     6.2
  * @woltlabExcludeBundle all
  */
 
-export class BadgeColorPreview {
-  readonly #container: HTMLElement | null;
-  readonly #referenceField: HTMLInputElement | null;
-  readonly #defaultLabelText: string;
-
-  constructor(fieldId: string, referenceFieldId: string, defaultLabelText: string) {
-    this.#defaultLabelText = defaultLabelText;
-    this.#container = document.getElementById(fieldId);
-
-    if (this.#container === null) {
-      throw new Error("Unknown field with id '" + fieldId + "'.");
-    }
-    this.#referenceField = document.getElementById(referenceFieldId) as HTMLInputElement | null;
-    if (this.#referenceField === null) {
-      throw new Error("Unknown reference element '" + referenceFieldId + "'.");
+function updatePreview(inputField: HTMLInputElement, fields: HTMLElement[], placeholder: string): void {
+  window.requestAnimationFrame(() => {
+    const value = inputField.value.trim() || placeholder;
+    for (const field of fields) {
+      field.textContent = value;
     }
+  });
+}
 
-    this.#referenceField.addEventListener("input", () => this.#updatePreview());
-    this.#updatePreview();
+export function setup(containerId: string, inputFieldId: string, placeholder: string): void {
+  const container = document.getElementById(containerId);
+  if (container === null) {
+    throw new Error(`Unknown container with id '${containerId}'.`);
   }
 
-  #updatePreview(): void {
-    const value = this.#referenceField!.value.trim() || this.#defaultLabelText;
-    this.#container!.querySelectorAll(".labelSelection__span.badge").forEach((span: HTMLSpanElement) => {
-      span.textContent = value;
-    });
+  const inputField = document.getElementById(inputFieldId);
+  if (inputField === null) {
+    throw new Error(`Unknown input field with id '${inputFieldId}'.`);
+  } else if (!(inputField instanceof HTMLInputElement)) {
+    throw new Error("Expected the input field to be an <input> element.", { cause: { inputField } });
   }
+
+  const fields = Array.from(
+    container.querySelectorAll<HTMLElement>(".labelSelection__span:not(.labelSelection__span--custom)"),
+  );
+  if (fields.length === 0) {
+    throw new Error("The container does not contain any fields.", { cause: { container } });
+  }
+
+  inputField.addEventListener(
+    "input",
+    () => {
+      updatePreview(inputField, fields, placeholder);
+    },
+    { passive: true },
+  );
 }

wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/BadgeColor.js

@@ -48,7 +48,6 @@ final class BadgeColorFormField extends RadioButtonFormField implements IPattern
     public function __construct()
     {
         $this
-            ->addClass('inlineList')
             ->addFieldClass('labelSelection__radio')
             ->defaultLabelText(WCF::getLanguage()->get('wcf.acp.label.defaultValue'))
             ->options(\array_combine(self::AVAILABLE_CSS_CLASSNAMES, self::AVAILABLE_CSS_CLASSNAMES))

wcfsetup/install/files/lib/system/form/builder/field/BadgeColorFormField.class.php

@@ -51,12 +51,11 @@
 	cursor: pointer;
 }
 
-.labelSelection.inlineList > li {
-	flex-basis: 30%;
-}
-
-.labelSelection > li.custom {
-	display: flex;
+.labelSelection {
+	column-gap: 10px;
+	display: grid;
+	grid-auto-flow: row;
+	grid-template-columns: repeat(3, 1fr);
 }
 
 .labelSelection__label {
@@ -71,6 +70,16 @@
 	margin-right: 7px;
 }
 
-.labelSelection > li.custom .labelSelection__span {
+.labelSelection__span {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.labelSelection__custom {
+	display: flex;
+}
+
+.labelSelection__custom .labelSelection__span {
 	flex: 1 1 auto;
 }