Changeset 1247

Timestamp:

02/10/2015 09:23:38 PM (10 years ago)

Author:

obenland

Message:

WP.org Themes: Disable "Apply Filters"-button by default.

Avoids submitting an empty tag request and improves general usability.

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) (1 diff)

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

@@ -37 +37 @@
             <div class="filter-drawer">
                 <div class="buttons">
-                    <a class="apply-filters button button-secondary" href="#"><?php _e( 'Apply Filters' ); ?><span></span></a>
-                    <a class="clear-filters button button-secondary" href="#"><?php _e( 'Clear' ); ?></a>
+                    <button type="button" disabled="disabled" class="apply-filters button button-secondary"><?php _e( 'Apply Filters' ); ?><span></span></button>
+                    <button type="button" class="clear-filters button button-secondary"><?php _e( 'Clear' ); ?></button>
                 </div>
 

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

@@ -54 +54 @@
 
             $( 'body' ).toggleClass( 'show-filters' );
-        }
+        },
+
+        // Get the checked filters.
+        // @return {array} of tags or false.
+        filtersChecked: function() {
+            var items  = $( '.filter-group' ).find( ':checkbox' ).filter( ':checked' ),
+                drawer = $( '.filter-drawer' ),
+                tags   = [];
+
+            _.each( items, function( item ) {
+                tags.push( $( item ).prop( 'value' ) );
+            });
+
+            // When no filters are checked, restore initial state and return.
+            if ( 0 === tags.length ) {
+                drawer.find( '.apply-filters' ).prop( 'disabled', true ).find( 'span' ).text( '' );
+                drawer.find( '.clear-filters' ).hide();
+                $( 'body' ).removeClass( 'filters-applied' );
+                return false;
+            }
+
+            drawer.find( '.apply-filters' ).prop( 'disabled', false ).find( 'span' ).text( tags.length );
+            drawer.find( '.clear-filters' ).css( 'display', 'inline-block' );
+
+            return tags;
+        },
 
     });