From 8f6d59e07e524de68ede4b3c1b70128f844caba2 Mon Sep 17 00:00:00 2001 From: James Newell Date: Wed, 28 Apr 2021 22:44:05 -0500 Subject: [PATCH] Allow non-alpha input when lockOpacity is set --- README.md | 10 +++++++++- src/js/pickr.js | 16 +++++++++++----- src/js/template.js | 10 +++++----- src/js/utils/hsvacolor.js | 38 +++++++++++++++++++++++++++++--------- 4 files changed, 54 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index d28b9e28..43664a74 100644 --- a/README.md +++ b/README.md @@ -394,9 +394,13 @@ An alternative would be to provide the target-element itself as `el`. ## The HSVaColor object As default color representation is hsva (`hue`, `saturation`, `value` and `alpha`) used, but you can also convert it to other formats as listed below. +* hsva.toHSV() _- Converts the object to a hsv array._ * hsva.toHSVA() _- Converts the object to a hsva array._ +* hsva.toHSL() _- Converts the object to a hsl array._ * hsva.toHSLA() _- Converts the object to a hsla array._ +* hsva.toRGB() _- Converts the object to a rgb array._ * hsva.toRGBA() _- Converts the object to a rgba array._ +* hsva.toHEX() _- Converts the object to a hexa-decimal array._ * hsva.toHEXA() _- Converts the object to a hexa-decimal array._ * hsva.toCMYK() _- Converts the object to a cmyk array._ * hsva.clone() _- Clones the color object._ @@ -404,6 +408,10 @@ As default color representation is hsva (`hue`, `saturation`, `value` and `alpha The `toString()` is overridden, so you can get a color representation string. ```javascript +hsva.toRGB(); // Returns [r, g, b] +hsva.toRGB().toString(); // Returns rgb(r, g, b) with highest precision +hsva.toRGB().toString(3); // Returns rgb(r, g, b), rounded to the third decimal + hsva.toRGBA(); // Returns [r, g, b, a] hsva.toRGBA().toString(); // Returns rgba(r, g, b, a) with highest precision hsva.toRGBA().toString(3); // Returns rgba(r, g, b, a), rounded to the third decimal @@ -445,7 +453,7 @@ If `silent` is true (Default is false), the button won't change the current colo * eventPath(evt`:Event`)`:[HTMLElement]` _- A polyfill for the event-path event propery._ * createFromTemplate(str`:String`) _- See [inline doumentation](https://github.com/Simonwep/pickr/blob/master/src/js/lib/utils.js#L88)._ * resolveElement(val`:String|HTMLElement`) _- Resolves a `HTMLElement`, supports `>>>` as shadow dom selector._ -* adjustableInputNumbers(el`:InputElement`, mapper`:Function`) _- Creates the possibility to change the numbers in an inputfield via mouse scrolling. +* adjustableInputNumbers(el`:InputElement`, mapper`:Function`) _- Creates the possibility to change the numbers in an input field via mouse scrolling. The mapper function takes three arguments: the matched number, an multiplier and the index of the match._ Use this utils carefully, it's not for sure that they will stay forever! diff --git a/src/js/pickr.js b/src/js/pickr.js index 6908b22b..fc294c5b 100644 --- a/src/js/pickr.js +++ b/src/js/pickr.js @@ -367,7 +367,7 @@ class Pickr { className: 'active', onchange(e) { - inst._representation = e.target.getAttribute('data-type').toUpperCase(); + inst._representation = e.target.getAttribute('value').toUpperCase(); inst._recalc && inst._updateOutput('swatch'); } }) @@ -458,8 +458,14 @@ class Pickr { }; _.adjustableInputNumbers(_root.interaction.result, (o, step, index) => { - const range = ranges[this.getColorRepresentation().toLowerCase()]; + let type = this.getColorRepresentation().toLowerCase(); + // Convert the non-alpha representations to the equivalent range + if (this.options.lockOpacity && type !== 'cmyk') { + type += 'a'; + } + + const range = ranges[type]; if (range) { const max = range[index]; @@ -534,7 +540,7 @@ class Pickr { if (_root.interaction.type()) { // Construct function name and call if present - const method = `to${_root.interaction.type().getAttribute('data-type')}`; + const method = `to${_root.interaction.type().getAttribute('value')}`; _root.interaction.result.value = typeof _color[method] === 'function' ? _color[method]().toString(options.outputPrecision) : ''; } @@ -832,7 +838,7 @@ class Pickr { // Change selected color format const utype = type.toUpperCase(); const {options} = this._root.interaction; - const target = options.find(el => el.getAttribute('data-type') === utype); + const target = options.find(el => el.getAttribute('value') === utype); // Auto select only if not hidden if (target && !target.hidden) { @@ -866,7 +872,7 @@ class Pickr { // Find button with given type and trigger click event return !!this._root.interaction.options - .find(v => v.getAttribute('data-type').startsWith(type) && !v.click()); + .find(v => v.getAttribute('value').startsWith(type) && !v.click()); } /** diff --git a/src/js/template.js b/src/js/template.js index e7fe408d..6c3dbc3c 100644 --- a/src/js/template.js +++ b/src/js/template.js @@ -48,11 +48,11 @@ export default instance => {
- - - - - + + + + + diff --git a/src/js/utils/hsvacolor.js b/src/js/utils/hsvacolor.js index 8d146b68..cff0338b 100644 --- a/src/js/utils/hsvacolor.js +++ b/src/js/utils/hsvacolor.js @@ -12,18 +12,36 @@ export function HSVaColor(h = 0, s = 0, v = 0, a = 1) { const that = { h, s, v, a, + toHSV() { + const hsv = [that.h, that.s, that.v]; + hsv.toString = mapper(hsv, arr => `hsv(${arr[0]}, ${arr[1]}%, ${arr[2]}%)`); + return hsv; + }, + toHSVA() { const hsva = [that.h, that.s, that.v, that.a]; hsva.toString = mapper(hsva, arr => `hsva(${arr[0]}, ${arr[1]}%, ${arr[2]}%, ${that.a})`); return hsva; }, + toHSL() { + const hsl = hsvToHsl(that.h, that.s, that.v); + hsl.toString = mapper(hsl, arr => `hsl(${arr[0]}, ${arr[1]}%, ${arr[2]}%)`); + return hsl; + }, + toHSLA() { const hsla = [...hsvToHsl(that.h, that.s, that.v), that.a]; hsla.toString = mapper(hsla, arr => `hsla(${arr[0]}, ${arr[1]}%, ${arr[2]}%, ${that.a})`); return hsla; }, + toRGB() { + const rgb = hsvToRgb(that.h, that.s, that.v); + rgb.toString = mapper(rgb, arr => `rgb(${arr[0]}, ${arr[1]}, ${arr[2]})`); + return rgb; + }, + toRGBA() { const rgba = [...hsvToRgb(that.h, that.s, that.v), that.a]; rgba.toString = mapper(rgba, arr => `rgba(${arr[0]}, ${arr[1]}, ${arr[2]}, ${that.a})`); @@ -36,20 +54,22 @@ export function HSVaColor(h = 0, s = 0, v = 0, a = 1) { return cmyk; }, - toHEXA() { + toHEX() { const hex = hsvToHex(that.h, that.s, that.v); - - // Check if alpha channel make sense, convert it to 255 number space, convert - // To hex and pad it with zeros if needet. - const alpha = that.a >= 1 ? '' : Number((that.a * 255).toFixed(0)) - .toString(16) - .toUpperCase().padStart(2, '0'); - - alpha && hex.push(alpha); hex.toString = () => `#${hex.join('').toUpperCase()}`; return hex; }, + toHEXA() { + if (that.a === 1) { + return that.toHEX(); + } + const alpha = Number((that.a * 255).toFixed(0)).toString(16).toUpperCase().padStart(2, '0'); + const hexa = [...hsvToHex(that.h, that.s, that.v), alpha]; + hexa.toString = () => `#${hexa.join('').toUpperCase()}`; + return hexa; + }, + clone: () => HSVaColor(that.h, that.s, that.v, that.a) };