Fix Bug 38665 - Show clean 'x' icon on the search box only when useful

Change-Id: I3fc295728f25cce7a326101467146f8ee3415116

UniversalLanguageSelector.hooks.php

@@ -108,11 +108,11 @@ class UniversalLanguageSelectorHooks {
 					<div class='ten columns'>
 						<div id='search-input-block'>
 							<input type='text' class='filterinput' id='filtersuggestion' disabled='true' autocomplete='off' role='textbox'  bound='true'/>
-							<input type='text' class='filterinput' data-suggestion='filtersuggestion' id='languagefilter' placeholder='Language search' bound='true'/>
+							<input type='text' class='filterinput' data-clear='languagefilter-clear' data-suggestion='filtersuggestion' id='languagefilter' placeholder='Language search' bound='true'/>
 						</div>
 					</div>
 					<div class='one column'>
-						<span class='clear-button'></span>
+						<span id='languagefilter-clear'></span>
 					</div>
 				</div>
 			<div class='row uls-language-list'></div>

examples/index.html

@@ -95,11 +95,11 @@
 						<div  class="ten columns">
 							<div id="search-input-block">
 								<input type="text" class="filterinput" id="filtersuggestion" disabled="true" autocomplete="off"/>
-								<input type="text" class="filterinput" id="languagefilter" data-suggestion="filtersuggestion" placeholder="Language search" autocomplete="off"/>
+								<input type="text" class="filterinput" id="languagefilter" data-clear='languagefilter-clear' data-suggestion="filtersuggestion" placeholder="Language search" autocomplete="off"/>
 							</div>
 						</div>
 						<div class="one column">
-							<span class="clear-button"></span>
+							<span id="languagefilter-clear"></span>
 						</div>
 					</div>
 				</div>

resources/css/ext.uls.css

@@ -144,7 +144,7 @@ input:focus#languagefilter {
 	display: inline-block;
 	float: right;
 }
-span.clear-button {
+span#languagefilter-clear {
 	/* @embed */
 	background: url('../images/clear.png') no-repeat scroll left center transparent;
 	cursor: pointer;

resources/ext.uls.core.js

@@ -123,15 +123,11 @@
 				languages: that.languages,
 				success: function() {
 					// clear the search field.
-					that.$languageFilter.val( '' );
+					that.$languageFilter.languagefilter( 'clear' );
 					that.success();
 				}
 			} );
 
-			$( '.clear-button' ).on( 'click', function() {
-				// go to the ready state.
-				that.ready();
-			} );
 		},
 
 		keyup: function( e ) {

resources/ext.uls.languagefilter.js

@@ -32,6 +32,7 @@
 		this.$element.addClass( 'languagefilter' );
 		this.resultCount = 0;
 		this.$suggestion = $( '#' + this.$element.data( 'suggestion' ) );
+		this.$clear = $( '#'+ this.$element.data( 'clear' ) );
 		this.listen();
 	};
 
@@ -51,6 +52,10 @@
 			if ( $.browser.webkit || $.browser.msie ) {
 				this.$element.on( 'keydown', $.proxy( this.keyup, this ) );
 			}
+			if ( this.$clear.length ) {
+				this.$clear.on( 'click' , $.proxy( this.clear, this ) );
+			}
+			this.toggleClear();
 		},
 
 		keyup: function( e ) {
@@ -70,6 +75,23 @@
 						that.options.$target.empty();
 						that.search();
 					}, 500 );
+					this.toggleClear();
+			}
+		},
+
+		clear: function() {
+			this.$element.val( '' );
+			this.$element.focus();
+			this.toggleClear();
+			this.search();
+		},
+
+		toggleClear: function() {
+			if ( !this.$clear.length ) return;
+			if ( this.$element.val() ) {
+				this.$clear.show();
+			} else {
+				this.$clear.hide();
 			}
 		},