Ajouter une fonction de filtre dans la boîte modale multimédia

12

J'essaie d'étendre le modal média, mais je ne trouve pas de documentation / tutoriels à ce sujet. Je ne suis pas non plus un maître de l'épine dorsale ;-)

Je souhaite ajouter une case de sélection pour chaque taxonomie attachée au type de publication de pièce jointe. Pour le moment, une seule case de sélection est affichée.

Voilà donc ce que j'ai trouvé. Cela fonctionne très bien, sauf qu'il remplace la barre d'outils par défaut.


Code

/**
 * Extended Filters dropdown with taxonomy term selection values
 */
jQuery.each(mediaTaxonomies,function(key,label){

    media.view.AttachmentFilters[key] = media.view.AttachmentFilters.extend({
        className: key,

        createFilters: function() {
            var filters = {};

            _.each( mediaTerms[key] || {}, function( term ) {

                var query = {};

                query[key] = {
                    taxonomy: key,
                    term_id: parseInt( term.id, 10 ),
                    term_slug: term.slug
                };

                filters[ term.slug ] = {
                    text: term.label,
                    props: query
                };
            });

            this.filters = filters;
        }

    });

    /**
     * Replace the media-toolbar with our own
     */
    media.view.AttachmentsBrowser = media.view.AttachmentsBrowser.extend({
        createToolbar: function() {

            media.model.Query.defaultArgs.filterSource = 'filter-media-taxonomies';

            this.toolbar = new media.view.Toolbar({
                controller: this.controller
            });

            this.views.add( this.toolbar );

            this.toolbar.set( 'terms', new media.view.AttachmentFilters[key]({
                controller: this.controller,
                model:      this.collection.props,
                priority:   -80
            }).render() );
        }
    });

});

Original

entrez la description de l'image ici


Mon résultat

entrez la description de l'image ici


Ce que je veux

entrez la description de l'image ici


Code complet

https://github.com/Horttcore/Media-Taxonomies

Horttcore
la source

Réponses:

8

Le monde merveilleux de Backbone.js et WP (dont je ne connais presque rien).

Je pense que le problème est que vous appelez simplement la même valeur par défaut media.view, mais je pense que vous devez en initialiser une nouvelle.

Par exemple:

/**
 * Replace the media-toolbar with our own
 */
    var myDrop = media.view.AttachmentsBrowser;

    media.view.AttachmentsBrowser = media.view.AttachmentsBrowser.extend({
    createToolbar: function() {

        media.model.Query.defaultArgs.filterSource = 'filter-media-taxonomies';

        myDrop.prototype.createToolbar.apply(this,arguments);

        this.toolbar.set( key, new media.view.AttachmentFilters[key]({
            controller: this.controller,
            model:      this.collection.props,
            priority:   -80
        }).render() );
    }
});

Vous donnerait quelque chose comme ci-dessous (je n'ai pas fait de vérification d'erreur approfondie mais cela fonctionne).


entrez la description de l'image ici


Vous devriez également envisager de le faire avec media.view.AttachmentFilterset tout ce qui est personnalisé en ce qui concerne window.wp.media;.

Wyck
la source
Super merci! Je devrais en savoir plus sur backbone.js, car il semble qu'il s'intègre davantage dans chaque nouvelle version de WP.
Horttcore
1
Merci d'en faire un plugin donc il a été facile de répondre :) En fait, vous m'avez inspiré pour créer un plugin github pour les questions WPSE.
Wyck