<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[27650] trunk/src/wp-admin: Widget Customizer: Improve widget search.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://core.trac.wordpress.org/changeset/27650">27650</a></dd>
<dt>Author</dt> <dd>ocean90</dd>
<dt>Date</dt> <dd>2014-03-21 21:12:32 +0000 (Fri, 21 Mar 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>Widget Customizer: Improve widget search.
* Removes jQuery.liveFilter dependency
* Filters widget collection directly
* Widget's name, ID and description will be searched
fixes <a href="http://core.trac.wordpress.org/ticket/27451">#27451</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadmincsscustomizewidgetscss">trunk/src/wp-admin/css/customize-widgets.css</a></li>
<li><a href="#trunksrcwpadminjscustomizewidgetsjs">trunk/src/wp-admin/js/customize-widgets.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadmincsscustomizewidgetscss"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/css/customize-widgets.css (27649 => 27650)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/css/customize-widgets.css 2014-03-21 21:03:59 UTC (rev 27649)
+++ trunk/src/wp-admin/css/customize-widgets.css 2014-03-21 21:12:32 UTC (rev 27650)
</span><span class="lines">@@ -387,6 +387,7 @@
</span><span class="cx"> padding: 20px 15px 20px 60px;
</span><span class="cx"> border-bottom: 1px solid #e4e4e4;
</span><span class="cx"> cursor: pointer;
</span><ins>+ display: none;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #available-widgets .widget-tpl:hover,
</span></span></pre></div>
<a id="trunksrcwpadminjscustomizewidgetsjs"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/js/customize-widgets.js (27649 => 27650)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/js/customize-widgets.js 2014-03-21 21:03:59 UTC (rev 27649)
+++ trunk/src/wp-admin/js/customize-widgets.js 2014-03-21 21:12:32 UTC (rev 27650)
</span><span class="lines">@@ -61,7 +61,60 @@
</span><span class="cx"> } );
</span><span class="cx">
</span><span class="cx"> WidgetCollection = self.WidgetCollection = Backbone.Collection.extend( {
</span><del>- model: Widget
</del><ins>+ 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 );
+ }
</ins><span class="cx"> } );
</span><span class="cx"> self.available_widgets = new WidgetCollection( self.available_widgets );
</span><span class="cx">
</span><span class="lines">@@ -1552,24 +1605,14 @@
</span><span class="cx"> * Set up event listeners
</span><span class="cx"> */
</span><span class="cx"> setup: function () {
</span><del>- var panel = this, update_available_widgets_list;
</del><ins>+ var panel = this;
</ins><span class="cx">
</span><span class="cx"> panel.container = $( '#available-widgets' );
</span><span class="cx"> panel.filter_input = $( '#available-widgets-filter' ).find( 'input' );
</span><span class="cx">
</span><del>- 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;
- }
- } );
- };
</del><ins>+ self.available_widgets.on( 'change update', panel.update_available_widgets_list );
+ panel.update_available_widgets_list();
</ins><span class="cx">
</span><del>- self.available_widgets.on( 'change', update_available_widgets_list );
- update_available_widgets_list();
-
</del><span class="cx"> // If the available widgets panel is open and the customize controls are
</span><span class="cx"> // interacted with (i.e. available widgets panel is blurred) then close the
</span><span class="cx"> // available widgets panel.
</span><span class="lines">@@ -1596,38 +1639,31 @@
</span><span class="cx"> panel.submit( this );
</span><span class="cx"> } );
</span><span class="cx">
</span><del>- 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;
</del><ins>+ panel.filter_input.on( 'input keyup change', function( event ) {
+ var first_visible_widget;
</ins><span class="cx">
</span><del>- // 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;
- }
</del><ins>+ self.available_widgets.doSearch( event.target.value );
</ins><span class="cx">
</span><del>- // 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;
- }
</del><ins>+ // 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;
+ }
</ins><span class="cx">
</span><del>- // 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 );
- }
- }
</del><ins>+ // 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;
+ }
</ins><span class="cx">
</span><ins>+ // 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 );
</ins><span class="cx"> }
</span><span class="cx"> }
</span><del>- );
</del><ins>+ } );
</ins><span class="cx">
</span><span class="cx"> // Select a widget when it is focused on
</span><span class="cx"> panel.container.find( ' > .widget-tpl' ).on( 'focus', function () {
</span><span class="lines">@@ -1681,6 +1717,25 @@
</span><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> /**
</span><ins>+ * 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;
+ }
+ } );
+ },
+
+ /**
</ins><span class="cx"> * @param widget_tpl
</span><span class="cx"> */
</span><span class="cx"> select: function ( widget_tpl ) {
</span><span class="lines">@@ -1725,6 +1780,7 @@
</span><span class="cx">
</span><span class="cx"> $( 'body' ).addClass( 'adding-widget' );
</span><span class="cx"> panel.container.find( '.widget-tpl' ).removeClass( 'selected' );
</span><ins>+ self.available_widgets.doSearch( '' );
</ins><span class="cx"> panel.filter_input.focus();
</span><span class="cx"> },
</span><span class="cx">
</span><span class="lines">@@ -1780,58 +1836,3 @@
</span><span class="cx">
</span><span class="cx"> return self;
</span><span class="cx"> }( jQuery ));
</span><del>-
-/* @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);
</del></span></pre>
</div>
</div>
</body>
</html>