Changeset 32088

Timestamp:

04/08/2015 08:51:39 PM (10 years ago)

Author:

ocean90

Message:

Customizer Theme Switcher: Lazy load theme screenshots.

props westonruter, ocean90.
fixes #31793.

Location:

trunk/src

Files:

• wp-admin/js/customize-controls.js (modified) (12 diffs)
• wp-includes/class-wp-customize-control.php (modified) (1 diff)

trunk/src/wp-admin/js/customize-controls.js

@@ -553 +553 @@
         overlay: '',
         template: '',
+        screenshotQueue: null,
+        $window: $( window ),
+        $customizeSidebar: $( '.wp-full-overlay-sidebar-content:first' ),
 
         /**
@@ -583 +586 @@
                 }
             });
+
+            _.bindAll( this, 'renderScreenshots' );
         },
 
@@ -651 +656 @@
             });
 
+            var renderScreenshots = _.throttle( _.bind( section.renderScreenshots, this ), 100 );
             section.container.on( 'input', '#themes-filter', function( event ) {
                 var count,
@@ -660 +666 @@
                 });
 
+                renderScreenshots();
+
                 // Update theme count.
                 count = section.container.find( 'li.customize-control:visible' ).length;
                 section.container.find( '.theme-count' ).text( count );
+            });
+
+            // Pre-load the first 3 theme screenshots.
+            api.bind( 'ready', function () {
+                _.each( section.controls().slice( 0, 3 ), function ( control ) {
+                    var img, src = control.params.theme.screenshot[0];
+                    if ( src ) {
+                        img = new Image();
+                        img.src = src;
+                    }
+                });
             });
         },
@@ -707 +726 @@
                 });
                 api.panel.each( function ( otherPanel ) {
-                    if ( panel !== otherPanel ) {
-                        otherPanel.collapse( { duration: 0 } );
-                    }
+                    otherPanel.collapse( { duration: 0 } );
                 });
 
@@ -719 +736 @@
                     overlay.addClass( 'in-themes-panel' );
                     container.scrollTop( 0 );
+                    _.delay( panel.renderScreenshots, 10 ); // Wait for the controls
+                    panel.$customizeSidebar.on( 'scroll.customize-themes-section', _.throttle( panel.renderScreenshots, 300 ) );
                     if ( args.completeCallback ) {
                         args.completeCallback();
@@ -730 +749 @@
                 section.removeClass( 'current-panel' );
                 overlay.removeClass( 'in-themes-panel' );
+                panel.$customizeSidebar.off( 'scroll.customize-themes-section' );
                 content.delay( 180 ).hide( 0, function() {
                     content.css( 'margin-top', 'inherit' ); // Reset
@@ -744 +764 @@
 
         /**
+         * Render control's screenshot if the control comes into view.
+         *
+         * @since 4.2.0
+         */
+        renderScreenshots: function( ) {
+            var section = this;
+
+            // Fill queue initially.
+            if ( section.screenshotQueue === null ) {
+                section.screenshotQueue = section.controls();
+            }
+
+            // Are all screenshots rendered?
+            if ( ! section.screenshotQueue.length ) {
+                return;
+            }
+
+            section.screenshotQueue = _.filter( section.screenshotQueue, function( control ) {
+                var $imageWrapper = control.container.find( '.theme-screenshot' ),
+                    $image = $imageWrapper.find( 'img' );
+
+                if ( ! $image.length ) {
+                    return false;
+                }
+
+                if ( $image.is( ':hidden' ) ) {
+                    return true;
+                }
+
+                // Based on unveil.js.
+                var wt = section.$window.scrollTop(),
+                    wb = wt + section.$window.height(),
+                    et = $image.offset().top,
+                    ih = $imageWrapper.height(),
+                    eb = et + ih,
+                    threshold = ih * 3,
+                    inView = eb >= wt - threshold && et <= wb + threshold;
+
+                if ( inView ) {
+                    control.container.trigger( 'render-screenshot' );
+                }
+
+                // If the image is in view return false so it's cleared from the queue.
+                return ! inView;
+            } );
+        },
+
+        /**
          * Advance the modal to the next theme.
          *
@@ -833 +901 @@
             section.currentTheme = theme.id;
             section.overlay.html( section.template( theme ) )
-                           .fadeIn( 'fast' )
-                           .focus();
+                .fadeIn( 'fast' )
+                .focus();
             $( 'body' ).addClass( 'modal-open' );
             section.containFocus( section.overlay );
@@ -1498 +1566 @@
             this.params.attachment = this.params.defaultAttachment;
             this.setting( this.params.defaultAttachment.url );
-        },
+        },
 
         /**
@@ -1917 +1985 @@
                 api.section( control.section() ).showDetails( control.params.theme );
             });
+
+            control.container.on( 'render-screenshot', function() {
+                var $screenshot = $( this ).find( 'img' ),
+                    source = $screenshot.data( 'src' );
+
+                if ( source ) {
+                    $screenshot.attr( 'src', source );
+                }
+            });
         },
 
@@ -1926 +2003 @@
         filter: function( term ) {
             var control = this,
-                haystack = control.params.theme.name + ' ' +
-                           control.params.theme.description + ' ' +
-                           control.params.theme.tags + ' ' +
-                           control.params.theme.author;
+                haystack = control.params.theme.name + ' ' +
+                    control.params.theme.description + ' ' +
+                    control.params.theme.tags + ' ' +
+                    control.params.theme.author;
             haystack = haystack.toLowerCase().replace( '-', ' ' );
             if ( -1 !== haystack.search( term ) ) {

trunk/src/wp-includes/class-wp-customize-control.php

@@ -1249 +1249 @@
             <# if ( data.theme.screenshot[0] ) { #>
                 <div class="theme-screenshot">
-                    <img src="{{ data.theme.screenshot[0] }}" alt="" />
+                    <img data-src="{{ data.theme.screenshot[0] }}" alt="" />
                 </div>
             <# } else { #>