Ticket #31793: 31793.patch

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

@@ -552 +552 @@
                 currentTheme: '',
                 overlay: '',
                 template: '',
+                screenshotQueue: null,
+                $window: $( window ),
+                $customizeSidebar: $( '.wp-full-overlay-sidebar-content:first' ),
 
                 /**
                  * @since 4.2.0
@@ -582 +585 @@
                                         section.closeDetails();
                                 }
                         });
+
+                        _.bindAll( this, 'renderScreenshots' );
                 },
 
                 /**
@@ -691 +696 @@
                                         }
                                 });
                                 api.panel.each( function ( otherPanel ) {
-                                        if ( panel !== otherPanel ) {
-                                                otherPanel.collapse( { duration: 0 } );
-                                        }
+                                        otherPanel.collapse( { duration: 0 } );
                                 });
 
                                 content.show( 0, function() {
@@ -703 +706 @@
                                         section.addClass( 'current-panel' );
                                         overlay.addClass( 'in-themes-panel' );
                                         container.scrollTop( 0 );
+                                        _.delay( panel.renderScreenshots, 10 ); // Wait for controls
+                                        panel.$customizeSidebar.on( 'scroll.customize-themes-section', _.throttle( panel.renderScreenshots, 300 ) );
                                         if ( args.completeCallback ) {
                                                 args.completeCallback();
                                         }
@@ -713 +718 @@
                                 siblings.removeClass( 'open' );
                                 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
                                         if ( args.completeCallback ) {
@@ -726 +732 @@
                 },
 
                 /**
+                 * 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 $image = control.container.find( '.theme-screenshot img' );
+
+                                if ( ! $image.length ) {
+                                        return false;
+                                }
+
+                                // Based on unveil.js.
+                                var wt = section.$window.scrollTop(),
+                                        wb = wt + section.$window.height(),
+                                        et = $image.offset().top,
+                                        eb = et + $image.height(),
+                                        threshold = 50,
+                                        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.
                  *
                  * @since 4.2.0
@@ -815 +863 @@
                         callback = callback || function(){};
                         section.currentTheme = theme.id;
                         section.overlay.html( section.template( theme ) )
-                                       .fadeIn( 'fast' )
-                                       .focus();
+                                .fadeIn( 'fast' )
+                                .focus();
                         $( 'body' ).addClass( 'modal-open' );
                         section.containFocus( section.overlay );
                         section.updateLimits();
@@ -1480 +1528 @@
 
                         this.params.attachment = this.params.defaultAttachment;
                         this.setting( this.params.defaultAttachment.url );
-                },
+                },
 
                 /**
                  * Called when the "Remove" link is clicked. Empties the setting.
@@ -1899 +1947 @@
 
                                 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 );
+                                }
+                        });
                 },
 
                 /**
@@ -1908 +1965 @@
                  */
                 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 ) ) {
                                 control.activate();

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

@@ -1205 +1205 @@
                 <div class="theme" tabindex="0" data-preview-url="<?php echo esc_attr( $preview_url ); ?>" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
                         <# 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 { #>
                                 <div class="theme-screenshot blank"></div>