Added option to not automatically convert HEX3 colors (#RGB) to HEX6 …

…(#RRGGBB). Corresponding option example has been added to Basics.hbs. (#325) fix #323
itsjavi · Apr 23, 2021 · 3cfe6e7 · 3cfe6e7
1 parent 9943167
commit 3cfe6e7
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 12 deletions.
diff --git a/src/docs/examples/Basics.hbs b/src/docs/examples/Basics.hbs
@@ -365,6 +365,36 @@
       {{/content}}
     {{/extend}}
 
+    {{#extend "example"}}
+          {{#content "title"}} Disable HEX change from #RGB to #RRGGBB {{/content}}
+          {{#content "description"}}
+            <p>
+              By default, if the <code>autoInputFallback</code> option is enabled, even when you will
+              change input to HEX3 (#RGB), it will automatically convert to hex6 (#RRGGBB)
+              <br>
+              You can stop this by setting this option to false. That way, when someone will type
+              color to input, that is identified as HEX color, it will convert to #RRGGBB only if it will
+              be a valid HEX6 color.
+            </p>
+          {{/content}}
+          {{#content "code"}}
+            <div id="cp14" class="input-group">
+              <input type="text" class="form-control input-lg" value="I am an invalid color"/>
+              <span class="input-group-append">
+                <span class="input-group-text colorpicker-input-addon"><i></i></span>
+              </span>
+            </div>
+            <script>
+              $(function () {
+                $('#cp14').colorpicker({
+                  autoInputFallback: false,
+                  autoHexInputFallback: false,
+                });
+              });
+            </script>
+          {{/content}}
+        {{/extend}}
+
     {{#extend "example"}}
       {{#content "title"}} Adjust the popover options{{/content}}
       {{#content "description"}}
@@ -374,15 +404,15 @@
         </p>
       {{/content}}
       {{#content "code"}}
-        <div id="cp14" class="input-group">
+        <div id="cp15" class="input-group">
           <input type="text" class="form-control input-lg" value="hsl(103, 70%, 64%)"/>
           <span class="input-group-append">
             <span class="input-group-text colorpicker-input-addon"><i></i></span>
           </span>
         </div>
         <script>
           $(function () {
-            $('#cp14').colorpicker({
+            $('#cp15').colorpicker({
               popover: {
                 title: 'Adjust the color',
                 placement: 'top'
@@ -414,7 +444,7 @@
                 </button>
               </div>
               <div class="modal-body">
-                <input id="cp15" type="text" class="form-control input-lg" value="rgb(130, 44, 29)"/>
+                <input id="cp16" type="text" class="form-control input-lg" value="rgb(130, 44, 29)"/>
               </div>
               <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
@@ -425,7 +455,7 @@
         </div>
         <script>
           $(function () {
-            $('#cp15').colorpicker();
+            $('#cp16').colorpicker();
           });
         </script>
       {{/content}}

diff --git a/src/js/ColorHandler.js b/src/js/ColorHandler.js
@@ -119,10 +119,13 @@ class ColorHandler {
    * @fires Colorpicker#colorpickerInvalid
    * @param {*} val
    * @param {boolean} fallbackOnInvalid
+   * @param {boolean} autoHexInputFallback
    * @returns {ColorItem}
    */
-  createColor(val, fallbackOnInvalid = true) {
-    let color = new ColorItem(this.resolveColorDelegate(val), this.format);
+  createColor(val, fallbackOnInvalid = true, autoHexInputFallback = false) {
+    let disableHexInputFallback = !fallbackOnInvalid && !autoHexInputFallback;
+
+    let color = new ColorItem(this.resolveColorDelegate(val), this.format, disableHexInputFallback);
 
     if (!color.isValid()) {
       if (fallbackOnInvalid) {

diff --git a/src/js/ColorItem.js b/src/js/ColorItem.js
@@ -84,9 +84,10 @@ class ColorItem {
   /**
    * @param {ColorItem|HSVAColor|QixColor|String|*|null} color Color data
    * @param {String|null} format Color model to convert to by default. Supported: 'rgb', 'hsl', 'hex'.
+   * @param {boolean} disableHexInputFallback Disable fixing hex3 format
    */
-  constructor(color = null, format = null) {
-    this.replace(color, format);
+  constructor(color = null, format = null, disableHexInputFallback = false) {
+    this.replace(color, format, disableHexInputFallback);
   }
 
   /**
@@ -95,10 +96,11 @@ class ColorItem {
    *
    * @param {ColorItem|HSVAColor|QixColor|String|*|null} color Color data to be parsed (if needed)
    * @param {String|null} format Color model to convert to by default. Supported: 'rgb', 'hsl', 'hex'.
+   * @param {boolean} disableHexInputFallback Disable fixing hex3 format
    * @example color.replace('rgb(255,0,0)', 'hsl');
    * @example color.replace(hsvaColorData);
    */
-  replace(color, format = null) {
+  replace(color, format = null, disableHexInputFallback = false) {
     format = ColorItem.sanitizeFormat(format);
 
     /**
@@ -114,7 +116,7 @@ class ColorItem {
      * @type {QixColor}
      * @private
      */
-    this._color = ColorItem.parse(color);
+    this._color = ColorItem.parse(color, disableHexInputFallback);
 
     if (this._color === null) {
       this._color = QixColor();
@@ -135,11 +137,12 @@ class ColorItem {
    * parsed.
    *
    * @param {ColorItem|HSVAColor|QixColor|String|*|null} color Color data
+   * @param {boolean} disableHexInputFallback Disable fixing hex3 format
    * @example let qColor = ColorItem.parse('rgb(255,0,0)');
    * @static
    * @returns {QixColor|null}
    */
-  static parse(color) {
+  static parse(color, disableHexInputFallback = false) {
     if (color instanceof QixColor) {
       return color;
     }
@@ -164,6 +167,10 @@ class ColorItem {
       format = 'hsv';
     }
 
+    if (ColorItem.isHex(color) && (color.length !== 6 && color.length !== 7) && disableHexInputFallback) {
+      return null;
+    }
+
     try {
       return QixColor(color, format);
     } catch (e) {

diff --git a/src/js/Colorpicker.js b/src/js/Colorpicker.js
@@ -333,7 +333,7 @@ class Colorpicker {
       return;
     }
 
-    ch.color = val ? ch.createColor(val, this.options.autoInputFallback) : null;
+    ch.color = val ? ch.createColor(val, this.options.autoInputFallback, this.options.autoHexInputFallback) : null;
 
     /**
      * (Colorpicker) When the color is set programmatically with setValue().

diff --git a/src/js/options.js b/src/js/options.js
@@ -122,6 +122,18 @@ export default {
    * @default true
    */
   autoInputFallback: true,
+  /**
+   * If true, valid HEX3 colors will be converted to HEX6, even with
+   *    autoInputFallback set to false
+   * if false, HEX3 colors will not be converted to HEX6, when autoInputFallback is false
+   *    (this has been an issue, when using HEX6 colors with
+   *    autoInputFallback set to false, HEX3 colors were
+   *    automatically converting to HEX6)
+   *
+   * @type {boolean}
+   * @default false
+   */
+  autoHexInputFallback: true,
   /**
    * If true a hash will be prepended to hexadecimal colors.
    * If false, the hash will be removed.
-Original file line number
+Diff line change
@@ Expand Up / @@ -333,7 +333,7 @@ class Colorpicker { @@
           return;
         }
-        ch.color = val ? ch.createColor(val, this.options.autoInputFallback) : null;
+        ch.color = val ? ch.createColor(val, this.options.autoInputFallback, this.options.autoHexInputFallback) : null;
         /**
          * (Colorpicker) When the color is set programmatically with setValue().
@@ Expand Down @@