Ticket #4814: 4814.diff

wordpress.org/public_html/wp-content/plugins/theme-directory/query-modifications.php

@@ -18 +18 @@
         }
 
         // Default to the ~featured~ popular view
-        if ( empty( $query->query ) ) {
+        if ( empty( $query->query_vars['browse'] ) ) {
                 $query->query_vars['browse'] = 'popular';
         }
 
@@ -38 +38 @@
                 $query->query_vars['post_status'] = 'publish';
         }
 
+        // We always want there to be a paged variable to match the front end
+        if( empty( $query->query_vars['paged'] ) ) {
+                $query->query_vars['paged'] = 1;
+        }
+
         switch ( $query->query_vars['browse'] ) {
                 case 'new':
                         $query->query_vars['orderby'] = 'post_date';

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

@@ -586 +586 @@
         margin: 100px 0 150px;
 }
 
+.viewing-paged-alert {
+        display: none;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 16px;
+        margin: 0 0 20px 0;
+        background: #fef8e7;
+        border: 1px solid #f0b849;
+
+        p {
+                margin: 0;
+                font-size: 14px;
+        }
+}
+
+.viewing-paged-alert.is-hidden {
+        display: none;
+}
 
 /* Ratings */
 .rating {

wordpress.org/public_html/wp-content/themes/pub/wporg-themes/functions.php

@@ -50 +50 @@
         }
 
         // We don't support pagination on the directory at present.
-        if ( get_query_var( 'paged' ) ) {
-                $url = remove_query_arg( 'paged' );
-                $url = preg_replace( '!page/\d+!i', '', $url );
+        // if ( get_query_var( 'paged' ) ) {
+        //      $url = remove_query_arg( 'paged' );
+        //      $url = preg_replace( '!page/\d+!i', '', $url );
 
-                // Remove any double slashes
-                $url = preg_replace( '!/{2,}!', '/', $url );
+        //      // Remove any double slashes
+        //      $url = preg_replace( '!/{2,}!', '/', $url );
 
-                wp_safe_redirect( $url ); // Not 301, as paginated requests will one day be supported hopefully.
-                die();
-        }
+        //      wp_safe_redirect( $url ); // Not 301, as paginated requests will one day be supported hopefully.
+        //      die();
+        // }
 
         // Uppercase characters in URLs tend to lead to broken JS pages.
         // Redirect all paths to the lower-case variant, excluding searches..

wordpress.org/public_html/wp-content/themes/pub/wporg-themes/index.php

@@ -60 +60 @@
                         </div>
                 </div><!-- .wp-filter -->
 
+                <div id="viewing-paged-alert" class="viewing-paged-alert is-hidden">
+                        <p><?php _e( 'You are currently viewing a subset.', 'wporg-themes' ); ?></p>
+                        <button class="button button-primary" id="view-page-list-clear-btn">
+                                <?php _e( 'View All', 'wporg-themes' ); ?>
+                        </button>
+                </div>
+
                 <div class="theme-browser content-filterable">
                         <div class="themes">
                                 <?php

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

@@ -242 +242 @@
                         return collection;
                 },
 
+                // Binds event that removes paging and reload the page
+                bindFilteredAlertBtn: function( isPagedView ) {
+                        if( ! isPagedView ) {
+                                return;
+                        }
+
+                        $( '#view-page-list-clear-btn' ).click( function() {
+                                var urlSplitAtPage = Backbone.history.getFragment().split( 'page/' );
+                                var navigateTo = urlSplitAtPage && urlSplitAtPage[0];
+
+                                // If anything goes wrong, go back to root.
+                                if( ! navigateTo || ! navigateTo.length ) {
+                                        navigateTo = themes.router.baseUrl( '/' );
+                                }
+
+                                //If urlSplitAtPage is undefined, it will restart at the root
+                                themes.router.navigate( navigateTo );
+                                window.location.reload();
+                        } );
+                },
+
+                // Show/hides message that alerts user they are on a page
+                showFilteredAlert: function( isPagedView ) {
+                        $( '#viewing-paged-alert' ).toggleClass( 'is-hidden', ! isPagedView );
+                        
+                        this.bindFilteredAlertBtn( isPagedView );
+                },
+
+                // Always reset the themes array when we move contexts
+                resetOnNextQuery: function() {
+                        this.currentQuery.page = 1;
+                },
+
+                shouldResetThemes: function() {
+                        return this.currentQuery.page === 1;
+                },
+
                 // Handles requests for more themes
                 // and caches results
                 //
@@ -275 +312 @@
                         }
 
                         // Otherwise, send a new API call and add it to the cache.
