Changeset 29686

Timestamp:

09/03/2014 06:09:33 AM (10 years ago)

Author:

nacin

Message:

Media: Avoid repeated thumbnail resizing.

props avryl, wonderboymusic, azaozz.
fixes #27423.

Location:

trunk/src/wp-includes

Files:

• css/media-views.css (modified) (1 diff)
• js/media-views.js (modified) (5 diffs)

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

@@ -2512 +2512 @@
 }
 
-.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%;
 }

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

@@ -5200 +5200 @@
 
             this._viewsByCid = {};
+            this.$window = $( window );
+            this.resizeEvent = 'resize.media-modal-columns';
 
             this.collection.on( 'add', function( attachment ) {
@@ -5231 +5233 @@
 
             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 ) );
         },
 
@@ -5250 +5256 @@
         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 );
@@ -5293 +5299 @@
         dispose: function() {
             this.collection.props.off( null, null, this );
-            $( window ).off( 'resize.media-modal-columns' );
+            if ( this.options.resize ) {
+                this.$window.off( this.resizeEvent );
+            }
 
             /**
@@ -5309 +5317 @@
 
                 if ( ! prev || prev !== this.columns ) {
-                    this.$el.attr( 'data-columns', this.columns );
+                    this.$el.closest( '.media-frame-content' ).attr( 'data-columns', this.columns );
                 }
             }