Setting the colour programmatically from outside the picker

[mnori]

I'm building an app with an eye dropper tool that needs to change the colour stored inside the colour picker, from outside the picker. Here's how I'm setting the colour at the moment (not sure if this is the right way to do it!):

var colourPicker = $("#picker_id").colorPicker();
colourPicker.colorPicker.color.setColor(tool.colourFg);
colourPicker.colorPicker.render();

This works, but only after the user has clicked the picker already. If the user hasn't clicked the picker yet, this error occurs:

Uncaught TypeError: Cannot read property '_colorMode' of undefined

This is due to an empty _$trigger variable, which seems to contain the DOM element representing the picker. What I'm looking for is a way to initialise the picker before the user clicks it so that this error does not occur.

I couldn't figure out how to set the _$trigger variable myself as it seems to be encapsulated pretty tight - not that easy to access outside of the picker module.

Here is a jsfiddle that demonstrates the problem:

https://jsfiddle.net/4phnsz7x/19/

If you click the link before clicking the picker, you get the error. If you click the picker first, there is no error.

[vanowm]

Oh how did I miss this issue and created #78 instead...

Use this instead:
colourPicker.css("background-color", tool.colourFg);
or if you don't need change background color of the triggered element:
colourPicker.val(tool.colourFg);

[ypanagopoulos]

Use this instead:
colourPicker.css("background-color", tool.colourFg);

This works fine for dark colors, but when selecting a light color, the text becomes unreadable.

[justingolden21]

I've been having the same problem that @ypanagopoulos has been having. It will update the color, but it won't check if it needs to update to dark/light mode for readability until you click on the color input.

[justingolden21]

EDIT: Solved my own problem, see solution below.

My current code for changing the color programmatically is just:

$('#color-picker').val(hex);
$('#color-picker').css('background-color', hex); 

And trying to update it so it renders the text color change not just the background color I can run this code:

$('#color-picker').colorPicker().colorPicker.render();

However, my code calls this function that sets the color as the renderCallback function for the colorpicker, so this just recurs forever.

---

I added a second parameter to my setColor function that runs on renderCallback. The parameter is a boolean called updateColorPicker, and the code checks if this is true before rendering the colorpicker (to avoid infinite loops):

if(updateColorPicker)
		$('#color-picker').colorPicker().colorPicker.render();

I then made the variable default to true and when the colorPicker's renderCallback function runs and calls this, I pass the argument of false so it doesn't recur forever.