WordPress.org

Making WordPress.org

Ticket #5153: 5153.3.diff

File 5153.3.diff, 5.3 KB (added by ryelle, 7 months ago)
  • css/components/_main.scss

     
    162162        opacity: 1;
    163163}
    164164
     165.theme-load-more {
     166        margin-top: 40px;
     167        text-align: center;
     168}
     169
    165170// Theme Widget area in the themes screen.
    166171.theme-widget-area {
    167172  background-color: #fff;
  • index.php

     
    2121                        </div>
    2222
    2323                        <ul class="filter-links">
    24                                 <?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> */ ?>
    2524                                <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>
    2625                                <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>
    2726                                <?php if ( is_user_logged_in() ) { ?>
     
    8382                        <?php /* TODO: Don't display this for no-js queries where $wp_query->post_count > 0, but JS needs it too. */ ?>
    8483                        <p class="no-themes"><?php _e( 'No themes found. Try a different search.', 'wporg-themes' ); ?></p>
    8584                </div>
     85                <?php if ( true ) : ?>
     86                <div class="theme-load-more">
     87                        <button class="button button-primary button-large js-load-more-themes"><?php esc_html_e( 'Load more themes', 'wporg-themes' ); ?></button>
     88                </div>
     89                <?php endif; ?>
    8690                <div class="theme-install-overlay"></div>
    8791                <div class="theme-overlay"></div>
    8892                <span class="spinner"></span>
  • js/theme.js

     
    7272                // Pagination instance
    7373                page: 0,
    7474
    75                 // Sets up a throttler for binding to 'scroll'
     75                loadMore: $('.js-load-more-themes'),
     76
    7677                initialize: function( options ) {
    77                         // Scroller checks how far the scroll position is
    78                         _.bindAll( this, 'scroller' );
     78                        this.SearchView = options.SearchView ? options.SearchView : themes.view.Search;
    7979
    80                         this.SearchView = options.SearchView ? options.SearchView : themes.view.Search;
    81                         // Bind to the scroll event and throttle
    82                         // the results from this.scroller
    83                         this.window.bind( 'scroll', _.throttle( this.scroller, 300 ) );
     80                        this.loadMoreThemes = this.loadMoreThemes.bind( this );
     81                        this.loadMore.bind( 'click', this.loadMoreThemes );
    8482                },
    8583
    8684                // Main render control
     
    122120                                .append( view.el );
    123121                },
    124122
    125                 // Checks when the user gets close to the bottom
    126                 // of the mage and triggers a theme:scroll event
    127                 scroller: function() {
    128                         var self = this,
    129                                 bottom, threshold;
    130 
    131                         bottom = this.window.scrollTop() + self.window.height();
    132                         threshold = self.$el.offset().top + self.$el.outerHeight( false ) - self.window.height();
    133                         threshold = Math.round( threshold * 0.9 );
    134 
    135                         if ( bottom > threshold ) {
    136                                 this.trigger( 'theme:scroll' );
    137                         }
    138                 }
     123                // Trigger loading additional themes
     124                loadMoreThemes: function () {
     125                        this.trigger( 'theme:loadMore' );
     126                },
    139127        });
    140128
    141129        // Set up the Collection for our theme data
     
    305293                                                // Add the new themes to the current collection
    306294                                                // @todo update counter
    307295                                                self.add( data.themes );
     296
     297                                                self.trigger( 'themes:rerender' );
     298
    308299                                                self.trigger( 'query:success', data.info.results );
    309300
    310301                                                // We are done loading themes for now.
     
    10361027                                $( 'body' ).addClass( 'no-results' );
    10371028                        });
    10381029
    1039                         this.listenTo( this.parent, 'theme:scroll', function() {
     1030                        this.listenTo( this.parent, 'theme:loadMore', function() {
    10401031                                self.renderThemes( self.parent.page );
    10411032                        });
    10421033
     1034                        this.listenTo( self.collection, 'themes:rerender', function() {
     1035                                self.renderThemes( self.parent.page );
     1036                        });
     1037
    10431038                        this.listenTo( this.parent, 'theme:close', function() {
    10441039                                if ( self.overlay ) {
    10451040                                        self.overlay.closeOverlay();
     
    13831378                                self.collection.query( self.collection.currentQuery.request );
    13841379                        });
    13851380
    1386                         this.listenTo( this.collection, 'query:success', function() {
     1381                        this.listenTo( this.collection, 'query:success', function( count ) {
    13871382                                $( 'body' ).removeClass( 'loading-content' );
    13881383                                $( '.theme-browser' ).find( 'div.error' ).remove();
     1384
     1385                                // If we've loaded another page, set focus to the first of the new themes.
     1386                                if ( self.page > 1 ) {
     1387                                        var nextTheme = 1 + ( ( self.page - 1 ) * themes.data.settings.postsPerPage );
     1388                                        this.$el.find( '.theme:nth-child(' + nextTheme + ')' ).focus();
     1389                                }
     1390
     1391                                if ( ! _.isNumber( count ) ) {
     1392                                        count = self.collection.count;
     1393                                }
     1394                                // Hide the load more button when all themes matching this
     1395                                // collection query are on the page.
     1396                                if ( count <= self.collection.length ) {
     1397                                        self.loadMore.hide();
     1398                                } else {
     1399                                        self.loadMore.show();
     1400                                }
    13891401                        });
    13901402
    13911403                        this.listenTo( this.collection, 'query:fail', function() {