Tambahkan fungsi filter dalam kotak modal media

12

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

masukkan deskripsi gambar di sini


Hasil saya

masukkan deskripsi gambar di sini


Apa yang saya inginkan

masukkan deskripsi gambar di sini


Kode lengkap

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

Horttcore
sumber

Jawaban:

8

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).


masukkan deskripsi gambar di sini


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

Wyck
sumber
Luarbiasa, terimakasih! Saya harus segera membaca tentang backbone.js, karena sepertinya akan lebih terintegrasi di setiap versi WP baru.
Horttcore
1
Terima kasih telah membuat plugin ini jadi mudah untuk menjawab :) Sebenarnya Anda telah mengilhami saya untuk membuat plugin github untuk pertanyaan WPSE.
Wyck