WordPress.org

Make WordPress Core

Ticket #31793: 31793.patch

File 31793.patch, 4.9 KB (added by ocean90, 6 years ago)
  • src/wp-admin/js/customize-controls.js

     
    552552                currentTheme: '',
    553553                overlay: '',
    554554                template: '',
     555                screenshotQueue: null,
     556                $window: $( window ),
     557                $customizeSidebar: $( '.wp-full-overlay-sidebar-content:first' ),
    555558
    556559                /**
    557560                 * @since 4.2.0
     
    582585                                        section.closeDetails();
    583586                                }
    584587                        });
     588
     589                        _.bindAll( this, 'renderScreenshots' );
    585590                },
    586591
    587592                /**
     
    691696                                        }
    692697                                });
    693698                                api.panel.each( function ( otherPanel ) {
    694                                         if ( panel !== otherPanel ) {
    695                                                 otherPanel.collapse( { duration: 0 } );
    696                                         }
     699                                        otherPanel.collapse( { duration: 0 } );
    697700                                });
    698701
    699702                                content.show( 0, function() {
     
    703706                                        section.addClass( 'current-panel' );
    704707                                        overlay.addClass( 'in-themes-panel' );
    705708                                        container.scrollTop( 0 );
     709                                        _.delay( panel.renderScreenshots, 10 ); // Wait for controls
     710                                        panel.$customizeSidebar.on( 'scroll.customize-themes-section', _.throttle( panel.renderScreenshots, 300 ) );
    706711                                        if ( args.completeCallback ) {
    707712                                                args.completeCallback();
    708713                                        }
     
    713718                                siblings.removeClass( 'open' );
    714719                                section.removeClass( 'current-panel' );
    715720                                overlay.removeClass( 'in-themes-panel' );
     721                                panel.$customizeSidebar.off( 'scroll.customize-themes-section' );
    716722                                content.delay( 180 ).hide( 0, function() {
    717723                                        content.css( 'margin-top', 'inherit' ); // Reset
    718724                                        if ( args.completeCallback ) {
     
    726732                },
    727733
    728734                /**
     735                 * Render control's screenshot if the control comes into view.
     736                 *
     737                 * @since 4.2.0
     738                 */
     739                renderScreenshots: function( ) {
     740                        var section = this;
     741
     742                        // Fill queue initially.
     743                        if ( section.screenshotQueue === null ) {
     744                                section.screenshotQueue = section.controls();
     745                        }
     746
     747                        // Are all screenshots rendered?
     748                        if ( ! section.screenshotQueue.length ) {
     749                                return;
     750                        }
     751
     752                        section.screenshotQueue = _.filter( section.screenshotQueue, function( control ) {
     753                                var $image = control.container.find( '.theme-screenshot img' );
     754
     755                                if ( ! $image.length ) {
     756                                        return false;
     757                                }
     758
     759                                // Based on unveil.js.
     760                                var wt = section.$window.scrollTop(),
     761                                        wb = wt + section.$window.height(),
     762                                        et = $image.offset().top,
     763                                        eb = et + $image.height(),
     764                                        threshold = 50,
     765                                        inView = eb >= wt - threshold && et <= wb + threshold;
     766
     767                                if ( inView ) {
     768                                        control.container.trigger( 'render-screenshot' );
     769                                }
     770
     771                                // If the image is in view return false so it's cleared from the queue.
     772                                return ! inView;
     773                        } );
     774                },
     775
     776                /**
    729777                 * Advance the modal to the next theme.
    730778                 *
    731779                 * @since 4.2.0
     
    815863                        callback = callback || function(){};
    816864                        section.currentTheme = theme.id;
    817865                        section.overlay.html( section.template( theme ) )
    818                                        .fadeIn( 'fast' )
    819                                        .focus();
     866                                .fadeIn( 'fast' )
     867                                .focus();
    820868                        $( 'body' ).addClass( 'modal-open' );
    821869                        section.containFocus( section.overlay );
    822870                        section.updateLimits();
     
    14801528
    14811529                        this.params.attachment = this.params.defaultAttachment;
    14821530                        this.setting( this.params.defaultAttachment.url );
    1483                 },
     1531                },
    14841532
    14851533                /**
    14861534                 * Called when the "Remove" link is clicked. Empties the setting.
     
    18991947
    19001948                                api.section( control.section() ).showDetails( control.params.theme );
    19011949                        });
     1950
     1951                        control.container.on( 'render-screenshot', function() {
     1952                                var $screenshot = $( this ).find( 'img' ),
     1953                                        source = $screenshot.data( 'src' );
     1954
     1955                                if ( source ) {
     1956                                        $screenshot.attr( 'src', source );
     1957                                }
     1958                        });
    19021959                },
    19031960
    19041961                /**
     
    19081965                 */
    19091966                filter: function( term ) {
    19101967                        var control = this,
    1911                             haystack = control.params.theme.name + ' ' +
    1912                                            control.params.theme.description + ' ' +
    1913                                            control.params.theme.tags + ' ' +
    1914                                            control.params.theme.author;
     1968                                haystack = control.params.theme.name + ' ' +
     1969                                        control.params.theme.description + ' ' +
     1970                                        control.params.theme.tags + ' ' +
     1971                                        control.params.theme.author;
    19151972                        haystack = haystack.toLowerCase().replace( '-', ' ' );
    19161973                        if ( -1 !== haystack.search( term ) ) {
    19171974                                control.activate();
  • src/wp-includes/class-wp-customize-control.php

     
    12051205                <div class="theme" tabindex="0" data-preview-url="<?php echo esc_attr( $preview_url ); ?>" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
    12061206                        <# if ( data.theme.screenshot[0] ) { #>
    12071207                                <div class="theme-screenshot">
    1208                                         <img src="{{ data.theme.screenshot[0] }}" alt="" />
     1208                                        <img data-src="{{ data.theme.screenshot[0] }}" alt="" />
    12091209                                </div>
    12101210                        <# } else { #>
    12111211                                <div class="theme-screenshot blank"></div>