Передача jQuery в загрузчик мультимедиа Wordpress


В плагине Wordpress, над которым я работаю, я использую встроенную функцию загрузки мультимедиа Wordpress (wp.media) для добавления фотографий. Я использую опцию selection для предварительного выбора изображений в медиатеке после открытия модального. Я подумал, что было бы классной идеей прикрепить новый класс CSS к этим элементам и придать им стиль, отличный от других новых изображений, выбранных пользователем.

У меня возникла проблема с передачей jQuery в модальный режим, и я, похоже, не могу получить события правильные. Проблема в том, что изображения в загрузчике мультимедиа динамически генерируются после открытия модального. Я попытался добавить свой скрипт в событие on (при открытии модального), но, похоже, это слишком рано. Добавлять их к событиям select или close, очевидно, слишком поздно.

Цель состоит в том, чтобы добавить пользовательский класс CSS ко всем изображениям, которые предварительно выбраны после открытия модального. Есть ли у кого-нибудь опыт передачи jQuery в загрузчик мультимедиа модальный?

Вот jQuery, который я использую:

//Image Uploader function                  
odp_slideshowImageUpload = {

    // Call this from the upload button to initiate the upload frame.
    uploader : function() {
        var frame = wp.media({
            title : 'Choose or Upload an Image(s)',
            multiple : true,
            library : { type : 'image' }, //only can upload images
            button : { text : 'Insert Image(s)' }
        });

        frame.on( 'open', function() {
            var selection = frame.state().get('selection');

            // Get the id of all the images already in the slideshow
            var ids = $( '#odp_slider_container li[id]' ).map(function() { return this.id; }).get();
            // When our modal opens, make all of the images "selected"
            ids.forEach( function(id) {
                attachment = wp.media.attachment(id);
                attachment.fetch();
                selection.add( attachment ? [ attachment ] : [] );
            });


            $('.media-modal-content li.selected').addClass('testing'); //does not work

        });

        // Handle results from media manager
        frame.on( 'select', function() {
            var selection = frame.state().get( 'selection' );
            selection.map( function( attachment ) {
                attachment = attachment.toJSON();
                $( '#odp_slider_container' ).append( function() {
                    var output = '';

                    output += '<li id="' + attachment.id + '" class="odp-slideshow-item" >';
                    output += '<div class="slide-container"><image  src="' + attachment.sizes.thumbnail.url + '" alt="' + attachment.alt + '" /></div>';
                    output += '<input type="text" class="slide-id odp-force-hidden" name="slide_id[]" value="' + attachment.id + '" />';
                    output += '<input type="text" class="slide-image odp-force-hidden" name="slide_image[]" value="' + attachment.url + '" />';
                    output += '<input type="text" class="slide-title odp-force-hidden" name="slide_title[]" value="' + attachment.title + '" />';
                    output += '<input type="text" class="slide-alt odp-force-hidden" name="slide_alt[]" value="' + attachment.alt + '" />';
                    output += '<input type="text" class="slide-caption odp-force-hidden" name="slide_caption[]" value="' + attachment.caption + '" />';
                    output += '<div class="details-container"><a class="details" href="#">Details</a><a class="remove" href="#">Remove</a></div>';
                    output += '</li>';

                    return output;
                });
            });
        });

        frame.open();
        return false;

    },

};

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

Author: ndiego, 2014-09-18

1 answers

Как вы упомянули, загрузчик мультимедиа динамически отображает изображения "по требованию", и, похоже, нет события, на которое можно было бы нацелиться, чтобы добавить класс. Грубый способ сделать это - переопределить атрибут wp.media.view.Attachment.Library.className (до создания кадра), чтобы вернуть дополнительный класс, если идентификатор модели находится в начальном выборе. Это означает перемещение выбранных идентификаторов за пределы открытого, например

//Image Uploader function                  
odp_slideshowImageUpload = {

    // Call this from the upload button to initiate the upload frame.
    uploader : function() {
        // Get the id of all the images already in the slideshow
        var ids = $( '#odp_slider_container li[id]' ).map(function() { return this.id; }).get();
        wp.media.view.Attachment.Library = wp.media.view.Attachment.Library.extend({
            className: function () { return $.inArray(this.model.get('id').toString(), ids ) !== -1 ? 'attachment testing' : 'attachment'; }
        });
        var frame = wp.media({
            // etc
 0
Author: bonger, 2014-09-19 19:48:09