web-dev-qa-db-fra.com

Media Manager: actualiser la bibliothèque après une nouvelle sélection

J'ai créé un champ personnalisé dans une metabox avec un bouton qui ouvre le gestionnaire de média et permet la sélection de plusieurs images. Lors de l'événement "open", la galerie récupère les images IDS de la sélection enregistrée actuelle à partir de l'attribut "data-ids" du bouton qui déclenche le gestionnaire de médias. Les images sont correctement affichées et déjà sélectionnées.

Le problème que je rencontre est qu’après avoir ouvert à nouveau le gestionnaire de médias et sélectionné de nouvelles images, bien que l’attribut "data-ids" soit mis à jour avec les nouveaux ID des images nouvellement sélectionnées, la galerie ne mettra pas à jour le images précédemment sélectionnées avec les nouvelles, sauf si j’enregistre d’abord le champ personnalisé. Qu'est-ce que je fais mal? Je n'arrive pas à comprendre comment "actualiser" la sélection des images. Quelqu'un peut-il comprendre?

C'est mon code

// Gallery Field Control
var wppf_gallery_ids,
    wppf_get_gallery_list,
    wppf_get_gallery_field;

GalleryControl = {
    // Initializes a new media manager or returns an existing frame.
    // @see wp.media.featuredImage.frame()
    frame: function() {
        if ( this._frame )
            return this._frame;

        this._frame = wp.media({
            title: 'something',
            library: {
                type: 'image'
            },
            button: {
                text: 'something'
            },
            multiple: 'toggle',
        });

        this._frame.on( 'open', this.updateFrame ).state('library').on( 'select', this.select );

        return this._frame;
    },

    select: function() {

        var selection = GalleryControl._frame.state().get( "selection" ).toJSON();
        var wppf_new_ids = '';

        // Empty previous images 
        jQuery(wppf_get_gallery_list).empty();

        // Load all stuff up
        jQuery(selection).each(function(index) {
            jQuery(wppf_get_gallery_list).append('<li><input type="hidden" name="'+ wppf_get_gallery_field +'['+ index +'][id]" value="'+ this.id +'"><input type="hidden" name="'+ wppf_get_gallery_field +'['+ index +'][url]" value="'+ this.url +'"><img src="'+ this.url +'"/></li>');
            wppf_new_ids += this.id + ',';
        });

        // Remove last comma
        wppf_new_ids = wppf_new_ids.substr(0,wppf_new_ids.length-1);
        jQuery('#' + wppf_get_gallery_field).attr('data-ids',wppf_new_ids);

    },

    updateFrame: function() {

        var selection = GalleryControl.frame().state().get('selection');
        selection.reset();

        // Grab all ids from gallery
        var all_ids = wppf_gallery_ids.split(',');

        // Add to selection
        if(all_ids !== '') {
            jQuery.each(all_ids, function(index, value) {
                var attachment = wp.media.attachment( value );
                attachment.fetch();
                selection.add( attachment ? [ attachment ] : [] );
            });
        }

    },

    init: function() {
        // Handle media manager
        jQuery('body').on('click', '.wppf-open-gallery', function(e) {
            e.preventDefault();
            // Get the gallery id and details
            wppf_get_gallery_field = jQuery(this).attr('id');
            wppf_gallery_ids       = jQuery(this).data('ids');
            wppf_get_gallery_list  = jQuery(this).data('list');
            GalleryControl.frame().open();
        });
    }
};

// Run Gallery Editor
GalleryControl.init();

Le bouton qui ouvre la galerie ressemble à ceci

<a href="#" id="wppf-gallery-gallery" class="wppf-open-gallery button button-primary wppf-gallery" data-list="#wppf-gallery-thumbs-gallery" data-ids="597,596">Create Gallery</a>

Quand j'ouvre ensuite la galerie et ajoute 2 nouvelles images, l'attribut data-ids est mis à jour avec les nouveaux identifiants et ressemble à ceci

<a href="#" id="wppf-gallery-gallery" class="wppf-open-gallery button button-primary wppf-gallery" data-list="#wppf-gallery-thumbs-gallery" data-ids="597,596,381,280">Create Gallery</a>

Cependant, le gestionnaire de médias ne "présélectionnera" pas les 4 images tant que je n'aurai pas enregistré la publication. Quelqu'un sait comment résoudre ce problème?

Je vous remercie.

mediamedia-librarymedia-modal
1
alex05

Je suppose que vous avez copié ce code quelque part. En le parcourant, je ne vois pas wppf_gallery_ids défini ailleurs que par la fonction init, ce qui signifie qu'il ne peut rien mettre à jour car la vérification est vide. Je vois deux options: soit le mettre à jour lors de la sélection dans la fonction select, soit simplement insérer wppf_new_ids dans le tableau wppf_gallery_ids.

Il me semble que les deux variables wppf_new_ids/_gallery_ids ont à peu près les mêmes fonctionnalités et qu’une d'entre elles pourrait être supprimée.

En plus de cela, vous devriez envelopper tout votre morceau de code dans une fonction à exécution automatique et y insérer les globales:

( function( $ ) {
    'use strict';
    // your code
} )( jQuery || {} );

Cela signifie également que vous pouvez utiliser $ au lieu de jQuery.

Une autre chose à éviter serait de polluer l’espace de noms global. Lorsque vous ajoutez simplement GalleryControl comme vous l'avez fait, vous avez déjà défini window.GalleryControl. Avec un tel nom générique, une collision avec un autre code aura probablement lieu hier plutôt que demain. Le meilleur style consiste à utiliser votre propre espace de noms déjà existant sur l'objet window: wppf. Cela signifie que votre emballage final pourrait ressembler à ceci:

( function( $ ) {
    'use strict';

    var gallery;

    gallery.init = function() {
        //
    };

    gallery.frame = function() {
        //
    };

    gallery.select = function() {
        //
    };

    gallery.updateFrame = function() {
        //
    };

    window.wppf = window.wppf || {};
    window.wppf.gallery = window.wppf.gallery || {};
    window.wppf.gallery = new gallery();

} )( jQuery || {} );

Plus sur ce sujet dans excellent article sur les objets JS .

1
kaiser