Merge pull request highcharts#22074 from highcharts/feat/21975-4-and-…

…8-digit-color feat/21975-4-and-8-digit-color
miqdigital · Nov 6, 2024 · 6c137a8 · 6c137a8
2 parents 1719c42 + a3b4ecc
commit 6c137a8
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 45 deletions.
diff --git a/samples/unit-tests/highcharts/color/demo.js b/samples/unit-tests/highcharts/color/demo.js
@@ -28,4 +28,16 @@ QUnit.test('Color object', function (assert) {
         'rgba(255,0,0,0.2)',
         'Set opacity'
     );
+
+    assert.strictEqual(
+        color('#f003').get('rgba'),
+        'rgba(255,0,0,0.2)',
+        '4-digit hex color'
+    );
+
+    assert.strictEqual(
+        color('#ff000033').get('rgba'),
+        'rgba(255,0,0,0.2)',
+        '8-digit hex color'
+    );
 });
diff --git a/ts/Core/Color/Color.ts b/ts/Core/Color/Color.ts
@@ -25,7 +25,8 @@ import U from '../Utilities.js';
 const {
     isNumber,
     merge,
-    pInt
+    pInt,
+    defined
 } = U;
 
 /* *
@@ -87,6 +88,34 @@ class Color implements ColorLike {
         parse: function (result: RegExpExecArray): Color.RGBA {
             return [pInt(result[1]), pInt(result[2]), pInt(result[3]), 1];
         }
+    }, {
+        // RGBA 3 & 4 digit hex color, e.g. #F0F, #F0FA
+        regex:
+            /^#([a-f0-9])([a-f0-9])([a-f0-9])([a-f0-9])?$/i,
+        parse: function (result: RegExpExecArray): Color.RGBA {
+            // #abcd => #aabbccdd, hence result + result.
+            return [
+                (pInt(result[1] + result[1], 16)),
+                (pInt(result[2] + result[2], 16)),
+                (pInt(result[3] + result[3], 16)),
+                !defined(result[4]) ?
+                    1 :
+                    (pInt(result[4] + result[4], 16) / 255)
+            ];
+        }
+    }, {
+        // RGBA 6 & 8 digit hex color, e.g. #FFCC00, #FFCC00FF
+        regex: /^#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})?$/i,
+        parse: function (result: RegExpExecArray): Color.RGBA {
+            return [
+                pInt(result[1], 16),
+                pInt(result[2], 16),
+                pInt(result[3], 16),
+                !defined(result[4]) ?
+                    1 :
+                    (pInt(result[4], 16) / 255)
+            ];
+        }
     }];
 
     // Must be last static member for init cycle
@@ -149,50 +178,12 @@ class Color implements ColorLike {
         } else if (typeof input === 'string') {
             this.input = input = (Color.names[input.toLowerCase()] || input);
 
-            // Bitmasking as input[0] is not working for legacy IE.
-            if (input.charAt(0) === '#') {
-                const len = input.length,
-                    col = parseInt(input.substr(1), 16);
-
-                // Handle long-form, e.g. #AABBCC
-                if (len === 7) {
-
-                    rgba = [
-                        (col & 0xFF0000) >> 16,
-                        (col & 0xFF00) >> 8,
-                        (col & 0xFF),
-                        1
-                    ];
-
-                // Handle short-form, e.g. #ABC
-                // In short form, the value is assumed to be the same
-                // for both nibbles for each component. e.g. #ABC = #AABBCC
-                } else if (len === 4) {
-
-                    rgba = [
-                        (
-                            ((col & 0xF00) >> 4) |
-                            (col & 0xF00) >> 8
-                        ),
-                        (
-                            ((col & 0xF0) >> 4) |
-                            (col & 0xF0)
-                        ),
-                        ((col & 0xF) << 4) | (col & 0xF),
-                        1
-                    ];
-                }
-            }
-
-            // Otherwise, check regex parsers
-            if (!rgba) {
-                i = Color.parsers.length;
-                while (i-- && !rgba) {
-                    parser = Color.parsers[i];
-                    result = parser.regex.exec(input);
-                    if (result) {
-                        rgba = parser.parse(result);
-                    }
+            i = Color.parsers.length;
+            while (i-- && !rgba) {
+                parser = Color.parsers[i];
+                result = parser.regex.exec(input);
+                if (result) {
+                    rgba = parser.parse(result);
                 }
             }
         }