Changeset 27650

Timestamp:

03/21/2014 09:12:32 PM (12 years ago)

Author:

ocean90

Message:

Widget Customizer: Improve widget search.

• Removes jQuery.liveFilter dependency
• Filters widget collection directly
• Widget's name, ID and description will be searched

fixes #27451.

Location:

trunk/src/wp-admin

Files:

• css/customize-widgets.css (modified) (1 diff)
• js/customize-widgets.js (modified) (6 diffs)

trunk/src/wp-admin/css/customize-widgets.css

@@ -388 +388 @@
         border-bottom: 1px solid #e4e4e4;
         cursor: pointer;
+        display: none;
 }
 

trunk/src/wp-admin/js/customize-widgets.js

@@ -62 +62 @@
 
         WidgetCollection = self.WidgetCollection = Backbone.Collection.extend( {
-                model: Widget
+                model: Widget,
+
+                // Controls searching on the current widget collection
+                // and triggers an update event
+                doSearch: function( value ) {
+
+                        // Don't do anything if we've already done this search
+                        // Useful because the search handler fires multiple times per keystroke
+                        if ( this.terms === value ) {
+                                return;
+                        }
+
+                        // Updates terms with the value passed
+                        this.terms = value;
+
+                        // If we have terms, run a search...
+                        if ( this.terms.length > 0 ) {
+                                this.search( this.terms );
+                        }
+
+                        // If search is blank, show all themes
+                        // Useful for resetting the views when you clean the input
+                        if ( this.terms === '' ) {
+                                this.reset( WidgetCustomizer_exports.available_widgets );
+                        }
+
+                        // Trigger an 'update' event
+                        this.trigger( 'update' );
+                },
+
+                // Performs a search within the collection
+                // @uses RegExp
+                search: function( term ) {
+                        var match, results, haystack;
+
+                        // Start with a full collection
+                        this.reset( WidgetCustomizer_exports.available_widgets, { silent: true } );
+
+                        // Escape the term string for RegExp meta characters
+                        term = term.replace( /[-\/\\^$*+?.()|[\]{}]/g, '\\$&' );
+
+                        // Consider spaces as word delimiters and match the whole string
+                        // so matching terms can be combined
+                        term = term.replace( / /g, ')(?=.*' );
+                        match = new RegExp( '^(?=.*' + term + ').+', 'i' );
+
+                        results = this.filter( function( data ) {
+                                haystack = _.union( data.get( 'name' ), data.get( 'id' ), data.get( 'description' ) );
+
+                                return match.test( haystack );
+                        });
+
+                        this.reset( results );
+                }
         } );
         self.available_widgets = new WidgetCollection( self.available_widgets );
@@ -1553 +1606 @@
                  */
                 setup: function () {
-                        var panel = this, update_available_widgets_list;
+                        var panel = this;
 
                         panel.container = $( '#available-widgets' );
                         panel.filter_input = $( '#available-widgets-filter' ).find( 'input' );
 
-                        update_available_widgets_list = function () {
-                                self.available_widgets.each( function ( widget ) {
-                                        var widget_tpl = $( '#widget-tpl-' + widget.id );
-                                        widget_tpl.toggle( ! widget.get( 'is_disabled' ) );
-                                        if ( widget.get( 'is_disabled' ) && widget_tpl.is( panel.selected_widget_tpl ) ) {
-                                                panel.selected_widget_tpl = null;
-                                        }
-                                } );
-                        };
-
-                        self.available_widgets.on( 'change', update_available_widgets_list );
-                        update_available_widgets_list();
+                        self.available_widgets.on( 'change update', panel.update_available_widgets_list );
+                        panel.update_available_widgets_list();
 
                         // If the available widgets panel is open and the customize controls are
@@ -1597 +1640 @@
                         } );
 
