เพิ่มฟังก์ชั่นการกรองในกล่องสื่อ modal


12

ฉันพยายามที่จะขยายคำกริยาสื่อ แต่ฉันไม่สามารถ 'ค้นหาเอกสาร / แบบฝึกหัดเกี่ยวกับมันได้ ฉันไม่ใช่เจ้านายของกระดูกสันหลังเช่นกัน ;-)

ฉันต้องการเพิ่มกล่องเลือกสำหรับแต่ละ taxonomy ที่แนบกับชนิดโพสต์สิ่งที่แนบ ในขณะนี้จะมีเพียงช่องเดียวที่เลือก

ดังนั้นนี่คือสิ่งที่ฉันมาด้วย มันใช้งานได้ดียกเว้นว่ามันจะแทนที่แถบเครื่องมือเริ่มต้น


รหัส

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

});

เป็นต้นฉบับ

ป้อนคำอธิบายรูปภาพที่นี่


ผลลัพธ์ของฉัน

ป้อนคำอธิบายรูปภาพที่นี่


สิ่งที่ฉันต้องการ

ป้อนคำอธิบายรูปภาพที่นี่


รหัสเต็ม

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

คำตอบ:


8

โลกมหัศจรรย์ของ Backbone.js และ WP (ซึ่งฉันไม่รู้อะไรเลย)

ฉันคิดว่าปัญหาคือคุณเพียงแค่เรียกค่าเริ่มต้นเดียวกันmedia.viewแต่ฉันเชื่อว่าคุณต้องเริ่มต้นใหม่

ตัวอย่างเช่น:

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

จะให้สิ่งที่คุณต้องการด้านล่าง (ฉันไม่ได้ทำการตรวจสอบข้อผิดพลาดอย่างละเอียด แต่ใช้งานได้)


ป้อนคำอธิบายรูปภาพที่นี่


นอกจากนี้คุณยังควรพิจารณาการทำเช่นนี้ด้วยและสิ่งที่กำหนดเองกับเรื่องที่เกี่ยวกับmedia.view.AttachmentFilterswindow.wp.media;


ยอดเยี่ยมขอบคุณ! ฉันควรอ่านเกี่ยวกับ backbone.js เร็ว ๆ นี้เนื่องจากดูเหมือนว่ามันจะรวมเข้ากับ WP รุ่นใหม่ทุกครั้ง
Horttcore

1
ขอขอบคุณที่ทำปลั๊กอินนี้เพื่อให้ง่ายต่อการตอบ :) ที่จริงคุณมีแรงบันดาลใจให้สร้าง github plugin สำหรับคำถาม WPSE
Wyck
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.