Tambahkan fungsi filter dalam kotak modal media

Saya mencoba untuk memperluas modal media, tetapi saya tidak dapat menemukan dokumentasi / tutorial tentang hal itu. Saya bukan master backbone juga ;-)

Saya ingin menambahkan kotak pilih untuk setiap taksonomi yang dilampirkan ke jenis pos lampiran. Saat ini hanya satu kotak pilih yang ditampilkan.

Jadi ini yang saya pikirkan. Ini berfungsi dengan baik kecuali itu menggantikan toolbar default.

Kode

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

});

Asli

Hasil saya

Apa yang saya inginkan

Kode lengkap

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

Dunia Backbone.js dan WP yang indah (yang saya hampir tidak tahu apa-apa).

Saya pikir masalahnya adalah Anda hanya memanggil default yang sama media.view, alih-alih saya percaya Anda perlu menginisialisasi yang baru.

Sebagai contoh:

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

Akan memberi Anda sesuatu seperti di bawah ini (saya tidak melakukan pengecekan kesalahan menyeluruh tetapi berhasil).

Anda juga harus mempertimbangkan melakukan ini dengan media.view.AttachmentFiltersdan apa pun yang berkaitan dengan kebiasaan window.wp.media;.