Switching between Picker options

[zeeshanpal]

I have a design requirement that states if a user has not selected a color there is an eyedropper svg button and when a color has been selected the selected color is shown. I've tried updating the value of useAsButton through the save event handler when the selected color object is null or has a color accordingly but that does not update the picker button. The only other idea I have would be to re-render the picker instance but that would remove the already selected color. Would this be possible?

[zeeshanpal]

For anyone that stumbles upon a similar requirement, I found the solution to this with css. By default the clear class isn't applied on the button element created by the color picker instance. So upon initialization this still presented a problem (Since user has not picked a color on initialization). So there were two steps to this:

1. Setting the color in color picker to null on initialization (This in turn fires the save event handler with colorObject == null updating the pcr-button class to .pickr .pcr-button.clear which you can add styles to according to your requirement):

pickr .on("init", function (instance) { pickr.setColor(null); })

2. This step is just applying the styles to the element when the user has not picked a color (Even upon initialization):

.pickr .pcr-button.clear { background: url(your svg data url here); }

I'm going to leave this issue open in case it helps anyone else or if anyone comes up with a better solution.

[SchnoppDog]

I just stumbled across this issue and I tested it in a different way since I am doing this just with colors. I don't know how you do this, but if you work with JavaScript you can set the background-image or background-color of the button where the pickr is attached to quite easily. Since the pickr is event-driven you can change css-elements with JavaScript when an event happens. Let's assume we've got the default pickr:

// Simple example, see optional options for more configuration.
const pickr = Pickr.create({
    el: htmlElement,
    theme: 'classic', // or 'monolith', or 'nano'

    swatches: [
        'rgba(244, 67, 54, 1)',
        'rgba(233, 30, 99, 0.95)',
        'rgba(156, 39, 176, 0.9)',
        'rgba(103, 58, 183, 0.85)',
        'rgba(63, 81, 181, 0.8)',
        'rgba(33, 150, 243, 0.75)',
        'rgba(3, 169, 244, 0.7)',
        'rgba(0, 188, 212, 0.7)',
        'rgba(0, 150, 136, 0.75)',
        'rgba(76, 175, 80, 0.8)',
        'rgba(139, 195, 74, 0.85)',
        'rgba(205, 220, 57, 0.9)',
        'rgba(255, 235, 59, 0.95)',
        'rgba(255, 193, 7, 1)'
    ],

    components: {

        // Main components
        preview: true,
        opacity: true,
        hue: true,

        // Input / output Options
        interaction: {
            hex: true,
            rgba: true,
            hsla: true,
            hsva: true,
            cmyk: true,
            input: true,
            clear: true,
            save: true
        }
    }
});

Now let's assume we have a png, jpeg, svg or whatever image-format in a folder named img. The name of this image is for testing purpose test.png. If we want to set the background-image of our button (or any other element where the pickr is attached to) we can use the events pickr is giving us. On initialication we can set the background-image like this:

pickr.on('init', pickr => {
  htmlElement.style.backgroundImage = "url('img/test.png')"
})

If we want to set it after a clear we can do this:

pickr.on('clear', pickr => {
  htmlElement.style.backgroundImage = "url('img/test.png')"
})

Instead of using a background-image we can also set the selected color of the pickr:

pickr.on('init', pickr => {
  htmlElement.style.backgroundColor = pickr.getColor().toRGBA().toString(0)
})

I hope this is what you were looking for. If not then I am sorry to had a wrong assuming.