Wordpress, initialize jQuery function when media gallery popup is opened

Question

I'm customizing a standard Wordpress gallery in my theme. Added an option to choose border color for thumbnails (to the Gallery settings column) and trying to use built in Wordpress color picker. This is how I am initializing color picker now:

(function( $ ) {

    $(function() {
        $('body').on('click', '.color-field', function() {
        $('.color-field').wpColorPicker();
        });
    });

})( jQuery );

This is the only way I can get it work now. Because color field is added dynamically when Wordpress media popup is opened. But now it is initialized only when color field is clicked. I'm searching for a way to initialize color picker when media popup is loaded. Is there any Wordpress popup callback that can be used?

when you say 'media pop up' do you mean the media-uploader ? — Sam0, Sep 14 '16 at 17:55

score 0 · Answer 1 · edited May 23 '17 at 10:30

This was just supposed to be a comment but has grown too large, but it's not a proper answer:

this is something I'm also working on integrating into a theme at the moment. in your case the easiest/quickest method might be to attach your click call for the wpColorPicker to the same div tag that calls the media-uploader, or you can refer to this Is it possible to listen to a "style change" event? and trigger your colorpicker when the $('#__wp-uploader-id-2') div's css display 'block' attribute changes. The second method is to extend the thickbox functionality (the uploader is inside a thickbox) to callback when the uploader is opened. The third method is to extend the media uploader's js functionality, though I'm not familiar with this.

If it helps, in the long run I found dealing with the colorPickers options and layout controls to be a lot of work (I was using several at once), and in the end found and implemented this: https://acko.net/blog/farbtastic-jquery-color-picker-plug-in/

update: found this from https://wordpress.stackexchange.com/questions/92415/image-upload-callback-in-new-3-5-media which extends the uploader's callback function:

$.extend( wp.Uploader.prototype, {
    init : function(){
        console.log( 'uploader is initialised' );
        $('.color-field').wpColorPicker(); // not sure exactly when it initialises ?
    },
    success : function(filename){
        console.log( 'uploader has loaded: '+ filename );
        $('.color-field').wpColorPicker(); // or you might want to add the colorbox once a file is actually uploaded?
    },
});

good luck

Wordpress, initialize jQuery function when media gallery popup is opened

1 Answers1