Ask your WordPress questions! Pay money and get answers fast! (more info)

Accessing farbtastic object instances WordPress

  • REFUNDED

If you activate the Twenty Eleven theme and take a look at the theme customizer you'll see a color picker for the page background color.

I just need to be able to find the object handle for this so in Chrome developer tools (for example) I could just enter something like instancename.setColor('#ccc'); to programatically set the color.

There are more details on specifically why I need this doing on a WordPress StackExchange question I posted a couple of days ago:

http://wordpress.stackexchange.com/questions/67361/accessing-theme-customizer-farbtastic-object-instances

But, as I need this asap I don't mind paying for the answer!

Answers (3)

2012-10-08

Dbranes answers:

maybe you mean the "wp.customize" object in

/wp-admin/js/customize-controls.dev.js


This seems to be the colorControl code in the above js file:

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 );
};

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();
}
});


where var api = wp.customize;

This might also be helpful:

http://codex.wordpress.org/Theme_Customization_API#Part_3:_Configure_Live_Preview_.28Optional.29


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.

2012-10-08

jazbek answers:

Hi David,

I've done a fair amount of work with the farbtastic color picker in the theme customizer.

In your code, do you have the ability to get reference to the input field inside each color picker? If so, you should be able to set the color like this:

$('#the_input').val('#cccccc').trigger('change');

Jessica


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

2012-10-08

Manoj Raj answers:

Hi David,

Try the following code...Hope it will work

jQuery.farbtastic('#colorPickerDiv').setColor('#fff000');

Cheers,
Raj.


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.