Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow non-alpha input when lockOpacity is set #275

Closed
wants to merge 1 commit into from
Closed

Allow non-alpha input when lockOpacity is set #275

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 9 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -394,16 +394,24 @@ 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._

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
Expand Down Expand Up @@ -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!
Expand Down
16 changes: 11 additions & 5 deletions src/js/pickr.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
})
Expand Down Expand Up @@ -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];

Expand Down Expand Up @@ -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) : '';
}
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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());
}

/**
Expand Down
10 changes: 5 additions & 5 deletions src/js/template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,11 @@ export default instance => {
<div :obj="interaction" class="pcr-interaction" ${hidden(Object.keys(components.interaction).length)}>
<input :ref="result" class="pcr-result" type="text" spellcheck="false" ${hidden(components.interaction.input)} aria-label="${t('aria:input', 'color input field')}">

<input :arr="options" class="pcr-type" data-type="HEXA" value="${lockOpacity ? 'HEX' : 'HEXA'}" type="button" ${hidden(components.interaction.hex)}>
<input :arr="options" class="pcr-type" data-type="RGBA" value="${lockOpacity ? 'RGB' : 'RGBA'}" type="button" ${hidden(components.interaction.rgba)}>
<input :arr="options" class="pcr-type" data-type="HSLA" value="${lockOpacity ? 'HSL' : 'HSLA'}" type="button" ${hidden(components.interaction.hsla)}>
<input :arr="options" class="pcr-type" data-type="HSVA" value="${lockOpacity ? 'HSV' : 'HSVA'}" type="button" ${hidden(components.interaction.hsva)}>
<input :arr="options" class="pcr-type" data-type="CMYK" value="CMYK" type="button" ${hidden(components.interaction.cmyk)}>
<input :arr="options" class="pcr-type" value="${lockOpacity ? 'HEX' : 'HEXA'}" type="button" ${hidden(components.interaction.hex || components.interaction.hexa)}>
<input :arr="options" class="pcr-type" value="${lockOpacity ? 'RGB' : 'RGBA'}" type="button" ${hidden(components.interaction.rgb || components.interaction.rgba)}>
<input :arr="options" class="pcr-type" value="${lockOpacity ? 'HSL' : 'HSLA'}" type="button" ${hidden(components.interaction.hsl || components.interaction.hsla)}>
<input :arr="options" class="pcr-type" value="${lockOpacity ? 'HSV' : 'HSVA'}" type="button" ${hidden(components.interaction.hsv || components.interaction.hsva)}>
<input :arr="options" class="pcr-type" value="CMYK" type="button" ${hidden(components.interaction.cmyk)}>

<input :ref="save" class="pcr-save" value="${t('btn:save')}" type="button" ${hidden(components.interaction.save)} aria-label="${t('aria:btn:save')}">
<input :ref="cancel" class="pcr-cancel" value="${t('btn:cancel')}" type="button" ${hidden(components.interaction.cancel)} aria-label="${t('aria:btn:cancel')}">
Expand Down
38 changes: 29 additions & 9 deletions src/js/utils/hsvacolor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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})`);
Expand All @@ -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)
};

Expand Down