Media: Avoid repeated thumbnail resizing.

props avryl, wonderboymusic, azaozz.
fixes #27423.

Built from https://develop.svn.wordpress.org/trunk@29686


git-svn-id: http://core.svn.wordpress.org/trunk@29461 1a063a9b-81f0-0310-95a4-ce76da25c4cd

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

@@ -2511,50 +2511,50 @@
 	}
 }
 
-.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%;
 }

wp-includes/css/media-views.css

@@ -2511,50 +2511,50 @@
 	}
 }
 
-.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%;
 }

wp-includes/js/media-views.js

@@ -5199,6 +5199,8 @@
 			});
 
 			this._viewsByCid = {};
+			this.$window = $( window );
+			this.resizeEvent = 'resize.media-modal-columns';
 
 			this.collection.on( 'add', function( attachment ) {
 				this.views.add( this.createAttachmentView( attachment ), {
@@ -5230,13 +5232,17 @@
 			_.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,7 +5255,7 @@
 
 		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,7 +5298,9 @@
 
 		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,7 +5316,7 @@
 				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 );
 				}
 			}
 		},