web-dev-qa-db-fra.com

Déclenche JS lorsque la fenêtre de téléchargement d’images sélectionnée est ouverte dans l’administrateur

J'essaie de connecter certains JS afin que, lorsque la boîte de téléchargement d'image sélectionnée est ouverte et qu'une image soit sélectionnée, je puisse utiliser Vibrant.js pour analyser les couleurs de l'image sélectionnée. L’obstacle que j’ai rencontré est que je ne trouve aucun événement particulier auquel lier ma fonction. J'ai consulté divers tutoriels sur l'objet wp.media(), mais ils semblent tous impliquer le remplacement complet de la boîte de téléchargement. N'y a-t-il pas de moyen simple de détecter le moment où la fenêtre de téléchargement des images en vedette est ouverte et l'image de prévisualisation sélectionnée est chargée?

uploadsjavascriptmedia
3
Dre

Après quelques recherches, j'ai découvert que je recherchais wp.media.featuredImage.frame ():

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

J'ai ensuite découvert que l'événement select était déclenché une fois que vous avez cliqué sur le bouton "Définir l'image sélectionnée", not lorsque vous avez cliqué sur la vignette, ce que je recherchais par la suite. J'ai donc lié mes événements à la fenêtre modale elle-même une fois ouverte:

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

Le résultat final était qu'une fois l'image modale ouverte ouverte, elle récupèrerait une version non découpée de l'image sélectionnée sélectionnée via WP-JSON, extrairait une palette de couleurs via Vibrant.js , puis les ajouterait en tant que sélecteur de couleur au modal. Cela vous permet de spécifier une couleur particulière - extraite de l'image - qui est ensuite utilisée par le thème en tant que superposition pour cette image particulière. Une image explique mieux cela:

 Colour extraction in the featured image uploader 

Si quelqu'un est intéressé, j'écrirai cela plus en détail dans un article de blog.

7
Dre

Vous pouvez également effectuer les opérations suivantes (le système s’appliquera également sur le média modal habituel):

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

d'ailleurs, j'ai eu cet extrait de Dekode

1
soderlind