web-dev-qa-db-fra.com

Est-il possible de déclencher du JavaScript lorsque Media Popup est ouvert?

Sur l’une de mes pages d’édition personnalisées, j’ai un bouton qui déclenche l’affichage contextuel du média, avec: wp.media.editor.open(); et, même s’il affiche le gestionnaire de média, je ne suis pas sûr que ce soit la bonne façon de procéder. Est ce

Mais la vraie question concerne autre chose. Comment puis-je associer des écouteurs d'événement à divers événements que le média contextuel doit déclencher? Comme open ou close ou existe-t-il un événement pour la vue commutée?

uploadsmediamedia-librarymedia-modal
4
jayarjo

Vous pouvez utiliser plusieurs gestionnaires d'événements.

frame.on('open',function() {
    // Do something
});

frame.on('close',function() {
    // Do something
});

frame.on('select',function() {
    // Do something
});

Où frame est une référence à wp.media()

frame = wp.media();

frame.on('select',function() {
    // Do something
});

Exemple complet

Script en file d'attente avec jQuery et Media Editor comme dépendances.

function media_script_enqueue() {
   wp_enqueue_script( 'media-script', get_template_directory_uri() . '/js/media-script.js', array( 'jquery', 'media-editor' ), '', true );
}
add_action( 'wp_enqueue_scripts', 'media_script_enqueue' ); // Front-end
add_action( 'admin_enqueue_scripts', 'media_script_enqueue' ); // Back-end

Le script contient:

;( function( $ ) {
    var frame = wp.media({
         multiple: true
    });

    $(".media").on("click", function(e) {
        frame.open();

        e.preventDefault();
    });

    frame.on('open', function() {
        console.log("Open");
    });

    frame.on('close', function() {
        console.log("Close");
    });

    frame.on('select', function() {
        console.log("Select");

        var selection = frame.state().get('selection');

        selection.each(function(attachment) {
            console.log(attachment.id);
        });
    });
} )( jQuery );

Fenêtre déclenchée par un bouton avec un nom de classe de media

<button class="media">Media</button>

Dépendances des médias javascript mises en file d'attente via une fonction.

<?php wp_enqueue_media(array('post' => get_the_ID())); ?>
10
Rob Vermeer

La dernière fois que j'ai vérifié, la meilleure documentation était le code source - voir media-views.js, media-models.js ici: http://phpxref.ftwr.co.uk/wordpress/nav.html?wp-includes/js/

Il peut être utile d’expérimenter avec la console. Il s’agit principalement d’objets dorsaux. Vous pouvez suivre les événements déclenchés à l’aide de ce script que j’ai créé il ya quelque temps. - http://userscripts.org/scripts/show/161075

0
NoBugs