Aggiungi la funzione filtro nella casella modale multimediale


12

Sto cercando di estendere il modale multimediale, ma non riesco a trovare alcuna documentazione / tutorial a riguardo. Anche io non sono un maestro della spina dorsale ;-)

Voglio aggiungere una casella di selezione per ogni tassonomia allegata al tipo di post allegato. Al momento viene visualizzata solo una casella di selezione.

Quindi questo è quello che mi è venuto in mente. Funziona benissimo tranne per il fatto che sostituisce la barra degli strumenti predefinita.


Codice

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

});

Originale

inserisci qui la descrizione dell'immagine


Il mio risultato

inserisci qui la descrizione dell'immagine


Quello che voglio

inserisci qui la descrizione dell'immagine


Codice completo

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

Risposte:


8

Il meraviglioso mondo di Backbone.js e WP (di cui non so quasi nulla).

Penso che il problema sia che stai solo chiamando lo stesso valore predefinito media.view, invece credo che tu debba inizializzarne uno nuovo.

Per esempio:

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

Ti darei qualcosa del tipo di seguito (non ho fatto alcun controllo approfondito degli errori ma funziona).


inserisci qui la descrizione dell'immagine


Dovresti anche considerare di farlo con media.view.AttachmentFilterse qualsiasi altra cosa riguardo a window.wp.media;.


Fantastico grazie! Dovrei leggere presto backbone.js, poiché sembra che sia più integrato in ogni nuova versione di WP.
Horttcore,

1
Grazie per aver reso questo un plugin quindi è stato facile rispondere :) In effetti hai ispirato il mio a creare un plugin github per le domande WPSE.
Wyck,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.