-                        if ( ! query && ! isPaginated ) {
-                                query = this.apiCall( request ).done( function( data ) {
+                        if ( ! query ) {
+                                query = this.apiCall( request, isPaginated ).done( function( data ) {
 
                                         // Update the collection with the queried data.
                                         if ( data.themes ) {
+
+                                                if( ! self.length || self.shouldResetThemes() ) {
                                                         self.reset( data.themes );
+                                                        self.trigger( 'themes:update' );
+                                                } else {
+                                                        self.add( data.themes );
+                                                }
+
                                                 count = data.info.results;
+
+                                                // Because we store the request, we should create a new instance
+                                                var newReq =  JSON.parse(JSON.stringify(request));
+
                                                 // Store the results and the query request
-                                                queries.push( { themes: data.themes, request: request, total: count } );
+                                                queries.push( { themes: data.themes, request: newReq, total: count } );
                                         }
 
                                         // Trigger a collection refresh event
                                         // and a `query:success` event with a `count` argument.
-                                        self.trigger( 'themes:update' );
                                         self.trigger( 'query:success', count );
 
                                         if ( data.themes && data.themes.length === 0 ) {
                                                 self.trigger( 'query:empty' );
-                                        }
-
-                                }).fail( function() {
-                                        self.trigger( 'query:fail' );
-                                });
                                         } else {
-                                // If it's a paginated request we need to fetch more themes...
-                                if ( isPaginated ) {
-                                        return this.apiCall( request, isPaginated ).done( function( data ) {
-                                                // Add the new themes to the current collection
-                                                // @todo update counter
-                                                self.add( data.themes );
-                                                self.trigger( 'query:success', data.info.results );
+                                                $( 'body' ).removeClass( 'no-results' );
+                                        }
 
                                         // We are done loading themes for now.
                                         self.loadingThemes = false;
@@ -313 +350 @@
                                 }).fail( function() {
                                         self.trigger( 'query:fail' );
                                 });
-                                }
+                        } else {
 
                                 if ( query.themes.length === 0 ) {
-                                        self.trigger( 'query:empty' );
+                                        this.trigger( 'query:empty' );
                                 } else {
                                         $( 'body' ).removeClass( 'no-results' );
                                 }
 
+                                // We are done loading themes for now.
+                                this.loadingThemes = false;
+
                                 // Only trigger an update event since we already have the themes
                                 // on our cached object
                                 if ( _.isNumber( query.total ) ) {
                                         this.count = query.total;
                                 }
-
+                                if( this.shouldResetThemes() ) {
                                         this.reset( query.themes );
+                                } else {
+                                        this.add( query.themes );
+                                }
+
                                 if ( ! query.total ) {
                                         this.count = this.length;
                                 }
@@ -1305 +1349 @@
                         $( '.filter-links li > a.current' ).removeClass( 'current' );
                         $( 'body' ).removeClass( 'show-filters filters-applied' );
 
+                        // Paging no longer exists, hide message
+                        this.collection.showFilteredAlert( false );
+
                         // Set route
                         if ( value ) {
                                 themes.utils.title( value, 'search' );
@@ -1424 +1471 @@
                                         user: themes.data.settings.favorites.user
                                 } );
                         } else {
-                                this.collection.query( { browse: section } );
+                                this.collection.query( { 
+                                        browse: section,
+                                        page: this.view.collection.currentQuery.page
+                                } );
                         }
                 },
 
@@ -1433 +1483 @@
                         var $el = $( event.target ),
                                 sort = $el.data( 'sort' );
 
+                        // We need to set this to tell the apiCall that we should clear the themes array
+                        this.view.collection.resetOnNextQuery();
+
+                        // We automatically remove the paging on sort, so hide the alert
+                        this.view.collection.showFilteredAlert( false );
+
                         event.preventDefault();
 
                         $( 'body' ).removeClass( 'filters-applied show-filters' );
@@ -1546 +1602 @@
                         themes.router.navigate( themes.router.baseUrl( 'tags/' + tags.join( '+' ) ) );
                         themes.utils.title( names[0], 'tags' );
 
+                        // Paging is gone.
+                        this.collection.showFilteredAlert( false );
+
                         // Get the themes by sending Ajax POST request to api.wordpress.org/themes
                         // or searching the local cache
                         this.collection.query( request );
@@ -1629 +1688 @@
                         'search/:query(/page/:page)(/)'  : 'search',
                         'author/:author(/page/:page)(/)' : 'author',
                         ':slug(/)'                       : 'preview',
+                        'page/:page(/)'                  : 'rootWithPaging',
                         ''                               : 'sort'
                 },
 
@@ -1701 +1761 @@
                                 self.view.view.expand( slug );
                         });
 
-                        // Handles sorting / browsing routes
-                        // Also handles the root URL triggering a sort request
-                        // for `featured`, the default view
-                        themes.router.on( 'route:sort', function( sort, page ) {
+                        function onLoadSort( sort, page ) {
                                 if ( page ) {
-                                        themes.router.navigate( 'browse/' + sort + '/', { replace: true } );
+                                        self.view.collection.currentQuery.page = +page;
+                                        self.view.collection.showFilteredAlert( true );
                                 }
                                 
                                 self.view.collection.queries.push( themes.data.query );
@@ -1716 +1774 @@
                                 }
                                 self.view.sort( sort );
                                 self.view.trigger( 'theme:close' );
+                        }
+
+                        // Handles sorting / browsing routes
+                        // Also handles the root URL triggering a sort request
+                        // for `featured`, the default view
+                        themes.router.on( 'route:sort', onLoadSort );
+
+                        themes.router.on( 'route:rootWithPaging', function( page ) {
+                                onLoadSort.call( this, undefined, page );
                         });
 
                         // The `search` route event. The router populates the input field.