Добавить функцию фильтра в медиа модальной коробке

12

Я пытаюсь расширить медиа-модал, но я не могу найти какую-либо документацию / руководства по этому вопросу. Я тоже не мастер магистралей ;-)

Я хочу добавить поле выбора для каждой таксономии, которая прикреплена к типу сообщения вложения. На данный момент отображается только одно поле выбора.

Так вот что я придумал. Он прекрасно работает, за исключением того, что он заменяет панель инструментов по умолчанию.


Код

/**
 * 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

Horttcore
источник

Ответы:

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.AttachmentFiltersчто связано с window.wp.media;.

Уик
источник
Огромное спасибо! Я должен прочитать о backbone.js в ближайшее время, так как он становится все более интегрированным в каждую новую версию WP.
Хорткор
1
Спасибо за то, что вы сделали этот плагин, чтобы на него было легко ответить :) На самом деле вы вдохновили меня на создание плагина github для вопросов WPSE.
Wyck