Updating Color picker color dynamically.
bmershon opened this issue · 6 comments
The API docs are a bit difficult to follow.
I was hoping you could explain how to dynamically update the color picker's currently selected color without mouse input. One could imagine a color picker which must be kept synchronized with a model whose color can be chosen by a color picker, or whose color picker should reflect the model's color.
In other words, I want an event handler which can update the color picker's color.
Thank you!
Resolved: build one instead.
Hi @bmershon,
sorry, but your complains are a bit difficult to follow...
What do you need,... how can I help you?
I needed to be able to set the color of the color picker after it had been instantiated. In setting the color of the color picker, I needed the internal model to reflect the new color and the UI (cursor and slider positions) to be consistent with the current color. I couldn't find a good way to do this by reaching into the model and using the given rendering callbacks or by poking at various exposed methods I could find (e.g., this.color.setColor(...)).
I have moved to another color picker for the time being.
Hi @bmershon again,
well, one attempt of this color picker was to use as little (memory-, CPU-) resources as possible. So, if you have a form with all kinds of input fields, some of them (maybe) concerning colors, the goal was not to bother the app (form) with event listeners, instances, etc. if it might not even be used (so the user might actually be fine with default values or he/she chose the perfect colors earlier...). Anyhow, the UI is not even existing after instantiation, only the color model is there to server the input field to render as good as possible (foreground-, background color, contrast, etc., and one color instance serves many fields...).
The fact that you can actually instantiate color picker for multiple input fields at the same time as in $('.color').colorPicker(), there was the decision made that every time you toggle the picker by clicking or focusing an input field, the picker will fetch the color from its value (and only when the color picker is visible or just after it closed, the color model and the UI are in sync, and only then).
So, changing or setting the color after you instantiate is actually not something concerning the color picker but is the job of the input field (or for you as a programmer).
So set the color of the input field by changing its value, then maybe change the bg-color and use myInstance.colorPicker.color.setColor() to get the correct foreground-color you need (as seen in the demos: color: colors.RGBLuminance > 0.22 ? '#222' : '#ddd').
I still don't understand why you need the cursor and slider position... but if this helps you (even you switched to another picker ;o), please let me know.
Cheers
Peter
I understand that this is a bit of a hack, but other than that, is there anything wrong with setting a color like this?
$('.color').val('#00FF00')
$('.color').trigger('change')
This way you let the colorpicker do the job of changing the colors and moving the cursor and the slider.