diff options
Diffstat (limited to 'www/wiki/extensions/UniversalLanguageSelector/lib/jquery.uls/src/jquery.uls.languagefilter.js')
| -rw-r--r-- | www/wiki/extensions/UniversalLanguageSelector/lib/jquery.uls/src/jquery.uls.languagefilter.js | 357 |
1 files changed, 357 insertions, 0 deletions
diff --git a/www/wiki/extensions/UniversalLanguageSelector/lib/jquery.uls/src/jquery.uls.languagefilter.js b/www/wiki/extensions/UniversalLanguageSelector/lib/jquery.uls/src/jquery.uls.languagefilter.js new file mode 100644 index 00000000..cdc96c6f --- /dev/null +++ b/www/wiki/extensions/UniversalLanguageSelector/lib/jquery.uls/src/jquery.uls.languagefilter.js @@ -0,0 +1,357 @@ +/** + * 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 or options.searchAPI. + */ +( function ( $ ) { + 'use strict'; + + var LanguageFilter; + + /** + * Check if a prefix is visually prefix of a string + * + * @param {string} prefix + * @param {string} string + * @return {boolean} + */ + 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 = 'െേൈൊോൌெேைொோௌେୈୋୌિਿिিেৈোৌෙේෛොෝෞ'; + return prebases.indexOf( string[ prefix.length ] ) <= 0; + } + + LanguageFilter = function ( element, options ) { + this.$element = $( element ); + this.options = $.extend( {}, $.fn.languagefilter.defaults, options ); + this.$element.addClass( 'languagefilter' ); + this.resultCount = 0; + this.$suggestion = this.$element.siblings( '.' + this.$element.data( 'suggestion' ) ); + this.$clear = this.$element.siblings( '.' + this.$element.data( 'clear' ) ); + this.selectedLanguage = null; + this.init(); + this.listen(); + }; + + LanguageFilter.prototype = { + init: function () { + this.search(); + }, + + listen: function () { + this.$element.on( 'keydown', this.keypress.bind( this ) ); + this.$element.on( 'input', $.fn.uls.debounce( this.onInputChange.bind( this ), 300 ) ); + + if ( this.$clear.length ) { + this.$clear.on( 'click', this.clear.bind( this ) ); + } + + this.toggleClear(); + }, + + onInputChange: function () { + this.selectedLanguage = null; + + if ( !this.$element.val() ) { + this.clear(); + } else { + this.options.lcd.empty(); + this.search(); + } + + this.toggleClear(); + }, + + keypress: function ( e ) { + var suggestion, query; + + switch ( e.keyCode ) { + case 9: // Tab -> Autocomplete + suggestion = this.$suggestion.val(); + + if ( suggestion && suggestion !== this.$element.val() ) { + this.$element.val( suggestion ); + e.preventDefault(); + e.stopPropagation(); + } + break; + case 13: // Enter + if ( !this.options.onSelect ) { + break; + } + + // Avoid bubbling this 'enter' to background page elements + e.preventDefault(); + e.stopPropagation(); + + query = $.trim( this.$element.val() ).toLowerCase(); + + if ( this.selectedLanguage ) { + // this.selectLanguage will be populated from a matching search + this.options.onSelect( this.selectedLanguage ); + } else if ( this.options.languages[ query ] ) { + // Search is yet to happen (in timeout delay), + // but we have a matching language code. + this.options.onSelect( query ); + } + + break; + } + }, + + /** + * Clears the current search removing + * clear buttons and suggestions. + */ + deactivate: function () { + this.$element.val( '' ); + + if ( !$.fn.uls.Constructor.prototype.isMobile() ) { + 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 languages = Object.keys( this.options.languages ), + results = [], + query = $.trim( this.$element.val() ).toLowerCase(); + + if ( query === '' ) { + this.options.lcd.setGroupByRegionOverride( null ); + this.resultHandler( query, languages ); + return; + } + + this.options.lcd.setGroupByRegionOverride( false ); + // Local search results + results = languages.filter( function ( langCode ) { + return this.filter( langCode, query ); + }.bind( this ) ); + + // Use the searchAPI if available, assuming that it has superior search results. + if ( this.options.searchAPI ) { + this.searchAPI( query ) + .done( this.resultHandler.bind( this ) ) + .fail( this.resultHandler.bind( this, query, results, undefined ) ); + } else { + this.resultHandler( query, results ); + } + }, + + searchAPI: function ( query ) { + return $.get( this.options.searchAPI, { search: query } ).then( function ( result ) { + var autofillLabel, + results = []; + + $.each( result.languagesearch, function ( apiCode, name ) { + var code, redirect; + + if ( this.options.languages[ apiCode ] ) { + code = apiCode; + } else { + redirect = $.uls.data.isRedirect( apiCode ); + if ( !redirect || !this.options.languages[ redirect ] ) { + return; + } + code = redirect; + } + + // Because of the redirect checking above, we might get duplicates. + // For example if API returns both `sr` and `sr-cyrl`, the former + // could get mapped to `sr-cyrl` and then we would have it twice. + // The exact cases when this happens of course depends on what is in + // options.languages, which might contain redirects such as `sr`. In + // this case we only show `sr` if no other variants are there. + // This also protects against broken search APIs returning duplicate + // results, although that is not happening in practice. + if ( results.indexOf( code ) === -1 ) { + autofillLabel = autofillLabel || name; + results.push( code ); + } + }.bind( this ) ); + + return $.Deferred().resolve( query, results, autofillLabel ); + }.bind( this ) ); + }, + + /** + * Handler method to be called once search is over. + * Based on search result triggers resultsfound or noresults events + * @param {string} query + * @param {string[]} results + * @param {string} [autofillLabel] + */ + resultHandler: function ( query, results, autofillLabel ) { + if ( results.length === 0 ) { + this.$suggestion.val( '' ); + this.$element.trigger( + 'noresults.uls', + { + query: query, + ulsPurpose: this.options.ulsPurpose + } + ); + return; + } + + if ( query ) { + this.selectedLanguage = results[ 0 ]; + this.autofill( results[ 0 ], autofillLabel ); + } + + results.map( this.render.bind( this ) ); + this.$element.trigger( 'resultsfound.uls', [ query, results.length ] ); + }, + + autofill: function ( langCode, languageName ) { + var autonym, userInput, suggestion; + + if ( !this.$suggestion.length ) { + return; + } + + if ( !this.$element.val() ) { + this.$suggestion.val( '' ); + return; + } + + languageName = languageName || this.options.languages[ langCode ]; + + if ( !languageName ) { + return; + } + + 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.getAutonym( langCode ) || ''; + suggestion = userInput + autonym.substring( userInput.length, autonym.length ); + + if ( suggestion !== autonym ) { + // Give up. It may be an 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 ) { + return this.options.lcd.append( langCode ); + }, + + 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. + * @param {string} langCode + * @param {string} searchTerm + * @return {boolean} + */ + 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.getAutonym( langCode ) ) || + matcher.test( langCode ) || + matcher.test( $.uls.data.getScript( 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 = { + // LanguageCategoryDisplay + lcd: undefined, + // URL to which we append query parameter with the query value + searchAPI: undefined, + // What is this ULS used for. + // Should be set for distinguishing between different instances of ULS + // in the same application. + ulsPurpose: '', + // Object of language tags to language names + languages: [], + // Callback function when language is selected + onSelect: undefined + }; + + $.fn.languagefilter.Constructor = LanguageFilter; + +}( jQuery ) ); |