-                        panel.container.liveFilter(
-                                '#available-widgets-filter input',
-                                '.widget-tpl',
-                                {
-                                        filterChildSelector: '.widget-title h4',
-                                        after: function () {
-                                                var filter_val = panel.filter_input.val(),
-                                                        first_visible_widget;
-
-                                                // Remove a widget from being selected if it is no longer visible
-                                                if ( panel.selected_widget_tpl && ! panel.selected_widget_tpl.is( ':visible' ) ) {
-                                                        panel.selected_widget_tpl.removeClass( 'selected' );
-                                                        panel.selected_widget_tpl = null;
-                                                }
-
-                                                // If a widget was selected but the filter value has been cleared out, clear selection
-                                                if ( panel.selected_widget_tpl && ! filter_val ) {
-                                                        panel.selected_widget_tpl.removeClass( 'selected' );
-                                                        panel.selected_widget_tpl = null;
-                                                }
-
-                                                // If a filter has been entered and a widget hasn't been selected, select the first one shown
-                                                if ( ! panel.selected_widget_tpl && filter_val ) {
-                                                        first_visible_widget = panel.container.find( '> .widget-tpl:visible:first' );
-                                                        if ( first_visible_widget.length ) {
-                                                                panel.select( first_visible_widget );
-                                                        }
-                                                }
-
+                        panel.filter_input.on( 'input keyup change', function( event ) {
+                                var first_visible_widget;
+
+                                self.available_widgets.doSearch( event.target.value );
+
+                                // Remove a widget from being selected if it is no longer visible
+                                if ( panel.selected_widget_tpl && ! panel.selected_widget_tpl.is( ':visible' ) ) {
+                                        panel.selected_widget_tpl.removeClass( 'selected' );
+                                        panel.selected_widget_tpl = null;
+                                }
+
+                                // If a widget was selected but the filter value has been cleared out, clear selection
+                                if ( panel.selected_widget_tpl && ! event.target.value ) {
+                                        panel.selected_widget_tpl.removeClass( 'selected' );
+                                        panel.selected_widget_tpl = null;
+                                }
+
+                                // If a filter has been entered and a widget hasn't been selected, select the first one shown
+                                if ( ! panel.selected_widget_tpl &&  event.target.value ) {
+                                        first_visible_widget = panel.container.find( '> .widget-tpl:visible:first' );
+                                        if ( first_visible_widget.length ) {
+                                                panel.select( first_visible_widget );
                                         }
                                 }
-                        );
+                        } );
 
                         // Select a widget when it is focused on
@@ -1682 +1718 @@
 
                 /**
+                 * Updates widgets list.
+                 */
+                update_available_widgets_list: function() {
+                        var panel = self.availableWidgetsPanel;
+
+                        // First hide all widgets...
+                        panel.container.find( '.widget-tpl' ).hide();
+
+                        // ..and then show only available widgets which could be filtered
+                        self.available_widgets.each( function ( widget ) {
+                                var widget_tpl = $( '#widget-tpl-' + widget.id );
+                                widget_tpl.toggle( ! widget.get( 'is_disabled' ) );
+                                if ( widget.get( 'is_disabled' ) && widget_tpl.is( panel.selected_widget_tpl ) ) {
+                                        panel.selected_widget_tpl = null;
+                                }
+                        } );
+                },
+
+                /**
                  * @param widget_tpl
                  */
@@ -1726 +1781 @@
                         $( 'body' ).addClass( 'adding-widget' );
                         panel.container.find( '.widget-tpl' ).removeClass( 'selected' );
+                        self.available_widgets.doSearch( '' );
                         panel.filter_input.focus();
                 },
@@ -1781 +1837 @@
         return self;
 }( jQuery ));
-
-/* @todo remove this dependency */
-/*
- * jQuery.liveFilter
- *
- * Copyright (c) 2009 Mike Merritt
- *
- * Forked by Lim Chee Aun (cheeaun.com)
- *
- */
-
-(function($){
-        $.fn.liveFilter = function(inputEl, filterEl, options){
-                var el, filter, defaults = {
-                        filterChildSelector: null,
-                        filter: function(el, val){
-                                return $(el).text().toUpperCase().indexOf(val.toUpperCase()) >= 0;
-                        },
-                        before: function(){},
-                        after: function(){}
-                };
-                options = $.extend(defaults, options);
-
-                el = $(this).find(filterEl);
-                if (options.filterChildSelector) {
-                        el = el.find(options.filterChildSelector);
-                }
-
-                filter = options.filter;
-                $(inputEl).keyup(function(){
-                        var val = $(this).val(), contains, containsNot;
-
-                        contains = el.filter(function(){
-                                return filter(this, val);
-                        });
-                        containsNot = el.not(contains);
-                        if (options.filterChildSelector){
-                                contains = contains.parents(filterEl);
-                                containsNot = containsNot.parents(filterEl).hide();
-                        }
-
-                        options.before.call(this, contains, containsNot);
-
-                        contains.show();
-                        containsNot.hide();
-
-                        if (val === '') {
-                                contains.show();
-                                containsNot.show();
-                        }
-
-                        options.after.call(this, contains, containsNot);
-                });
-        };
-})(jQuery);