Changeset 1241

Timestamp:

02/10/2015 05:56:28 PM (10 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;
 }