Trigger JS quando a janela de upload de imagens em destaque é aberta em admin

3

Estou tentando conectar alguns JS para que, quando a caixa de upload de imagens em destaque estiver aberta e uma imagem selecionada, eu possa usar o Vibrant.js para analisar as cores da imagem selecionada. O obstáculo que encontrei é que não consigo encontrar nenhum evento específico para vincular minha função. Eu olhei vários tutoriais sobre o objeto wp.media() , mas todos eles parecem envolver a substituição da caixa de upload completamente. Não há uma maneira direta de detectar quando a janela de upload de imagens em destaque está aberta e a imagem de visualização da miniatura selecionada é carregada?

    
por Dre 17.09.2015 / 17:56

2 respostas

7

Depois de algumas escavações descobri que wp.media.featuredImage.frame () era o que eu procurava:

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

Descobri então que o evento select é acionado depois que você clica no botão "Definir imagem em destaque", não quando clica na miniatura, que era o que eu procurava. Então liguei meus eventos à própria janela modal assim que ela foi aberta:

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');
});

O resultado final foi que, assim que o modal de imagem em destaque fosse aberto, ele buscaria uma versão não recortada da imagem selecionada selecionada via WP-JSON, extrairia uma paleta de cores via Vibrant.js e, em seguida, adicione-os como um seletor de cores ao modal. Isso permite que você especifique uma determinada cor - tirada da imagem - que será usada pelo tema como uma sobreposição para essa imagem específica. Uma imagem explica isso melhor:

Se alguém estiver interessado, vou começar a escrever isso em mais detalhes em um post no blog

    
por Dre 22.09.2015 / 17:08
1

Você também pode fazer o seguinte (ele também será disparado no modo de mídia regular):

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

btw, eu peguei esse trecho de Dekode

    
por soderlind 22.02.2016 / 16:02