Filterfunktion im Medien-Modalfeld hinzufügen

12

Ich versuche, das Medien-Modal zu erweitern, finde aber keine Dokumentation / Tutorials dazu. Ich bin auch kein Meister des Rückgrats ;-)

Ich möchte für jede Taxonomie, die an den Typ des Anhangspostens angehängt ist, ein Auswahlfeld hinzufügen. Momentan wird nur ein Auswahlfeld angezeigt.

Das habe ich mir also ausgedacht. Es funktioniert hervorragend, außer dass es die Standard-Symbolleiste ersetzt.


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

Bildbeschreibung hier eingeben


Mein Ergebnis

Bildbeschreibung hier eingeben


Was ich möchte

Bildbeschreibung hier eingeben


Vollständiger Code

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

Horttcore
quelle

Antworten:

8

Die wunderbare Welt von Backbone.js und WP (von denen ich kaum etwas weiß).

Ich denke, das Problem ist, dass Sie nur den gleichen Standard aufrufen media.view, stattdessen glaube ich, dass Sie einen neuen initialisieren müssen.

Beispielsweise:

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

Würden Sie etwas wie unten geben (ich habe keine gründliche Fehlerprüfung durchgeführt, aber es funktioniert).


Bildbeschreibung hier eingeben


Sie sollten auch in Betracht ziehen, dies mit media.view.AttachmentFiltersund mit anderen Sitten zu tun window.wp.media;.

Wyck
quelle
Großartig, danke! Ich sollte bald über backbone.js lesen, da es anscheinend mit jeder neuen WP-Version mehr integriert wird.
Horttcore
1
Vielen Dank, dass Sie dieses Plugin so gestaltet haben, dass es leicht zu beantworten war :) Sie haben mich sogar dazu inspiriert, ein Github-Plugin für WPSE-Fragen zu erstellen.
Wyck