Accessing farbtastic object instances WordPress

David Gwyer comments:

I know all about the wp.customize and the code on the Codex. It's not relevant to what I need.

The code you posted above creates the farbtastic color picker object, sure. I've looked at this code already. The problem is how do I access the handle/instance from my own script, or the Chrome browser console, for EACH farbtastic color picker created.

I have created multiple color pickers for my own theme and I need to be able to access each instance individually so I can programatically set color values. If I can access the background color picker in the Twenty Eleven theme customizer then I should also be able to access my theme color pickers with similar code.

David Gwyer comments:

Hi Jessica,

I've been down this route already, without success.

The most robust/efficient method would be to access to the farbtastic object instances directly, so I can easily programatically update the color picker (which will in turn update the input box and selected color box, and update the color value in the preview pane).

I thought that exposing/accessing any jQuery/JavaScript object instances would be fairly easy but I am having difficulty accessing the color picker instances.

I don't know if the instance is hidden in the wp.customize object (it has tons of properties) somewhere or this object is just used for the preview pane and not the theme customizer window. For example in Twenty Eleven, on the Chrome console if I type the following:

wp.customize._value.background_color._value

I get the current value of THAT particular color picker outputted to the console. Change the value of the color picker and typing in the same console command above you get the updated color. So, the path to the color picker instance .setColor() method 'may' be in the wp.customize object somewhere. Just can't find it!

David

Manoj Raj comments:

Just tested the code above from one of my domains... And it works... Let me know from your side whether it is working or not..

David Gwyer comments:

Hi Raj,

Unfortunately it doesn't work as expected. The color picker value changes but this method breaks the theme customizer color picker, so when you subsequently try manually select a color with the mouse the color picker input text box, drop down div bg, and preview page all don't update.

It's seems like using this method you described, knocks out the default binding between the color picker and theme customizer functionality which is no good.

Let me explain what functionality 'should' be available by means of a demonstration...

(I'm using WP 3.4.2)

1. Activate the Twenty Eleven theme and make sure you have define('SCRIPT_DEBUG', true); in wp-config.php so you can edit the dev versions of the WP scripts.
2. Locate /wp-admin/js/customize-controls.dev.js and add on the very first line: var background_color_picker;
3. Then on around line 111 replace the api.ColorControl section with this:

api.ColorControl = api.Control.extend({
ready: function() {
var control = this,
rhex, spot, input, text, update;

rhex = /^#([A-Fa-f0-9]{3}){0,2}$/;
spot = this.container.find('.dropdown-content');
input = new api.Element( this.container.find('.color-picker-hex') );
update = function( color ) {
spot.css( 'background', color );
control.farbtastic.setColor( color );

if(control.selector == '#customize-control-background_color') {
background_color_picker = control;
}
};

this.farbtastic = $.farbtastic( this.container.find('.farbtastic-placeholder'), control.setting.set );

// Only pass through values that are valid hexes/empty.
input.sync( this.setting ).validate = function( to ) {
return rhex.test( to ) ? to : null;
};

this.setting.bind( update );
update( this.setting() );

this.dropdownInit();
}
});

What this does is to make the background color picker save into a JS variable, when it is first created, that I DO know the name of. i.e. I know have a way to reference THAT particular color picker instance.

So... All I have to do now is on the Chrome browser console, enter: background_color_picker.farbtastic.setColor('#ccc')
and the color picker value changes BUT so does the color picker input box, the drop down background, and the preview page updates in the other frame!

There must also be an existing reference to the background color picker farbtastic object that you can update (as I demonstrated above) without breaking any linking functionality between the color picker and theme customizer.