Saving behaviour

[okydk]

Love the picker and its simplicity!

Would like the ability to save on change though.

Currently the picker crashes if setColor is called within the onChange event. And there is no way to trigger an event when the picker is closed/hidden, which makes it tricky to achieve the behaviour with the current setup.

[simonwep]

Thanks :) Really appreciate it!
Okay, onChange is called every time when you changed the color, with setColor you would change it whereby this would be an infinite loop. I'm a little bit confused in which circumstances it would make sense to change the color immediately after every mouse-move which the users performs? What about onSave?

[jaschaio]

Using the internal _saveColor method works for me:

onChange: ( hsva, instance ) => {
    this.Pickr._saveColor();
}

[simonwep]

@jaschaio That's an internal method and not save to use it in this way. This method saves the current color and would result in a horrible performance if you would call it in onChange. Moreover it has nothing to do with color-setting. Only saving, as the name suggests :)

[jaschaio]

@simonwep Ok but it works exactly like what I was looking for. As you've asked for the use case: I would actually like to ommit the save button and just set the value of a text input field always to the current value of the color input – similar to this gif:

Listening to the onChange event and updating the value of the textInput is currently working for me. Maybe we are missing a Pickr.save() method that could be called from any element or listener without performance issues.

[simonwep]

@jaschaio Ahh, yeah... that makes sense.
Fantastic idea, Will be added :)

[simonwep]

Okay, I've added it in 2ec9036. Simply add comparison: false to your pickr config-object and the button (and preview) get's immediately updated when you select a color :)

[okydk]

Brilliant! Seems to work. :) Looking forward to have it via npm in 0.1.9.
Is there a way to hide the 'save' button, or should it just be done via CSS?

[simonwep]

Ouch damn, Seems like I missed a component option as I added the save button 😬
I will add this option later today! Will be components.output.save which you can toggle :)

[simonwep]

So, finally :D Now the save-button can be hide with (00564e8):

components: {
    output: {
        save: false
    }
}

Yeah, output as container name is a little bit wrong in this context. It's from the beginning where only output and color modes exists, maybe I will change it in the next major release. Anyway, I think I'll publish 0.1.9 tomorrow or in a few days :)

[okydk]

🎉

[Jaybagz]

@simonwep how to hide pickr after clicking save button