bryce/mediawiki-extensions-UniversalLanguageSelector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Change-Id: I3fc295728f25cce7a326101467146f8ee3415116
This commit is contained in:
Santhosh Thottingal
2012-07-25 18:13:50 +05:30
parent 388f9cde80
commit 5703f0f1ad
5 changed files with 28 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
UniversalLanguageSelector.hooks.php
View File

@@ -108,11 +108,11 @@ class UniversalLanguageSelectorHooks {
<div class='ten columns'> <div class='ten columns'>
<div id='search-input-block'> <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' 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> </div>
<div class='one column'> <div class='one column'>
<span class='clear-button'></span> <span id='languagefilter-clear'></span>
</div> </div>
</div> </div>
<div class='row uls-language-list'></div> <div class='row uls-language-list'></div>

4
examples/index.html
View File

@@ -95,11 +95,11 @@
<div class="ten columns"> <div class="ten columns">
<div id="search-input-block"> <div id="search-input-block">
<input type="text" class="filterinput" id="filtersuggestion" disabled="true" autocomplete="off"/> <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> </div>
<div class="one column"> <div class="one column">
<span class="clear-button"></span> <span id="languagefilter-clear"></span>
</div> </div>
</div> </div>
</div> </div>

2
resources/css/ext.uls.css
View File

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

6
resources/ext.uls.core.js
View File

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

22
resources/ext.uls.languagefilter.js
View File

@@ -32,6 +32,7 @@
this.$element.addClass( 'languagefilter' ); this.$element.addClass( 'languagefilter' );
this.resultCount = 0; this.resultCount = 0;
this.$suggestion = $( '#' + this.$element.data( 'suggestion' ) ); this.$suggestion = $( '#' + this.$element.data( 'suggestion' ) );
this.$clear = $( '#'+ this.$element.data( 'clear' ) );
this.listen(); this.listen();
}; };
@@ -51,6 +52,10 @@
if ( $.browser.webkit || $.browser.msie ) { if ( $.browser.webkit || $.browser.msie ) {
this.$element.on( 'keydown', $.proxy( this.keyup, this ) ); 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 ) { keyup: function( e ) {
@@ -70,6 +75,23 @@
that.options.$target.empty(); that.options.$target.empty();
that.search(); that.search();
}, 500 ); }, 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();
} }
}, },