web-dev-qa-db-ja.com

おすすめの画像アップロードウィンドウが管理者で開かれたときにJSをトリガーする

おすすめの画像アップロードボックスを開いて選択した画像を選択したときに、選択した画像の色を分析するためにVibrant.jsを使用できるように、JSを接続しようとしています。私が遭遇したハードルは、私が自分の関数を束縛するための特定のイベントを見つけることができないということです。私はwp.media()オブジェクトに関するさまざまなチュートリアルを見ましたが、それらはすべてアップロードボックスを完全に置き換えることを含んでいるようです。注目画像のアップロードウィンドウが開いていて、選択したサムネイルプレビュー画像が読み込まれたことを検出する簡単な方法はありませんか。

uploadsjavascriptmedia
3
Dre

いくつか調べたところ、wp.media.featuredImage.frame（）が私が探していたものであることがわかりました。

wp.media.featuredImage.frame().on('open',function() {
    // Clever JS here
});

それから私は、あなたが 'Set featured image'ボタンをクリックするとselectイベントが発生することを発見しました。あなたがサムネイルをクリックしたとき、 not 。それで、私は自分のイベントをモーダルウィンドウ自体に結び付けました。

wp.media.featuredImage.frame().on('open', function() {
    // Get the actual modal
    var modal = $(wp.media.featuredImage.frame().modal.el);
    // Do stuff when clicking on a thumbnail in the modal
    modal.on('click', '.attachment', function() {
        // Stuff and thangs
    })
    // Trigger the click event on any thumbnails selected previously
    .find('attachment.selected').trigger('click');
});

その結果、注目の画像モーダルが開かれると、WP-JSONを介して選択された注目の画像のクロップされていないバージョンを取得し、 Vibrant.js を介して色のパレットを抽出し、モーダルにカラーピッカー。これで、画像から取得した特定の色を指定して、その特定の画像のオーバーレイとしてテーマによって使用されます。絵はこれをよりよく説明します：

Colour extraction in the featured image uploader 

誰かが興味を持っているならば、私はブログ投稿でこれをより詳細に書くことに丸くなるでしょう

7
Dre

次のこともできます（通常のメディアモーダルでも起動します）。

jQuery(document).ready(function($){
    if (wp.media) {
        wp.media.view.Modal.prototype.on('open', function() {
            console.log('media modal open');
        });
    }
});

ところで、私は Dekode からこの断片を入手しました。

1
soderlind