it-swarm.com.de

Ist es möglich, beim Öffnen von Media Popup JavaScript auszulösen?

Auf einer meiner Bearbeitungsseiten für benutzerdefinierte Beiträge befindet sich eine Schaltfläche, die das Medien-Popup mit den folgenden Angaben auslöst: wp.media.editor.open();. Der Medien-Manager wird zwar angezeigt, aber ich bin nicht sicher, ob dies der richtige Weg ist. Ist es?

Bei der eigentlichen Frage geht es jedoch um etwas anderes. Wie kann ich Ereignis-Listener an verschiedene Ereignisse anhängen, die von Medien-Popups ausgelöst werden sollen? Wie open oder close oder gibt es ein Ereignis für die umgeschaltete Ansicht?

4
jayarjo

Sie können mehrere Ereignishandler verwenden.

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

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

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

Wobei frame ein Verweis auf wp.media() ist

frame = wp.media();

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

Vollständiges Beispiel

Skript in der Warteschlange mit jQuery und Media Editor als Abhängigkeiten.

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

Skript enthält:

;( 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 );

Fenster, das durch eine Schaltfläche mit dem Klassennamen media ausgelöst wird

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

Abhängigkeiten von Javascript für Medien, die über die Funktion in die Warteschlange gestellt wurden.

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

Zuletzt überprüfte ich, ob die beste Dokumentation der Quellcode war - siehe media-views.js, media-models.js hier: http://phpxref.ftwr.co.uk/wordpress/nav.html?wp-includes/js/

Das Experimentieren mit der Konsole kann hilfreich sein. Es handelt sich hauptsächlich um Backbone-Objekte. Sie können Ereignisse beobachten, die mit einem Skript wie dem vor einiger Zeit erstellten ausgelöst wurden. - http://userscripts.org/scripts/show/161075

0
NoBugs