Agregar función de filtro en el cuadro modal de medios

12

Estoy tratando de extender el modal de medios, pero no puedo encontrar documentación / tutoriales al respecto. No soy un maestro de la columna vertebral también ;-)

Quiero agregar un cuadro de selección para cada taxonomía que se adjunta al tipo de publicación adjunta. Por el momento, solo se muestra un cuadro de selección.

Entonces esto es lo que se me ocurrió. Funciona muy bien, excepto que reemplaza la barra de herramientas predeterminada.


Código

/**
 * 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

ingrese la descripción de la imagen aquí


Mi resultado

ingrese la descripción de la imagen aquí


Lo que quiero

ingrese la descripción de la imagen aquí


Código completo

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

Horttcore
fuente

Respuestas:

8

El maravilloso mundo de Backbone.js y WP (del cual apenas sé nada).

Creo que el problema es que solo está llamando al mismo valor predeterminado media.view, en cambio creo que necesita inicializar uno nuevo.

Por ejemplo:

/**
 * 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() );
    }
});

Le daría algo como a continuación (no realicé ninguna comprobación exhaustiva de errores, pero funciona).


ingrese la descripción de la imagen aquí


También debe considerar hacer esto media.view.AttachmentFiltersy cualquier cosa personalizada con respecto a window.wp.media;.

Wyck
fuente
¡Increíble gracias! Debería leer sobre backbone.js pronto, ya que parece que se integra más en cada nueva versión de WP.
Horttcore
1
Gracias por hacer de este un complemento, así que fue fácil de responder :) De hecho, me has inspirado para hacer un complemento de github para preguntas de WPSE.
Wyck