9da90921c4
* The jQuery selectors should be referring to the menu for the current ULS instance rather than querying on the page. This allows multiple instances of ULS present in the page * Keep the HTML template with the plugin. No more HTML added from hooks. * Updated the example based on above change. * Updated the hooks code. * Some more documentation. Change-Id: I48e2e167bc2c09b8653a142c50317c22e8ba1362
401 lines
11 KiB
JavaScript
401 lines
11 KiB
JavaScript
/**
|
|
* jQuery language filter plugin.
|
|
*
|
|
* Copyright (C) 2012 Alolita Sharma, Amir Aharoni, Arun Ganesh, Brandon Harris,
|
|
* Niklas Laxström, Pau Giner, Santhosh Thottingal, Siebrand Mazeland and other
|
|
* contributors. See CREDITS for a list.
|
|
*
|
|
* UniversalLanguageSelector is dual licensed GPLv2 or later and MIT. You don't
|
|
* have to do anything special to choose one license or the other and you don't
|
|
* have to notify anyone which license you are using. You are free to use
|
|
* UniversalLanguageSelector in commercial projects as long as the copyright
|
|
* header is left intact. See files GPL-LICENSE and MIT-LICENSE for details.
|
|
*
|
|
* @file
|
|
* @ingroup Extensions
|
|
* @licence GNU General Public Licence 2.0 or later
|
|
* @licence MIT License
|
|
*/
|
|
|
|
/**
|
|
* Usage: $( 'inputbox' ).languagefilter();
|
|
* The values for autocompletion is from the options.languages.
|
|
* The data is in the format of languagecode:languagename.
|
|
*/
|
|
|
|
(function ( $ ) {
|
|
"use strict";
|
|
|
|
var LanguageFilter = function( element, options ) {
|
|
this.$element = $( element );
|
|
this.options = $.extend( {}, $.fn.regionselector.defaults, options );
|
|
this.$element.addClass( 'languagefilter' );
|
|
this.resultCount = 0;
|
|
this.$suggestion = this.$element.parents().find( '#' + this.$element.data( 'suggestion' ) );
|
|
this.$clear = this.$element.parents().find( '#'+ this.$element.data( 'clear' ) );
|
|
this.selectedLanguage = null;
|
|
this.listen();
|
|
};
|
|
|
|
var delay = function() {
|
|
var timer = 0;
|
|
return ( function( callback, milliseconds ) {
|
|
clearTimeout( timer );
|
|
timer = setTimeout( callback, milliseconds );
|
|
} );
|
|
}();
|
|
|
|
LanguageFilter.prototype = {
|
|
|
|
listen: function() {
|
|
this.$element.on( 'keypress', $.proxy( this.keyup, this ) )
|
|
.on( 'keyup', $.proxy( this.keyup, this ) );
|
|
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 ) {
|
|
switch( e.keyCode ) {
|
|
case 9: // Tab -> Autocomplete
|
|
var suggestion = this.$suggestion.val();
|
|
if ( suggestion && suggestion !== this.$element.val() ) {
|
|
this.$element.val( suggestion );
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
break;
|
|
case 13:
|
|
if ( this.options.onSelect && this.selectedLanguage ) {
|
|
this.options.onSelect( this.selectedLanguage );
|
|
}
|
|
break;
|
|
default:
|
|
var that = this;
|
|
this.selectedLanguage = null;
|
|
delay( function() {
|
|
that.options.$target.empty();
|
|
that.search();
|
|
}, 300 );
|
|
this.toggleClear();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Clears the current search removing
|
|
* clear buttons and suggestions.
|
|
*/
|
|
deactivate: function() {
|
|
this.$element.val( '' );
|
|
this.$element.focus();
|
|
this.toggleClear();
|
|
this.autofill();
|
|
},
|
|
|
|
/**
|
|
* Clears the search and shows all languages
|
|
*/
|
|
clear: function() {
|
|
this.deactivate();
|
|
this.search();
|
|
},
|
|
|
|
/**
|
|
* Toggles the visibility of clear icon depending
|
|
* on whether there is anything to clear.
|
|
*/
|
|
toggleClear: function() {
|
|
if ( !this.$clear.length ) {
|
|
return;
|
|
}
|
|
|
|
if ( this.$element.val() ) {
|
|
this.$clear.show();
|
|
} else {
|
|
this.$clear.hide();
|
|
}
|
|
},
|
|
|
|
search: function() {
|
|
var query = $.trim( this.$element.val() ),
|
|
languages = $.uls.data.languagesByScriptGroup( this.options.languages ),
|
|
scriptGroup, langNum, langCode;
|
|
this.resultCount = 0;
|
|
for ( scriptGroup in languages ) {
|
|
var languagesInScript = languages[scriptGroup];
|
|
languagesInScript.sort( $.uls.data.sortByAutonym );
|
|
for ( langNum = 0; langNum < languagesInScript.length; langNum++ ) {
|
|
langCode = languagesInScript[langNum];
|
|
if ( query === "" || this.filter( langCode, query ) ) {
|
|
if ( this.resultCount === 0 ) {
|
|
// Autofill the first result.
|
|
this.autofill( langCode );
|
|
}
|
|
if ( query === langCode ) {
|
|
this.selectedLanguage = langCode;
|
|
}
|
|
this.render( langCode );
|
|
this.resultCount++;
|
|
}
|
|
}
|
|
}
|
|
// Also do a search by search API
|
|
if( !this.resultCount && this.options.searchAPI && query ) {
|
|
this.searchAPI( query );
|
|
} else {
|
|
this.resultHandler( query );
|
|
}
|
|
},
|
|
|
|
searchAPI: function( query ) {
|
|
var that = this;
|
|
$.get( that.options.searchAPI, { search: query }, function( result ) {
|
|
$.each( result['languagesearch'], function( code, name ) {
|
|
if ( that.resultCount === 0 ) {
|
|
// Autofill the first result.
|
|
that.autofill( code, name );
|
|
}
|
|
that.render( code );
|
|
that.resultCount++;
|
|
} );
|
|
that.resultHandler( query );
|
|
} );
|
|
},
|
|
|
|
/**
|
|
* Handler method to be called once search is over.
|
|
* Based on search result call success or noresults callbacks
|
|
* @param String query
|
|
*/
|
|
resultHandler: function( query ) {
|
|
if ( this.resultCount === 0 && this.options.noresults ) {
|
|
this.$suggestion.val( '' );
|
|
this.options.noresults.call( this, query );
|
|
} else if ( this.options.success ) {
|
|
this.options.success( this, query, this.resultCount );
|
|
}
|
|
},
|
|
|
|
autofill: function( langCode, languageName ) {
|
|
if ( !this.$suggestion.length ) {
|
|
return;
|
|
}
|
|
if ( !this.$element.val() ) {
|
|
this.$suggestion.val( '' );
|
|
return;
|
|
}
|
|
this.selectedLanguage = langCode;
|
|
languageName = languageName || this.options.languages[langCode];
|
|
var autonym,
|
|
userInput = this.$element.val(),
|
|
suggestion = userInput + languageName.substring( userInput.length, languageName.length );
|
|
if ( suggestion.toLowerCase() !== languageName.toLowerCase() ) {
|
|
// see if it was autonym match
|
|
autonym = $.uls.data.autonym( langCode ) || '';
|
|
suggestion = userInput + autonym.substring( userInput.length, autonym.length );
|
|
if ( suggestion !== autonym ) {
|
|
// Give up. It may be iso/script code match.
|
|
suggestion = "";
|
|
}
|
|
}
|
|
// Make sure that it is a visual prefix.
|
|
if ( !isVisualPrefix( userInput, suggestion ) ) {
|
|
suggestion = "";
|
|
}
|
|
this.$suggestion.val( suggestion );
|
|
},
|
|
|
|
render: function( langCode ) {
|
|
var $target = this.options.$target;
|
|
if ( !$target ) {
|
|
return;
|
|
}
|
|
$target.append( langCode, null );
|
|
},
|
|
|
|
escapeRegex: function( value ) {
|
|
return value.replace( /[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&" );
|
|
},
|
|
|
|
/**
|
|
* A search match happens if any of the following passes:
|
|
* a) Language name in current user interface language
|
|
* 'starts with' search string.
|
|
* b) Language autonym 'starts with' search string.
|
|
* c) ISO 639 code match with search string.
|
|
* d) ISO 15924 code for the script match the search string.
|
|
*/
|
|
filter: function( langCode, searchTerm ) {
|
|
// FIXME script is ISO 15924 code. We might need actual name of script.
|
|
var matcher = new RegExp( "^" + this.escapeRegex( searchTerm ), 'i' ),
|
|
languageName = this.options.languages[langCode];
|
|
return matcher.test( languageName ) ||
|
|
matcher.test( $.uls.data.autonym( langCode ) ) ||
|
|
matcher.test( langCode ) ||
|
|
matcher.test( $.uls.data.script( langCode ) );
|
|
}
|
|
|
|
};
|
|
|
|
$.fn.languagefilter = function( option ) {
|
|
return this.each( function() {
|
|
var $this = $( this ),
|
|
data = $this.data( 'languagefilter' ),
|
|
options = typeof option === 'object' && option;
|
|
if ( !data ) {
|
|
$this.data( 'languagefilter', ( data = new LanguageFilter( this, options ) ) );
|
|
}
|
|
if ( typeof option === 'string' ) {
|
|
data[option]();
|
|
}
|
|
} );
|
|
};
|
|
|
|
$.fn.languagefilter.defaults = {
|
|
$target: null, // Where to append the results
|
|
searchAPI: null,
|
|
languages: null, // Languages as code:name format.
|
|
noresults: null, // callback for no results found case
|
|
success: null, // callback if any results found.
|
|
onSelect: null // Language select handler - like enter in filter textbox.
|
|
};
|
|
|
|
$.fn.languagefilter.Constructor = LanguageFilter;
|
|
|
|
/* RegionSelector plugin definition */
|
|
|
|
/**
|
|
* Region selector is a language selector based on regions.
|
|
* Usage: $( 'jqueryselector' ).regionselector( options );
|
|
* The attached element should have data-regiongroup attribute
|
|
* that defines the regiongroup for the selector.
|
|
*/
|
|
var RegionSelector = function( element, options ) {
|
|
this.$element = $( element );
|
|
this.options = $.extend( {}, $.fn.regionselector.defaults, options );
|
|
this.$element.addClass( 'regionselector' );
|
|
this.regions = [];
|
|
this.regionGroup = this.$element.data( 'regiongroup' );
|
|
this.init();
|
|
this.listen();
|
|
};
|
|
|
|
RegionSelector.prototype = {
|
|
constructor: RegionSelector,
|
|
|
|
init: function() {
|
|
var region = this.$element.data( 'region' );
|
|
this.regions = $.uls.data.regionsInGroup( this.regionGroup );
|
|
if ( region ) {
|
|
this.regions.push( region );
|
|
}
|
|
},
|
|
|
|
test: function( langCode ) {
|
|
var langRegions = $.uls.data.regions( langCode ),
|
|
region;
|
|
|
|
for ( var i = 0; i < this.regions.length; i++ ) {
|
|
region = this.regions[i];
|
|
if ( $.inArray( region, langRegions ) >= 0 ) {
|
|
this.render( langCode, region );
|
|
return;
|
|
}
|
|
}
|
|
},
|
|
|
|
show: function() {
|
|
// Make the selected region (and it only) active
|
|
$( '.regionselector' ).removeClass( 'active' );
|
|
if ( this.regionGroup ) {
|
|
// if there is a region group, make it active.
|
|
this.$element.addClass( 'active' );
|
|
}
|
|
|
|
// Re-populate the list of languages
|
|
this.options.$target.empty();
|
|
var languagesByScriptGroup = $.uls.data.languagesByScriptGroup( this.options.languages );
|
|
for ( var scriptGroup in languagesByScriptGroup ) {
|
|
var languages = languagesByScriptGroup[scriptGroup];
|
|
languages.sort( $.uls.data.sortByAutonym );
|
|
for ( var i = 0; i < languages.length; i++ ) {
|
|
this.test( languages[i] );
|
|
}
|
|
}
|
|
|
|
if ( this.options.success ) {
|
|
this.options.success.call();
|
|
}
|
|
},
|
|
|
|
render: function( langCode, region ) {
|
|
var $target = this.options.$target;
|
|
if ( !$target ) {
|
|
return;
|
|
}
|
|
$target.append( langCode, region );
|
|
},
|
|
|
|
listen: function() {
|
|
this.$element.on( 'click', $.proxy( this.click, this ) );
|
|
},
|
|
|
|
click: function( e ) {
|
|
if( this.$element.hasClass( 'active' ) ) {
|
|
this.$element.removeClass( 'active' );
|
|
if ( this.options.noresults ) {
|
|
this.options.noresults.call();
|
|
}
|
|
} else {
|
|
this.show();
|
|
}
|
|
}
|
|
};
|
|
|
|
/* RegionSelector plugin definition */
|
|
|
|
$.fn.regionselector = function( option ) {
|
|
return this.each( function() {
|
|
var $this = $( this ),
|
|
data = $this.data( 'regionselector' ),
|
|
options = typeof option === 'object' && option;
|
|
|
|
if ( !data ) {
|
|
$this.data( 'regionselector', ( data = new RegionSelector( this, options ) ) );
|
|
}
|
|
if ( typeof option === 'string' ) {
|
|
data[option]();
|
|
}
|
|
} );
|
|
};
|
|
|
|
$.fn.regionselector.defaults = {
|
|
$target: null, // Where to render the results
|
|
success: null, // callback if any results found.
|
|
noresults: null, // callback when no results to show
|
|
languages: null
|
|
};
|
|
|
|
$.fn.regionselector.Constructor = RegionSelector;
|
|
/**
|
|
* Check if a prefix is visually prefix of a string
|
|
* @param String prefix
|
|
* @param String string
|
|
*/
|
|
function isVisualPrefix( prefix, string ) {
|
|
// Pre-base vowel signs of Indic languages. A vowel sign is called pre-base if
|
|
// consonant + vowel becomes [vowel][consonant] when rendered. Eg: ക + െ => കെ
|
|
var prebases = "െേൈൊോൌெேைொோௌେୈୋୌિਿिিেৈোৌෙේෛොෝෞ";
|
|
if ( prebases.indexOf( string[prefix.length] ) > 0 ) {
|
|
return false;
|
|
} else {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
} )( jQuery );
|