Color Picker (iris) in widget – refresh when edited in Customizer

by

I have added the WordPress Core color picker (iris) to a widget I developed, but when I edit the color, there is no change triggered. As a result, the iframe (live preview) for the Customizer does not update unless you trigger a change in another input field.

JavaScript to initialize the color picker:

var myOptions = {
// you can declare a default color here,
// or in the data-default-color attribute on the input
defaultColor: '#000',
// a callback to fire whenever the color changes to a valid color
change: function(event, ui){

},
// a callback to fire when the input is emptied or an invalid color
clear: function() {},
// hide the color picker controls on load
hide: true,
// show a group of common colors beneath the square
// or, supply an array of colors to customize further
palettes: true
};

// Add Color Picker to all inputs that have 'color-field' class $('.color-field').wpColorPicker(myOptions);

Note: I tested adding the code below to the change callback.

change: function(event, ui){
$(this).trigger('change'); 
},

This will trigger a change and update the iframe when the user clicks the color picker, but it happens before the color value is saved.

Does anyone happen to know how to access the event after the color chosen has been saved?

1 Answer
1

I don’t know where your iframe is getting it’s color information from, but you probably need to write the selected color from the color picker to that field.

This is an example including throttle. update_color is a function that deals with the new color. You can put there some code that puts the picked color to the correct place in your situation. 

            change: $.proxy( _.throttle(function(event, ui) {
                    event.preventDefault();
                    var color = ui.color.toString();
                    update_color(event,ui, color);
            }, 200), this),

Leave a Comment