From 5703f0f1ad318fd0cd07b4e92a2c0f3439c8fce1 Mon Sep 17 00:00:00 2001
From: Santhosh Thottingal <santhosh.thottingal@gmail.com>
Date: Wed, 25 Jul 2012 18:13:50 +0530
Subject: [PATCH] Fix Bug 38665 - Show clean 'x' icon on the search box only
 when useful

Change-Id: I3fc295728f25cce7a326101467146f8ee3415116
---
 UniversalLanguageSelector.hooks.php |  4 ++--
 examples/index.html                 |  4 ++--
 resources/css/ext.uls.css           |  2 +-
 resources/ext.uls.core.js           |  6 +-----
 resources/ext.uls.languagefilter.js | 22 ++++++++++++++++++++++
 5 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/UniversalLanguageSelector.hooks.php b/UniversalLanguageSelector.hooks.php
index 0727df47..fc57bdf4 100644
--- a/UniversalLanguageSelector.hooks.php
+++ b/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>
diff --git a/examples/index.html b/examples/index.html
index 5f0db596..d619f55f 100644
--- a/examples/index.html
+++ b/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>
diff --git a/resources/css/ext.uls.css b/resources/css/ext.uls.css
index fe6c9742..ca6aa729 100644
--- a/resources/css/ext.uls.css
+++ b/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;
diff --git a/resources/ext.uls.core.js b/resources/ext.uls.core.js
index a07604a6..82035abc 100644
--- a/resources/ext.uls.core.js
+++ b/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 ) {
diff --git a/resources/ext.uls.languagefilter.js b/resources/ext.uls.languagefilter.js
index 1a1cfe69..f375c1f1 100644
--- a/resources/ext.uls.languagefilter.js
+++ b/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();
 			}
 		},