Add `ColorUtil.isValidColor()`

diff --git a/ts/WoltLabSuite/Core/ColorUtil.ts b/ts/WoltLabSuite/Core/ColorUtil.ts
index 86633b0a5a793e35814e2fca0d19ba168d48d626..002119a27e4321a05f44ecf064c23ded6289772e 100644 (file)
--- a/ts/WoltLabSuite/Core/ColorUtil.ts
+++ b/ts/WoltLabSuite/Core/ColorUtil.ts
@@ -228,6 +228,40 @@ export function rgbaToString(rgba: RGBA): string {
   return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
 }
 
+/**
+ * @since 5.5
+ */
+function getColorChecker(): HTMLSpanElement {
+  let colorChecker = document.getElementById("jsColorUtilColorChecker");
+  if (colorChecker === null) {
+    colorChecker = document.createElement("span");
+    colorChecker.id = "jsColorUtilColorChecker";
+    document.body.appendChild(colorChecker);
+  }
+
+  return colorChecker;
+}
+
+/**
+ * Returns `true` if the given string is a valid CSS color argument.
+ *
+ * @since 5.5
+ */
+export function isValidColor(color: string): boolean {
+  const colorChecker = getColorChecker();
+
+  // We let the browser handle the validation of the color by
+  // 1. ensuring that the `color` style property of the test element is empty,
+  // 2. setting the value of the `color` style property to the given value,
+  // 3. checking that the value of the `color` style property is not empty afterwards.
+  //    If the entered value is valid, the `color` style property will not empty (though it also
+  //    does not have to match the entered value due to normalization by the browser)
+  colorChecker.style.color = "";
+  colorChecker.style.color = color;
+
+  return colorChecker.style.color !== "";
+}
+
 export interface RGB {
   r: number;
   g: number;
@@ -251,6 +285,7 @@ export interface HSV {
 window.__wcf_bc_colorUtil = {
   hexToRgb,
   hsvToRgb,
+  isValidColor,
   rgbaToHex,
   rgbaToString,
   rgbToHex,

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/ColorUtil.js b/wcfsetup/install/files/js/WoltLabSuite/Core/ColorUtil.js
index 7685e9d0a33d204884292d5df88394c6d4b06f64..c7f870aa559ba35868a3bcb5b1107e465ff57f48 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/ColorUtil.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/ColorUtil.js
@@ -10,7 +10,7 @@
 define(["require", "exports"], function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.rgbaToString = exports.rgbaToHex = exports.rgbToHex = exports.hexToRgb = exports.rgbToHsv = exports.hsvToRgb = void 0;
+    exports.isValidColor = exports.rgbaToString = exports.rgbaToHex = exports.rgbToHex = exports.hexToRgb = exports.rgbToHsv = exports.hsvToRgb = void 0;
     /**
      * Converts a HSV color into RGB.
      *
@@ -196,10 +196,41 @@ define(["require", "exports"], function (require, exports) {
         return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
     }
     exports.rgbaToString = rgbaToString;
+    /**
+     * @since 5.5
+     */
+    function getColorChecker() {
+        let colorChecker = document.getElementById("jsColorUtilColorChecker");
+        if (colorChecker === null) {
+            colorChecker = document.createElement("span");
+            colorChecker.id = "jsColorUtilColorChecker";
+            document.body.appendChild(colorChecker);
+        }
+        return colorChecker;
+    }
+    /**
+     * Returns `true` if the given string is a valid CSS color argument.
+     *
+     * @since 5.5
+     */
+    function isValidColor(color) {
+        const colorChecker = getColorChecker();
+        // We let the browser handle the validation of the color by
+        // 1. ensuring that the `color` style property of the test element is empty,
+        // 2. setting the value of the `color` style property to the given value,
+        // 3. checking that the value of the `color` style property is not empty afterwards.
+        //    If the entered value is valid, the `color` style property will not empty (though it also
+        //    does not have to match the entered value due to normalization by the browser)
+        colorChecker.style.color = "";
+        colorChecker.style.color = color;
+        return colorChecker.style.color !== "";
+    }
+    exports.isValidColor = isValidColor;
     // WCF.ColorPicker compatibility (color format conversion)
     window.__wcf_bc_colorUtil = {
         hexToRgb,
         hsvToRgb,
+        isValidColor,
         rgbaToHex,
         rgbaToString,
         rgbToHex,