Highlight color swatch if it match current selected color

[bjarnef]

Do you want to request a feature or report a bug?

Feature

What is the current behavior?

Selecting a color from the color swatches updates the input field color code and preview and highlight the selected color swatch, but the color swatch is not selected when re-open the color picker

If the current behavior is a bug, please provide the steps to reproduce and create a JSFiddle.

Can be reproduced here https://jsfiddle.net/Simonwep/qx2Lod6r/ and here https://simonwep.github.io/pickr/
Select a color from the color swatches. The color swatch is marked as selected with a border. When clicking save and re-open the color picker afterwards the selection is gone.

What is the expected behavior?

The color swatch should stay selected after re-open the color picker.
It would also be great if the color swatch was highlighted when manually enter a color code in the input field which match a color code of one of the color swatches, e.g. #3F51B5CC.
It seems the selection at the moment only is a focus state. If the selected color swatch has a class, it could e.g. have an "checkmark" inside the box to mark is as selected? (without using a library like font awesome it could use css, e.g. styled via :before pseudo element background image using svg: and https://iconmonstr.com/check-mark-1-svg/ so changing focus via tab still makes it clear which has focus and which is selected.

Your environment:

Version (see Pickr.version): 1.2.7
Used bundle (es5 or normal one): Normal
Used theme (default is classic): Classic
Browser-version: Version 76.0.3809.100
Operating-system: Windows 10

[simonwep]

The "Highlight" is just a focus-border, there is currently no such thing like a "selected" swatch or something which indicates so Whoops, misread what you wrote. We could indeed lock the focus-border if the swatch is selected, that sounds nice :) I'll take a look at it later (and probably adding a class like pcr-selected-swatch or similar)!

[bjarnef]

Yes, it would be a great feature :)

I noticed the clear and cancel buttons use same class, can these have different classes in case you want to styling these different.
https://github.com/Simonwep/pickr/blob/878e50f9821c105c8eca85a72e48b39db9fa39cc/src/js/template.js#L46-L47

[simonwep]

Of course :)

[bjarnef]

I have looked at implementing this as a property editor in Umbraco CMS and so far it is working very well 👍

What is the best approach to set the color from an existing save color? I guess I won't set it via default but in init function and set the color using setColor() function?

[bjarnef]

@simonwep isn't it possible to set color right after creating an Pickr instance?

const pickr = Pickr.create(options);

pickr.setColor("#FF0303");

It does however work if using setColor in init function (a short delay from default color change to the color being set).

[simonwep]

No, the problem is pickr can only be initialized if it's rendered to the DOM. Otherwise the sliders would totally get messed up since pickr wouldn't have any width or height (There where already like 3 issues because of this). But you can use the default option to define a initial color :)

Another option would be to wrap pickr into a Promise and resolve these with the pickr instance e.g.

// Wrap pickr
const createPickrAsync = options => 
    new Promise(resolve => Pickr.create(options).on('init', resolve));

createPickrAsync({...myOptions}).then(pickr =>{
    // Do smth
})

Edit: Otherwise there wouldn't be a init event 😄

[bjarnef]

Okay, if was able to set to default value fron ngModel in Angular (or works as well in init function by using setColor() function).

It the docs fff is shown as default color, but I get the color #42445A by default. https://github.com/Simonwep/pickr#options
It seems it is set here: https://github.com/Simonwep/pickr/blob/fce20980ca2ca08f95b015056f0a76fe30ccf8c6/src/js/pickr.js#L61

[simonwep]

Yeah, the options are just examples. I'll update the readme

[simonwep]

Added in c54c925, not sure how I'd visually show the difference between focusing and detecting the target-swatch. Any ideas?

[bjarnef]

@simonwep do we need to classes pcr-clear pcr-cancel on cancel button?
Isn't it enough with pcr-cancel. Also if you want to add specific styles on clear button.

[simonwep]

Currently not, therefore I just added pcr-cancel otherwise the css for the red-button would be doubled :)

[bjarnef]

Why? Both buttons need same styling just use the following instead.

.pcr-clear, .pcr-cancel {

}

I don't see why the cancel button need both classes and it is more diffucult to add specific styles on clear button in your own theme.

[simonwep]

Oh yeah, mixed stuff up - you're right. Fixed in b93892c
I'll close this for now, maybe if #137 get's fixed I get some ideas to use a different focus-style on selected swatches and vice-versa