Ticket #5153: 5153.diff

wordpress.org/public_html/wp-content/themes/pub/wporg-themes/css/components/_main.scss

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

wordpress.org/public_html/wp-content/themes/pub/wporg-themes/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() ) { ?>
@@ -90 +89 @@
                         <?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>
+                <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>
                 <div class="theme-install-overlay"></div>
                 <div class="theme-overlay"></div>
                 <span class="spinner"></span>

wordpress.org/public_html/wp-content/themes/pub/wporg-themes/js/theme.js

@@ -74 +74 @@
 
                 // Sets up a throttler for binding to 'scroll'
                 initialize: function( options ) {
-                        // Scroller checks how far the scroll position is
-                        _.bindAll( this, 'scroller' );
+                        _.bindAll( this, 'loadMoreThemes' );
 
                         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 ) );
+
+                        $('.js-load-more-themes').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
@@ -1036 +1024 @@
                                 $( 'body' ).addClass( 'no-results' );
                         });
 
-                        this.listenTo( this.parent, 'theme:scroll', function() {
+                        this.listenTo( this.parent, 'theme:loadMore', function() {
                                 self.renderThemes( self.parent.page );
                         });