Ticket #5153: 5153.3.diff

css/components/_main.scss

@@ -162 +162 @@
         opacity: 1;
 }
 
+.theme-load-more {
+        margin-top: 40px;
+        text-align: center;
+}
+
 // Theme Widget area in the themes screen.
 .theme-widget-area {
   background-color: #fff;

index.php

@@ -21 +21 @@
                         </div>
 
                         <ul class="filter-links">
-                                <?php /* <li><a href="<?php echo esc_url( home_url( 'browse/featured/' ) ); ?>" data-sort="featured" <?php if ( (is_front_page() && !get_query_var('browse') ) || 'featured' == get_query_var('browse') ) { echo 'class="current"'; } ?>><?php _ex( 'Featured', 'themes', 'wporg-themes' ); ?></a></li> */ ?>
                                 <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>" data-sort="popular" <?php if ( (is_front_page() && !get_query_var('browse') ) || 'popular' == get_query_var('browse') ) { echo 'class="current"'; } ?>><?php _ex( 'Popular', 'themes', 'wporg-themes' ); ?></a></li>
                                 <li><a href="<?php echo esc_url( home_url( 'browse/new/' ) ); ?>" data-sort="new" <?php if ( 'new' == get_query_var('browse') ) { echo 'class="current"'; } ?>><?php _ex( 'Latest', 'themes', 'wporg-themes' ); ?></a></li>
                                 <?php if ( is_user_logged_in() ) { ?>
@@ -83 +82 @@
                         <?php /* TODO: Don't display this for no-js queries where $wp_query->post_count > 0, but JS needs it too. */ ?>
                         <p class="no-themes"><?php _e( 'No themes found. Try a different search.', 'wporg-themes' ); ?></p>
                 </div>
+                <?php if ( true ) : ?>
+                <div class="theme-load-more">
+                        <button class="button button-primary button-large js-load-more-themes"><?php esc_html_e( 'Load more themes', 'wporg-themes' ); ?></button>
+                </div>
+                <?php endif; ?>
                 <div class="theme-install-overlay"></div>
                 <div class="theme-overlay"></div>
                 <span class="spinner"></span>

js/theme.js

@@ -72 +72 @@
                 // Pagination instance
                 page: 0,
 
-                // Sets up a throttler for binding to 'scroll'
+                loadMore: $('.js-load-more-themes'),
+
                 initialize: function( options ) {
-                        // Scroller checks how far the scroll position is
-                        _.bindAll( this, 'scroller' );
+                        this.SearchView = options.SearchView ? options.SearchView : themes.view.Search;
 
-                        this.SearchView = options.SearchView ? options.SearchView : themes.view.Search;
-                        // Bind to the scroll event and throttle
-                        // the results from this.scroller
-                        this.window.bind( 'scroll', _.throttle( this.scroller, 300 ) );
+                        this.loadMoreThemes = this.loadMoreThemes.bind( this );
+                        this.loadMore.bind( 'click', this.loadMoreThemes );
                 },
 
                 // Main render control
@@ -122 +120 @@
                                 .append( view.el );
                 },
 
-                // Checks when the user gets close to the bottom
-                // of the mage and triggers a theme:scroll event
-                scroller: function() {
-                        var self = this,
-                                bottom, threshold;
-
-                        bottom = this.window.scrollTop() + self.window.height();
-                        threshold = self.$el.offset().top + self.$el.outerHeight( false ) - self.window.height();
-                        threshold = Math.round( threshold * 0.9 );
-
-                        if ( bottom > threshold ) {
-                                this.trigger( 'theme:scroll' );
-                        }
-                }
+                // Trigger loading additional themes
+                loadMoreThemes: function () {
+                        this.trigger( 'theme:loadMore' );
+                },
         });
 
         // Set up the Collection for our theme data
@@ -305 +293 @@
                                                 // Add the new themes to the current collection
                                                 // @todo update counter
                                                 self.add( data.themes );
+
+                                                self.trigger( 'themes:rerender' );
+
                                                 self.trigger( 'query:success', data.info.results );
 
                                                 // We are done loading themes for now.
@@ -1036 +1027 @@
                                 $( 'body' ).addClass( 'no-results' );
                         });
 
-                        this.listenTo( this.parent, 'theme:scroll', function() {
+                        this.listenTo( this.parent, 'theme:loadMore', function() {
                                 self.renderThemes( self.parent.page );
                         });
 
+                        this.listenTo( self.collection, 'themes:rerender', function() {
+                                self.renderThemes( self.parent.page );
+                        });
+
                         this.listenTo( this.parent, 'theme:close', function() {
                                 if ( self.overlay ) {
                                         self.overlay.closeOverlay();
@@ -1383 +1378 @@
                                 self.collection.query( self.collection.currentQuery.request );
                         });
 
-                        this.listenTo( this.collection, 'query:success', function() {
+                        this.listenTo( this.collection, 'query:success', function( count ) {
                                 $( 'body' ).removeClass( 'loading-content' );
                                 $( '.theme-browser' ).find( 'div.error' ).remove();
+
+                                // If we've loaded another page, set focus to the first of the new themes.
+                                if ( self.page > 1 ) {
+                                        var nextTheme = 1 + ( ( self.page - 1 ) * themes.data.settings.postsPerPage );
+                                        this.$el.find( '.theme:nth-child(' + nextTheme + ')' ).focus();
+                                }
+
+                                if ( ! _.isNumber( count ) ) {
+                                        count = self.collection.count;
+                                }
+                                // Hide the load more button when all themes matching this
+                                // collection query are on the page.
+                                if ( count <= self.collection.length ) {
+                                        self.loadMore.hide();
+                                } else {
+                                        self.loadMore.show();
+                                }
                         });
 
                         this.listenTo( this.collection, 'query:fail', function() {