web-dev-qa-db-fra.com

Comment capturer la sélection: événement bascule déclenché par wp.media

Je ne peux pas trouver la syntaxe appropriée pour écouter cet événement. Je ne sais tout simplement pas où il existe. Je sais que c'est le nom de l'événement car je consignais chaque événement wp.media à l'aide d'une fonction que j'ai déjà vue à plusieurs reprises sur Stack.

Je peux capturer l'événement quand il se produit sur l'écran de sélection d'image principale parce que je connais la syntaxe:

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

J'ai besoin de savoir quel nom de propriété utiliser pour le cadre Insert Media normal, à la place de featuredImage. Vous penseriez que ce serait facile à trouver, mais la plupart des informations disponibles sur wp.media concernent la construction et l’extension.

Update - La seule apparence de cet événement dans le code source est dans media-views.js :

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

Cela réside dans wp.media.view.Attachment. J'ai essayé de le parcourir à l'intérieur de la console et de déclencher des événements .on('all'), mais la seule chose que je suis renvoyé est ready.

Plus je regarde dans wp.media, il semblerait que tout ce que cet événement fait est de s’annoncer à être mis à la disposition d’un gestionnaire, si c’est le bon terme, et pour autant que je sache, aucun gestionnaire ne fait quoi que ce soit avec, le moins pas dans l’espace de nom global wp.media.

Parmi les exemples disponibles en ligne, il semble qu'il faille créer une instance entièrement nouvelle de la bibliothèque de médias en utilisant le constructeur wp.media(), puis spécifier une méthode on.select() ... ou éventuellement étendre les fonctionnalités de la bibliothèque de médias existante d'une manière ou d'une autre. trouver où le faire. Tout cela me semble étranger.

Sinon ...

S'il y a un événement disponible globalement lorsque le cadre de formulaire contenant les détails de la pièce jointe s'ouvre, cela fonctionnera probablement pour mon scénario particulier. Alors s'il vous plaît partager si vous connaissez la syntaxe de cet événement.

mediamedia-libraryevents
3
LubosB

J'ai pu bricoler quelque chose ensemble. Je pense qu'il existe une meilleure approche pour résoudre ce problème, mais que cela pourrait aider de toute façon de partager mes progrès.

L'astuce principale vient de cette réponse de @Vladimir Lukyanov.

Mon souci principal avec cette solution est que l'événement de désélection, "selection:unsingle", soit déclenché deux fois. J'étais incapable d'empêcher que cela se produise.

L'autre préoccupation est simplement qu'il y a probablement une manière plus propre d'accomplir cela. Cependant, après de nombreuses recherches et expérimentations, c’est la solution la plus proche.

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
}
1
Dave Romsey