web-dev-qa-db-ja.com

メディアポップアップを開いたときにJavaScriptを起動することは可能ですか？

私のカスタム投稿編集ページの1つには、wp.media.editor.open();でメディアポップアップをクリックするボタンがあります。それは...ですか？

しかし、本当の質問は他のことです。メディアポップアップがトリガーするさまざまなイベントにイベントリスナーを追加するにはどうすればよいですか。 openやcloseのように、あるいはビューを切り替えるためのイベントはありますか？

uploadsmediamedia-librarymedia-modal
4
jayarjo

複数のイベントハンドラを使用できます。

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

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

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

frameはwp.media()への参照です

frame = wp.media();

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

完全な例

依存関係としてjQueryおよびメディアエディタでキューに入れられたスクリプト。

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

スクリプトに含まれるもの：

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

クラス名がmediaのボタンによって起動されたウィンドウ

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

関数を介してエンキューされたメディアJavaScript依存関係。

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

最後に私が確認したのはソースコードが一番良いドキュメントでした - media-views.js、media-models.jsはこちら： http://phpxref.ftwr.co.uk/wordpress/nav.html?wp-includes/js/

コンソールで実験するのは役に立つことができます - それは主にバックボーンオブジェクトです、あなたは私がしばらく前に作ったこのスクリプトのようなものを使って引き起こされるイベントを見ることができます - http://userscripts.org/scripts/show/161075

0
NoBugs