Ticket #27423: 27423.24.patch

src/wp-includes/css/media-views.css

@@ -2511 +2511 @@
         }
 }
 
-.attachments[data-columns="1"] .attachment {
+.media-frame-content[data-columns="1"] .attachment {
         width: 100%;
 }
 
-.attachments[data-columns="2"] .attachment {
+.media-frame-content[data-columns="2"] .attachment {
         width: 50%;
 }
 
-.attachments[data-columns="3"] .attachment {
+.media-frame-content[data-columns="3"] .attachment {
         width: 33.3%;
 }
 
-.attachments[data-columns="4"] .attachment {
+.media-frame-content[data-columns="4"] .attachment {
         width: 25%;
 }
 
-.attachments[data-columns="5"] .attachment {
+.media-frame-content[data-columns="5"] .attachment {
         width: 20%;
 }
 
-.attachments[data-columns="6"] .attachment {
+.media-frame-content[data-columns="6"] .attachment {
         width: 16.6%;
 }
 
-.attachments[data-columns="7"] .attachment {
+.media-frame-content[data-columns="7"] .attachment {
         width: 14.2%;
 }
 
-.attachments[data-columns="8"] .attachment {
+.media-frame-content[data-columns="8"] .attachment {
         width: 12.5%;
 }
 
-.attachments[data-columns="9"] .attachment {
+.media-frame-content[data-columns="9"] .attachment {
         width: 11.1%;
 }
 
-.attachments[data-columns="10"] .attachment {
+.media-frame-content[data-columns="10"] .attachment {
         width: 10%;
 }
 
-.attachments[data-columns="11"] .attachment {
+.media-frame-content[data-columns="11"] .attachment {
         width: 9%;
 }
 
-.attachments[data-columns="12"] .attachment {
+.media-frame-content[data-columns="12"] .attachment {
         width: 8.3%;
 }

src/wp-includes/js/media-views.js

@@ -5199 +5199 @@
                         });
 
                         this._viewsByCid = {};
+                        this.$window = $( window );
+                        this.resizeEvent = 'resize.media-modal-columns';
 
                         this.collection.on( 'add', function( attachment ) {
                                 this.views.add( this.createAttachmentView( attachment ), {
@@ -5230 +5232 @@
                         _.bindAll( this, 'setColumns' );
 
                         if ( this.options.resize ) {
-                                $( window ).on( 'resize.media-modal-columns', this.setColumns );
+                                this.on( 'ready', this.bindEvents );
                                 this.controller.on( 'open', this.setColumns );
+
+                                // Call this.setColumns() after this view has been rendered in the DOM so
+                                // attachments get proper width applied.
+                                _.defer( this.setColumns, this );
                         }
+                },
 
-                        // Call this.setColumns() after this view has been rendered in the DOM so
-                        // attachments get proper width applied.
-                        _.defer( this.setColumns, this );
+                bindEvents: function() {
+                        this.$window.off( this.resizeEvent ).on( this.resizeEvent, _.debounce( this.setColumns, 50 ) );
                 },
 
                 attachmentFocus: function() {
@@ -5249 +5255 @@
 
                 arrowEvent: function( event ) {
                         var attachments = this.$el.children( 'li' ),
-                                perRow = this.$el.data( 'columns' ),
+                                perRow = this.columns,
                                 index = attachments.filter( ':focus' ).index(),
                                 row = ( index + 1 ) <= perRow ? 1 : Math.ceil( ( index + 1 ) / perRow );
 
@@ -5292 +5298 @@
 
                 dispose: function() {
                         this.collection.props.off( null, null, this );
-                        $( window ).off( 'resize.media-modal-columns' );
+                        if ( this.options.resize ) {
+                                this.$window.off( this.resizeEvent );
+                        }
 
                         /**
                          * call 'dispose' directly on the parent class
@@ -5308 +5316 @@
                                 this.columns = Math.min( Math.round( width / this.options.idealColumnWidth ), 12 ) || 1;
 
                                 if ( ! prev || prev !== this.columns ) {
-                                        this.$el.attr( 'data-columns', this.columns );
+                                        this.$el.closest( '.media-frame-content' ).attr( 'data-columns', this.columns );
                                 }
                         }
                 },