From e386956a19302c74eb97a29097b6cd57d65efac3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Erik=20R=CC=8Cehulka?= Date: Thu, 25 Feb 2021 22:11:31 +0100 Subject: [PATCH] Added option to not automatically convert HEX3 colors (#RGB) to HEX6 (#RRGGBB). Corresponding option example has been added to Basics.hbs. --- src/docs/examples/Basics.hbs | 38 ++++++++++++++++++++++++++++++++---- src/js/ColorHandler.js | 7 +++++-- src/js/ColorItem.js | 17 +++++++++++----- src/js/Colorpicker.js | 2 +- src/js/options.js | 12 ++++++++++++ 5 files changed, 64 insertions(+), 12 deletions(-) diff --git a/src/docs/examples/Basics.hbs b/src/docs/examples/Basics.hbs index c50097b8..e25b12d5 100644 --- 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"}} +

+ By default, if the autoInputFallback option is enabled, even when you will + change input to HEX3 (#RGB), it will automatically convert to hex6 (#RRGGBB) +
+ 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. +

+ {{/content}} + {{#content "code"}} +
+ + + + +
+ + {{/content}} + {{/extend}} + {{#extend "example"}} {{#content "title"}} Adjust the popover options{{/content}} {{#content "description"}} @@ -374,7 +404,7 @@

{{/content}} {{#content "code"}} -
+
@@ -382,7 +412,7 @@
{{/content}} diff --git a/src/js/ColorHandler.js b/src/js/ColorHandler.js index c6e09306..7046fdbb 100644 --- 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 index 4a47ac8d..27411d32 100644 --- 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 index 2b200253..b83d14d5 100644 --- 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 index 47c0ba7f..82125e72 100644 --- 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.