Changeset 32088

Timestamp:

04/08/2015 08:51:39 PM (12 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 { #>