Changeset 1241

Timestamp:

02/10/2015 05:56:28 PM (12 years ago)

Author:

obenland

Message:

WP.org Themes: Make tag URLs persistent.

Now users can pass around a tag url and the directory will filter themes based
on that url on first load. Adding and removing filters will also update the url
once they are applied.

See #745.

Location:

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes

Files:

• index.php (modified) (1 diff)
• js/theme.js (modified) (2 diffs)
• style.css (modified) (1 diff)

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

@@ -64 +64 @@
 
                 <div class="theme-browser content-filterable">
-                        <div class="themes" style="display: none;">
+                        <div class="themes">
                                 <?php
                                 if ( ! is_wp_error( $themes ) ) :

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

@@ -8 +8 @@
 
         _.extend( wp.themes.view.Installer.prototype, {
-                el: '#themes'
+                el: '#themes',
+
+                // Applying filters triggers a tag request.
+                applyFilters: function( event ) {
+                        var name,
+                                tags = this.filtersChecked(),
+                                request = { tag: tags },
+                                filteringBy = $( '.filtered-by .tags' );
+
+                        if ( event ) {
+                                event.preventDefault();
+                        }
+
+                        $( 'body' ).addClass( 'filters-applied' );
+                        $( '.filter-links li > a.current' ).removeClass( 'current' );
+                        filteringBy.empty();
+
+                        _.each( tags, function( tag ) {
+                                name = $( 'label[for="filter-id-' + tag + '"]' ).text();
+                                filteringBy.append( '<span class="tag">' + name + '</span>' );
+                        });
+
+                        wp.themes.router.navigate( wp.themes.router.baseUrl( 'tag/' + tags.join( '+' ) ), { replace: true } );
+
+                        // Get the themes by sending Ajax POST request to api.wordpress.org/themes
+                        // or searching the local cache
+                        this.collection.query( request );
+                },
+
+                // Toggle the full filters navigation.
+                moreFilters: function( event ) {
+                        event.preventDefault();
+
+                        if ( $( 'body' ).hasClass( 'filters-applied' ) ) {
+                                return this.backToFilters();
+                        }
+
+                        // If the filters section is opened and filters are checked
+                        // run the relevant query collapsing to filtered-by state
+                        if ( $( 'body' ).hasClass( 'show-filters' ) && this.filtersChecked() ) {
+                                return this.addFilter();
+                        }
+
+                        this.clearSearch();
+
+                        $( 'body' ).toggleClass( 'show-filters' );
+                }
+
         });
 
@@ -402 +449 @@
 
                         wp.themes.router.on( 'route:tag', function( tag ) {
-                                $( '#filter-id-' + tag).prop( 'checked', true );
+                                _.each( tag.split( '+' ), function( tag ) {
+                                        $( '#filter-id-' + tag ).prop( 'checked', true );
+                                });
+                                $( 'body' ).toggleClass( 'show-filters' );
                                 self.view.applyFilters();
                         });

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/style.css

@@ -606 +606 @@
 .wp-filter .button.clear-filters {
         display: none;
-        margin: 0 0 20px 10px;
+        margin: 0 0 0 10px;
 }