wake-up-neo.com

Löst JS aus, wenn das Upload-Fenster für empfohlene Bilder in admin geöffnet wird

Ich versuche JS anzuschließen, damit ich mit Vibrant.js die Farben des ausgewählten Bildes analysieren kann, wenn das Upload-Feld für das ausgewählte Bild geöffnet und ein Bild ausgewählt ist. Die Hürde, auf die ich gestoßen bin, ist, dass ich kein bestimmtes Ereignis finden kann, an das ich meine Funktion binden kann. Ich habe mir verschiedene Tutorials zum Objekt wp.media() angesehen, aber alle scheinen das Upload-Feld vollständig zu ersetzen. Gibt es keine einfache Möglichkeit, festzustellen, wann das Upload-Fenster für das ausgewählte Bild geöffnet und das ausgewählte Vorschaubild geladen ist?

3
Dre

Nach einigem Graben stellte ich fest, dass wp.media.featuredImage.frame () das war, wonach ich suchte:

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

Ich stellte dann fest, dass das Ereignis select ausgelöst wird, sobald Sie auf die Schaltfläche "Ausgewähltes Bild festlegen" geklickt haben. nicht Wenn Sie auf ein Miniaturbild geklickt haben, war das genau das, wonach ich gesucht habe. Also habe ich meine Ereignisse an das modale Fenster gebunden, sobald es geöffnet wurde:

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

Das Endergebnis war, dass nach dem Öffnen des Modals für vorgestellte Bilder eine nicht zugeschnittene Version des ausgewählten vorgestellten Bildes über WP-JSON abgerufen, die Farbpalette über Vibrant.js extrahiert und dann als a hinzugefügt wurde Farbwähler zum Modal. Auf diese Weise können Sie eine bestimmte Farbe angeben, die aus dem Bild stammt und dann vom Thema als Überlagerung für dieses bestimmte Bild verwendet wird. Ein Bild erklärt dies besser:

 Colour extraction in the featured image uploader 

Wenn jemand Interesse hat, schreibe ich dies in einem Blog-Beitrag genauer auf

7
Dre

Sie können auch Folgendes tun (es wird auch auf dem regulären Medien-Modal ausgelöst):

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

übrigens habe ich diesen Ausschnitt von Dekode

1
soderlind