WordPress.org

Making WordPress.org

Ticket #5153: 5153.diff

File 5153.diff, 4.3 KB (added by dingo_d, 12 months ago)

Added a patch for load more functionality

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

    diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-themes/css/components/_main.scss wordpress.org/public_html/wp-content/themes/pub/wporg-themes/css/components/_main.scss
    index 032595b7d..db8bc4c97 100644
    ul, ol { 
    166166        opacity: 1;
    167167}
    168168
     169.theme-load-more {
     170                text-align: center;
     171}
     172
    169173// Theme Widget area in the themes screen.
    170174.theme-widget-area {
    171175  background-color: #fff;
  • wordpress.org/public_html/wp-content/themes/pub/wporg-themes/index.php

    diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-themes/index.php wordpress.org/public_html/wp-content/themes/pub/wporg-themes/index.php
    index a390a9a9d..5ea591904 100644
    get_header(); 
    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() ) { ?>
    get_header(); 
    9089                        <?php /* TODO: Don't display this for no-js queries where $wp_query->post_count > 0, but JS needs it too. */ ?>
    9190                        <p class="no-themes"><?php _e( 'No themes found. Try a different search.', 'wporg-themes' ); ?></p>
    9291                </div>
     92                <div class="theme-load-more">
     93                        <button class="button button-primary button-large js-load-more-themes"><?php esc_html_e( 'Load more themes', 'wporg-themes' ); ?></button>
     94                </div>
    9395                <div class="theme-install-overlay"></div>
    9496                <div class="theme-overlay"></div>
    9597                <span class="spinner"></span>
  • wordpress.org/public_html/wp-content/themes/pub/wporg-themes/js/theme.js

    diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-themes/js/theme.js wordpress.org/public_html/wp-content/themes/pub/wporg-themes/js/theme.js
    index fa4dada5a..73f55923a 100644
    window.wp = window.wp || {}; 
    7474
    7575                // Sets up a throttler for binding to 'scroll'
    7676                initialize: function( options ) {
    77                         // Scroller checks how far the scroll position is
    78                         _.bindAll( this, 'scroller' );
     77                        _.bindAll( this, 'loadMoreThemes' );
    7978
    8079                        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
     81                        $('.js-load-more-themes').bind( 'click', this.loadMoreThemes );
    8482                },
    8583
    8684                // Main render control
    window.wp = window.wp || {}; 
    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
    window.wp = window.wp || {}; 
    10361024                                $( 'body' ).addClass( 'no-results' );
    10371025                        });
    10381026
    1039                         this.listenTo( this.parent, 'theme:scroll', function() {
     1027                        this.listenTo( this.parent, 'theme:loadMore', function() {
    10401028                                self.renderThemes( self.parent.page );
    10411029                        });
    10421030