How to capture the selection:toggle event fired by wp.media

Question

I can't figure out the proper syntax for listening in on this event. I just don't know where it exists. I know that this is the name of the event because I'm logging every single wp.media event using a function I've seen a few times on Stack.

I can capture the event when it occurs on the Feature Image selection screen because I actually know the syntax:

wp.media.featuredImage.frame().on('selection:toggle', function() {
    console.log('image selected');
});

I need to know what property name to use for the regular Insert Media frame, in place of featuredImage. You would think this would be easy to find, but most of the info out there about wp.media deals with constructing and extending.

Update - The only appearance this event makes in the source code is in media-views.js:

toggleSelectionHandler: function( event ) {
    ...
    this.controller.trigger( 'selection:toggle' );
},

This resides in wp.media.view.Attachment. I've tried traversing it inside the console, and firing .on('all') events but the only thing i get returned is ready.

The more I look into wp.media, it would seem like all this event is doing is announcing itself to be made available to a handler, if that's the right term, and as far as I can tell there is no handler doing anything with it, at least not in the wp.media global namespace.

From the limited examples available online, it seems like one would have to create an entirely new instance of the media library popup using the wp.media() constructor and then specify an on.select() method... or possibly extend the existing media library functionality somehow, if you could find where to do so. It all seems foreign to me.

Alternatively...

If there is a globally-available event for when the attachment details form frame opens up, that would likely work for my particular scenario. So please share if you know the syntax for this event.

Answer 1

I was able to cobble something together. I feel like there is a better approach to solving this, but that it might help to share my progress anyway.

The main trick came from this answer by @Vladimir Lukyanov.

My main concern with this solution is that the unselect event, "selection:unsingle", is triggered twice. I was unable to prevent this from happening.

The other concern is just that there is probably a cleaner way of accomplishing this. However, after lots of searching and experimenting, this is the closest I came to a solution.

add_action( 'admin_print_footer_scripts', 'wpse_media_library_selection_toggle' );
function wpse_media_library_selection_toggle() { ?>
<script type="text/javascript">
    ( function( $ ) {
        $( document ).ready( function() {

            // Ensure the wp.media object is set, otherwise we can't do anything.
            if ( wp.media ) {

                wp.media.featuredImage.frame().on('selection:toggle', function() {
                        console.log( 'image selected' );
                });

                // Ensure that the Modal is ready.
                wp.media.view.Modal.prototype.on( "ready", function() {
                    // console.log( "media modal ready" );

                    // Execute this code when a Modal is opened.
                    wp.media.view.Modal.prototype.on( "open", function() {
                        // console.log( "media modal open" );

                        // The sidebar boxes get deleted and recreated on each select - hack into this to do the same.
                        var selection = wp.media.frame.state().get( "selection" );
                        selection.on( "selection:single", function ( event ) {
                            console.log( "selection:single" );
                        } );

                        // Not sure why, but this fires twice...
                        selection.on( "selection:unsingle", function ( event ) {
                            console.log( "selection:unsingle" );
                        } );    

                    });

                    // Execute this code when a Modal is closed.
                    wp.media.view.Modal.prototype.on( "close", function() {
                         // console.log( "media modal close" );
                    });
                });
            }

        });
    })( jQuery );
</script><?php
}