web-dev-qa-db-fra.com

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

J'essaie d'étendre le média modal, mais je ne trouve pas de documentation/tutoriels à ce sujet. Je ne suis pas un maître de la colonne vertébrale aussi ;-)

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

Donc, voici ce que je suis venu avec. 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

enter image description here

Mon résultat

enter image description here

Ce que je veux

enter image description here

Code complet

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

backbonemedia-modal
12
Horttcore

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. Je pense plutôt 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 vérifié les erreurs en profondeur, mais cela fonctionne).

enter image description here

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

8
Wyck