Internationalize ULS
* Integrate jquery.i18n * Update jquery.uls from upstream and use the build version Change-Id: I523444b1f6b177f14a4799a455a16a14649b0e1b
This commit is contained in:
Santhosh Thottingal
@@ -1,320 +0,0 @@
|
||||
/**
|
||||
* Universal Language Selector
|
||||
* ULS core component.
|
||||
*
|
||||
* 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
|
||||
*/
|
||||
|
||||
(function ( $ ) {
|
||||
"use strict";
|
||||
|
||||
// Region numbers in id attributes also appear in the langdb.
|
||||
var template = '\
|
||||
<div class="uls-menu"> \
|
||||
<div class="row"> \
|
||||
<span id="uls-close" class="icon-close"></span> \
|
||||
</div> \
|
||||
<div class="row"> \
|
||||
<div class="uls-title four columns">\
|
||||
<h1>Select language</h1>\
|
||||
</div>\
|
||||
<div class="three columns" id="settings-block"></div>\
|
||||
<div class="five columns" id="map-block">\
|
||||
<div class="row">\
|
||||
<div data-regiongroup="1" id="uls-region-1" class="three columns uls-region">\
|
||||
<a>Worldwide</a>\
|
||||
</div>\
|
||||
<div class="nine columns">\
|
||||
<div class="row uls-worldmap">\
|
||||
<div data-regiongroup="2" id="uls-region-2" class="four columns uls-region">\
|
||||
<a>America</a>\
|
||||
</div>\
|
||||
<div data-regiongroup="3" id="uls-region-3" class="four columns uls-region">\
|
||||
<a>Europe <br> Middle East <br> Africa\
|
||||
</a>\
|
||||
</div>\
|
||||
<div data-regiongroup="4" id="uls-region-4" class="four columns uls-region">\
|
||||
<a>Asia <br> Pacific\
|
||||
</a>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div id="search" class="row"> \
|
||||
<div class="one column">\
|
||||
<span class="search-label"></span>\
|
||||
</div>\
|
||||
<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-clear="languagefilter-clear" data-suggestion="filtersuggestion"\
|
||||
placeholder="Language search" autocomplete="off" />\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="one column">\
|
||||
<span id="languagefilter-clear"></span>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row uls-language-list"></div>\
|
||||
</div> ';
|
||||
|
||||
/**
|
||||
* ULS Public class definition
|
||||
*/
|
||||
var ULS = function( element, options ) {
|
||||
this.$element = $( element );
|
||||
this.options = $.extend( {}, $.fn.uls.defaults, options );
|
||||
this.$menu = $( template );
|
||||
this.languages = this.options.languages;
|
||||
for ( var code in this.languages ) {
|
||||
if ( $.uls.data.languages[code] === undefined ) {
|
||||
if ( window.console && window.console.log ) {
|
||||
window.console.log( "ULS: Unknown language " + code + "." );
|
||||
}
|
||||
delete this.languages[code];
|
||||
}
|
||||
}
|
||||
this.left = this.options.left;
|
||||
this.top = this.options.top;
|
||||
this.shown = false;
|
||||
this.initialized = false;
|
||||
this.$languageFilter = this.$menu.find( 'input#languagefilter' );
|
||||
this.$regionFilters = this.$menu.find( '.uls-region' );
|
||||
this.$resultsView = this.$menu.find( 'div.uls-language-list' );
|
||||
this.render();
|
||||
this.listen();
|
||||
this.ready();
|
||||
};
|
||||
|
||||
ULS.prototype = {
|
||||
constructor: ULS,
|
||||
|
||||
ready: function() {
|
||||
if ( this.options.onReady ) {
|
||||
this.options.onReady( this );
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Calculate the position of ULS
|
||||
* Returns an object with top and left properties.
|
||||
* @returns {Object}
|
||||
*/
|
||||
position: function() {
|
||||
var pos = $.extend( {}, this.$element.offset(), {
|
||||
height: this.$element[0].offsetHeight
|
||||
} );
|
||||
return {
|
||||
top: this.top || pos.top + pos.height,
|
||||
left: this.left || '25%'
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Show the ULS window
|
||||
*/
|
||||
show: function() {
|
||||
var pos = this.position();
|
||||
this.$menu.css( {
|
||||
top: pos.top,
|
||||
left: '25%'
|
||||
} );
|
||||
|
||||
if ( !this.initialized ) {
|
||||
$( 'body' ).prepend( this.$menu );
|
||||
// Initialize with a full search.
|
||||
// This happens on first time click of uls trigger.
|
||||
this.defaultSearch();
|
||||
this.initialized = true;
|
||||
}
|
||||
this.$menu.show();
|
||||
this.shown = true;
|
||||
this.$languageFilter.focus();
|
||||
},
|
||||
|
||||
defaultSearch: function() {
|
||||
this.$resultsView.lcd( 'empty' );
|
||||
this.$regionFilters.first().regionselector( 'show' );
|
||||
},
|
||||
|
||||
/**
|
||||
* Hide the ULS window
|
||||
*/
|
||||
hide: function() {
|
||||
this.$menu.hide();
|
||||
this.shown = false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Render the UI elements.
|
||||
* Does nothing by default. Can be used for customization.
|
||||
*/
|
||||
render: function() {
|
||||
// Rendering stuff here
|
||||
},
|
||||
|
||||
/**
|
||||
* callback for no results found context.
|
||||
* @param String search the search term
|
||||
*/
|
||||
noresults: function( search ) {
|
||||
this.$resultsView.lcd( 'noResults' );
|
||||
},
|
||||
|
||||
/**
|
||||
* callback for results found context.
|
||||
*/
|
||||
success: function() {
|
||||
this.$resultsView.show();
|
||||
},
|
||||
|
||||
/**
|
||||
* Bind the UI elements with their event listeners
|
||||
*/
|
||||
listen: function() {
|
||||
var lcd,
|
||||
that = this;
|
||||
|
||||
// Register all event listeners to the ULS here.
|
||||
that.$element.on( 'click', $.proxy( that.click, that ) );
|
||||
|
||||
that.$languageFilter.on( 'seachclear', $.proxy( that.defaultSearch, that ) );
|
||||
// Handle click on close button
|
||||
this.$menu.find( "#uls-close" ).on( 'click', $.proxy( that.hide, that ) );
|
||||
|
||||
// Handle key press events on the menu
|
||||
that.$menu.on('keypress', $.proxy(this.keypress, this) )
|
||||
.on('keyup', $.proxy(this.keyup, this) );
|
||||
if ( $.browser.webkit || $.browser.msie ) {
|
||||
this.$menu.on( 'keydown', $.proxy( this.keypress, this ) );
|
||||
}
|
||||
|
||||
lcd = that.$resultsView.lcd( {
|
||||
languages: that.languages,
|
||||
quickList: that.options.quickList,
|
||||
clickhandler: $.proxy( that.onSelect, that )
|
||||
} ).data( "lcd" );
|
||||
|
||||
that.$languageFilter.languagefilter( {
|
||||
$target: lcd,
|
||||
languages: that.languages,
|
||||
success: function() {
|
||||
$( '.regionselector' ).removeClass( 'active' );
|
||||
that.success();
|
||||
},
|
||||
noresults: function() {
|
||||
$( '.regionselector' ).removeClass( 'active' );
|
||||
that.noresults();
|
||||
},
|
||||
searchAPI: that.options.searchAPI,
|
||||
onSelect: $.proxy( that.onSelect, that )
|
||||
} );
|
||||
|
||||
// Create region selectors, one per region
|
||||
this.$menu.find( '.uls-region, .uls-region-link' ).regionselector( {
|
||||
$target: lcd,
|
||||
languages: that.languages,
|
||||
success: function( regionfilter ) {
|
||||
// Deactivate search filtering
|
||||
that.$languageFilter.languagefilter( 'deactivate' );
|
||||
// If it is WW region, show the quicklist
|
||||
if ( regionfilter.regionGroup === 1 ) {
|
||||
lcd.quicklist();
|
||||
}
|
||||
// Show 'results view' if we are in no results mode
|
||||
that.success();
|
||||
},
|
||||
noresults: function() {
|
||||
that.$languageFilter.languagefilter( 'clear' );
|
||||
}
|
||||
} );
|
||||
},
|
||||
|
||||
/**
|
||||
* On select handler for search results
|
||||
* @param langCode
|
||||
*/
|
||||
onSelect: function( langCode ) {
|
||||
this.hide();
|
||||
if ( this.options.onSelect ) {
|
||||
this.options.onSelect.call( this, langCode );
|
||||
}
|
||||
},
|
||||
|
||||
keyup: function( e ) {
|
||||
if ( !this.shown ) {
|
||||
return;
|
||||
}
|
||||
if ( e.keyCode === 27 ) { // escape
|
||||
this.hide();
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
},
|
||||
|
||||
keypress: function( e ) {
|
||||
if ( !this.shown ) {
|
||||
return;
|
||||
}
|
||||
if ( e.keyCode === 27 ) { // escape
|
||||
this.hide();
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
},
|
||||
|
||||
click: function( e ) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
if ( !this.shown ) {
|
||||
this.show();
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/* ULS PLUGIN DEFINITION
|
||||
* =========================== */
|
||||
|
||||
$.fn.uls = function( option ) {
|
||||
return this.each( function() {
|
||||
var $this = $( this ),
|
||||
data = $this.data( 'uls' ),
|
||||
options = typeof option === 'object' && option;
|
||||
|
||||
if ( !data ) {
|
||||
$this.data( 'uls', ( data = new ULS( this, options ) ) );
|
||||
}
|
||||
if ( typeof option === 'string' ) {
|
||||
data[option]();
|
||||
}
|
||||
} );
|
||||
};
|
||||
|
||||
$.fn.uls.defaults = {
|
||||
menu: template,
|
||||
onSelect: null, // Callback function to be called when a language is selected
|
||||
searchAPI: null, // Language search API
|
||||
languages: $.uls.data.autonyms(), // Languages to be used for ULS, default is all languages
|
||||
quickList: null // Array of language codes of function that returns such
|
||||
};
|
||||
|
||||
$.fn.uls.Constructor = ULS;
|
||||
|
||||
} ( jQuery ) );
|
||||
File diff suppressed because one or more lines are too long
@@ -1,350 +0,0 @@
|
||||
/**
|
||||
* Utility functions for querying language data.
|
||||
*
|
||||
* 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
|
||||
*/
|
||||
|
||||
(function ( $ ) {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Returns the script of the language.
|
||||
* @param string language code
|
||||
* @return string
|
||||
*/
|
||||
$.uls.data.script = function( language ) {
|
||||
return $.uls.data.languages[language][0];
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns the regions in which a language is spoken.
|
||||
* @param string language code
|
||||
* @return array of strings
|
||||
*/
|
||||
$.uls.data.regions = function( language ) {
|
||||
return ( $.uls.data.languages[language] && $.uls.data.languages[language][1] ) || 'UNKNOWN';
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns the autonym of the language.
|
||||
* @param string language code
|
||||
* @return string
|
||||
*/
|
||||
$.uls.data.autonym = function( language ) {
|
||||
return ( $.uls.data.languages[language] && $.uls.data.languages[language][2] ) || language;
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns all language codes and corresponding autonyms
|
||||
* @return array
|
||||
*/
|
||||
$.uls.data.autonyms = function() {
|
||||
var autonymsByCode = {};
|
||||
|
||||
for ( var language in $.uls.data.languages ) {
|
||||
autonymsByCode[language] = $.uls.data.autonym( language );
|
||||
}
|
||||
|
||||
return autonymsByCode;
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns an array of all region codes.
|
||||
* @return array
|
||||
*/
|
||||
$.uls.data.allRegions = function() {
|
||||
var allRegions = [];
|
||||
|
||||
for( var region in $.uls.data.regiongroups ) {
|
||||
allRegions.push( region );
|
||||
}
|
||||
|
||||
return allRegions;
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns all languages written in script.
|
||||
* @param script string
|
||||
* @return array of strings (languages codes)
|
||||
*/
|
||||
$.uls.data.languagesInScript = function( script ) {
|
||||
return $.uls.data.languagesInScripts( [ script ] );
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns all languages written in the given scripts.
|
||||
* @param scripts array of strings
|
||||
* @return array of strings (languages codes)
|
||||
*/
|
||||
$.uls.data.languagesInScripts = function( scripts ) {
|
||||
var languagesInScripts = [];
|
||||
|
||||
for ( var language in $.uls.data.languages ) {
|
||||
for ( var i = 0; i < scripts.length; i++ ) {
|
||||
if ( scripts[i] === $.uls.data.script(language) ) {
|
||||
languagesInScripts.push( language );
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return languagesInScripts;
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns all languages in a given region.
|
||||
* @param region string
|
||||
* @return array of strings (languages codes)
|
||||
*/
|
||||
$.uls.data.languagesInRegion = function( region ) {
|
||||
return $.uls.data.languagesInRegions( [ region ] );
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns all languages in given regions.
|
||||
* @param region array of strings.
|
||||
* @return array of strings (languages codes)
|
||||
*/
|
||||
$.uls.data.languagesInRegions = function( regions ) {
|
||||
var languagesInRegions = [];
|
||||
|
||||
for ( var language in $.uls.data.languages ) {
|
||||
for ( var i = 0; i < regions.length; i++ ) {
|
||||
if ( $.inArray( regions[i], $.uls.data.regions( language ) ) !== -1 ) {
|
||||
languagesInRegions.push( language );
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return languagesInRegions;
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns all languages in a region group.
|
||||
* @param groupNum number.
|
||||
* @return array of strings (languages codes)
|
||||
*/
|
||||
$.uls.data.languagesInRegionGroup = function( groupNum ) {
|
||||
return $.uls.data.languagesInRegions( $.uls.data.regionsInGroup( groupNum ) );
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns an associative array of languages in a region,
|
||||
* grouped by script.
|
||||
* @param string region code
|
||||
* @return associative array
|
||||
*/
|
||||
$.uls.data.languagesByScriptInRegion = function( region ) {
|
||||
var languagesByScriptInRegion = {};
|
||||
|
||||
for ( var language in $.uls.data.languages ) {
|
||||
if ( $.inArray( region, $.uls.data.regions( language ) ) !== -1 ) {
|
||||
var script = $.uls.data.script( language );
|
||||
if ( languagesByScriptInRegion[script] === undefined ) {
|
||||
languagesByScriptInRegion[script] = [];
|
||||
}
|
||||
languagesByScriptInRegion[script].push( language );
|
||||
}
|
||||
}
|
||||
|
||||
return languagesByScriptInRegion;
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns an associative array of languages in a region,
|
||||
* grouped by script group.
|
||||
* @param string region code
|
||||
* @return associative array
|
||||
*/
|
||||
$.uls.data.languagesByScriptGroupInRegion = function( region ) {
|
||||
return $.uls.data.languagesByScriptGroupInRegions( [ region ] );
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns an associative array of all languages,
|
||||
* grouped by script group.
|
||||
* @return associative array
|
||||
*/
|
||||
$.uls.data.allLanguagesByScriptGroup = function() {
|
||||
return $.uls.data.languagesByScriptGroupInRegions( $.uls.data.allRegions() );
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the given list of languages grouped by script.
|
||||
* @param languages Array of language codes
|
||||
* @return {Object} Array of languages indexed by script codes
|
||||
*/
|
||||
$.uls.data.languagesByScriptGroup = function( languages ) {
|
||||
var languagesByScriptGroup = {},
|
||||
scriptGroup,
|
||||
language,
|
||||
langScriptGroup;
|
||||
|
||||
for ( scriptGroup in $.uls.data.scriptgroups ) {
|
||||
for ( language in languages ) {
|
||||
langScriptGroup = $.uls.data.scriptGroupOfLanguage( language );
|
||||
if( langScriptGroup !== scriptGroup ) {
|
||||
continue;
|
||||
}
|
||||
if ( !languagesByScriptGroup[scriptGroup] ) {
|
||||
languagesByScriptGroup[scriptGroup] = [];
|
||||
}
|
||||
languagesByScriptGroup[scriptGroup].push( language );
|
||||
}
|
||||
}
|
||||
|
||||
return languagesByScriptGroup;
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns an associative array of languages in several regions,
|
||||
* grouped by script group.
|
||||
* @param array of strings - region codes
|
||||
* @return associative array
|
||||
*/
|
||||
$.uls.data.languagesByScriptGroupInRegions = function( regions ) {
|
||||
var languagesByScriptGroupInRegions = {};
|
||||
|
||||
for ( var language in $.uls.data.languages ) {
|
||||
for ( var i = 0; i < regions.length; i++ ) {
|
||||
if ( $.inArray( regions[i], $.uls.data.regions( language ) ) !== -1 ) {
|
||||
var scriptGroup = $.uls.data.scriptGroupOfLanguage( language );
|
||||
if ( languagesByScriptGroupInRegions[scriptGroup] === undefined ) {
|
||||
languagesByScriptGroupInRegions[scriptGroup] = [];
|
||||
}
|
||||
languagesByScriptGroupInRegions[scriptGroup].push( language );
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return languagesByScriptGroupInRegions;
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns an array of languages grouped by region group,
|
||||
* region, script group and script.
|
||||
* @return associative array
|
||||
*/
|
||||
$.uls.data.allLanguagesByRegionAndScript = function() {
|
||||
var allLanguagesByRegionAndScript = {},
|
||||
region,
|
||||
regionGroup;
|
||||
|
||||
for ( region in $.uls.data.regiongroups ) {
|
||||
regionGroup = $.uls.data.regiongroups[region];
|
||||
if ( allLanguagesByRegionAndScript[regionGroup] === undefined ) {
|
||||
allLanguagesByRegionAndScript[regionGroup] = {};
|
||||
}
|
||||
allLanguagesByRegionAndScript[regionGroup][region] = {};
|
||||
}
|
||||
|
||||
for ( var language in $.uls.data.languages ) {
|
||||
var script = $.uls.data.script( language );
|
||||
var scriptGroup = $.uls.data.groupOfScript( script );
|
||||
var regions = $.uls.data.regions( language );
|
||||
|
||||
for ( var regionNum = 0; regionNum < regions.length; regionNum++ ) {
|
||||
region = regions[regionNum];
|
||||
regionGroup = $.uls.data.regiongroups[region];
|
||||
|
||||
if ( allLanguagesByRegionAndScript[regionGroup][region][scriptGroup] === undefined ) {
|
||||
allLanguagesByRegionAndScript[regionGroup][region][scriptGroup] = {};
|
||||
}
|
||||
|
||||
if ( allLanguagesByRegionAndScript[regionGroup][region][scriptGroup][script] === undefined ) {
|
||||
allLanguagesByRegionAndScript[regionGroup][region][scriptGroup][script] = [];
|
||||
}
|
||||
|
||||
allLanguagesByRegionAndScript[regionGroup][region][scriptGroup][script].push( language );
|
||||
}
|
||||
}
|
||||
|
||||
return allLanguagesByRegionAndScript;
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns all regions in a region group.
|
||||
* @param number groupNum
|
||||
* @return array of strings
|
||||
*/
|
||||
$.uls.data.regionsInGroup = function( groupNum ) {
|
||||
var regionsInGroup = [];
|
||||
|
||||
for ( var region in $.uls.data.regiongroups ) {
|
||||
if ( $.uls.data.regiongroups[region] === groupNum ) {
|
||||
regionsInGroup.push( region );
|
||||
}
|
||||
}
|
||||
|
||||
return regionsInGroup;
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns the script group of a script or 'Other' if it doesn't
|
||||
* belong to any group.
|
||||
* @param string script code
|
||||
* @return string script group name
|
||||
*/
|
||||
$.uls.data.groupOfScript = function( script ) {
|
||||
for ( var group in $.uls.data.scriptgroups ) {
|
||||
if ( $.inArray( script, $.uls.data.scriptgroups[group] ) !== -1 ) {
|
||||
return group;
|
||||
}
|
||||
}
|
||||
|
||||
return 'Other';
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns the script group of a language.
|
||||
* @param string language code
|
||||
* @return string script group name
|
||||
*/
|
||||
$.uls.data.scriptGroupOfLanguage = function( language ) {
|
||||
return $.uls.data.groupOfScript( $.uls.data.script( language ) );
|
||||
};
|
||||
|
||||
/**
|
||||
* A callback for sorting languages by autonym.
|
||||
* Can be used as an argument to a sort function.
|
||||
* @param two language codes
|
||||
*/
|
||||
$.uls.data.sortByAutonym = function( a, b ) {
|
||||
var autonymA = $.uls.data.autonym( a ) || a,
|
||||
autonymB = $.uls.data.autonym( b ) || b;
|
||||
return ( autonymA.toLowerCase() < autonymB.toLowerCase() ) ? -1 : 1;
|
||||
};
|
||||
|
||||
/**
|
||||
* Check if a language is right-to-left.
|
||||
* @param string language code
|
||||
* @return boolean
|
||||
*/
|
||||
$.uls.data.isRtl = function( language ) {
|
||||
return $.inArray( $.uls.data.script( language ), $.uls.data.rtlscripts ) !== -1;
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns the languages spoken in a territory.
|
||||
* @param string Territory code
|
||||
* @return list of language codes
|
||||
*/
|
||||
$.uls.data.languagesInTerritory = function( territory ) {
|
||||
return $.uls.data.territories[territory];
|
||||
};
|
||||
} ( jQuery ) );
|
||||
@@ -1,298 +0,0 @@
|
||||
/**
|
||||
* 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: // Enter
|
||||
if ( !this.options.onSelect ) {
|
||||
break;
|
||||
}
|
||||
var 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;
|
||||
default:
|
||||
var that = this;
|
||||
this.selectedLanguage = null;
|
||||
delay( function() {
|
||||
if ( !that.$element.val() ) {
|
||||
that.clear();
|
||||
} else {
|
||||
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.$element.trigger( 'seachclear' );
|
||||
},
|
||||
|
||||
/**
|
||||
* 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.toLowerCase() === 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;
|
||||
|
||||
/**
|
||||
* 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 ) );
|
||||
@@ -1,269 +0,0 @@
|
||||
/**
|
||||
* Universal Language Selector
|
||||
* Language category display component - Used for showing the search results,
|
||||
* grouped by regions, scripts
|
||||
*
|
||||
* 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
|
||||
*/
|
||||
|
||||
(function( $ ) {
|
||||
"use strict";
|
||||
|
||||
|
||||
var noResultsTemplate = '\
|
||||
<div class="twelve columns uls-no-results-view">\
|
||||
<h2 class="eleven columns end offset-by-one">\
|
||||
No results found\
|
||||
</h2>\
|
||||
<div id="uls-no-found-more">\
|
||||
<div class="ten columns end offset-by-one">\
|
||||
<p>\
|
||||
You can search by language name, script name, ISO code of language or \
|
||||
you can browse by region:\
|
||||
<a class="uls-region-link" data-region="AM" href="#">America</a>,\
|
||||
<a class="uls-region-link" data-region="EU" href="#">Europe</a>,\
|
||||
<a class="uls-region-link" data-region="ME" href="#">Middle East</a>, \
|
||||
<a class="uls-region-link" data-region="AF" href="#">Africa</a>,\
|
||||
<a class="uls-region-link" data-region="AS" href="#">Asia</a>,\
|
||||
<a class="uls-region-link" data-region="PA" href="#">Pacific</a> or \
|
||||
<a class="uls-region-link" data-region="WW" href="#">Worldwide languages</a>.\
|
||||
</p>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>';
|
||||
|
||||
var LanguageCategoryDisplay = function( element, options ) {
|
||||
this.$element = $( element );
|
||||
this.options = $.extend( {}, $.fn.lcd.defaults, options );
|
||||
this.$element.addClass( 'lcd' );
|
||||
this.regionDivs = {};
|
||||
this.$element.append( $(noResultsTemplate) );
|
||||
this.$noResults = this.$element.find( 'div.uls-no-results-view' );
|
||||
this.render();
|
||||
this.listen();
|
||||
};
|
||||
|
||||
LanguageCategoryDisplay.prototype = {
|
||||
constructor: LanguageCategoryDisplay,
|
||||
|
||||
append: function( langCode, regionCode ) {
|
||||
this.addToRegion( langCode, regionCode );
|
||||
this.$noResults.hide();
|
||||
},
|
||||
|
||||
/**
|
||||
* Add the language to a region.
|
||||
* If the region parameter is given, add to that region alone
|
||||
* Otherwise to all regions that this language belongs.
|
||||
* @param langCode
|
||||
* @param region Optional region
|
||||
*/
|
||||
addToRegion: function( langCode, region ) {
|
||||
var that = this;
|
||||
var language = that.options.languages[langCode],
|
||||
langName = $.uls.data.autonym( langCode ) || language || langCode,
|
||||
regions = [];
|
||||
|
||||
if ( region ) {
|
||||
regions.push( region );
|
||||
} else {
|
||||
regions = $.uls.data.regions( langCode );
|
||||
}
|
||||
|
||||
// World wide languages need not be repeated in all regions.
|
||||
if ( $.inArray( 'WW', regions ) > -1 ) {
|
||||
regions = [ 'WW' ];
|
||||
}
|
||||
|
||||
for ( var i = 0; i < regions.length; i++ ) {
|
||||
var regionCode = regions[i];
|
||||
|
||||
var $li = $( '<li>' )
|
||||
.data( 'code', langCode )
|
||||
.append(
|
||||
$( '<a>' ).prop( 'href', '#' ).prop( 'title', language ).html( langName )
|
||||
);
|
||||
|
||||
// Append the element to the column in the list
|
||||
var $column = that.getColumn( regionCode );
|
||||
var lastLanguage = $column.find( 'li:last' ).data( 'code' );
|
||||
|
||||
if ( lastLanguage ) {
|
||||
var lastScriptGroup = $.uls.data.scriptGroupOfLanguage( lastLanguage ),
|
||||
currentScriptGroup = $.uls.data.scriptGroupOfLanguage( langCode );
|
||||
|
||||
if ( lastScriptGroup !== currentScriptGroup ) {
|
||||
if ( $column.find( 'li' ).length > 2 ) {
|
||||
// If column already has 2 or more languages, add a new column
|
||||
$column = that.getColumn( regionCode, true );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$column.append( $li );
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Get a column to add language.
|
||||
* @param String regionCode The region code
|
||||
* @param boolean forceNew whether a new column must be created or not
|
||||
*/
|
||||
getColumn: function( regionCode, forceNew ) {
|
||||
var $divRegionCode, $rowDiv, $ul;
|
||||
|
||||
forceNew = forceNew || false;
|
||||
$divRegionCode = this.regionDivs[regionCode];
|
||||
$rowDiv = $divRegionCode.find( 'div.row:last' );
|
||||
$ul = $rowDiv.find( 'ul:last' );
|
||||
|
||||
// Each column can have maximum 8 languages.
|
||||
if ( $ul.length === 0 || $ul.find( 'li' ).length >= 8 || forceNew ) {
|
||||
$ul = $( '<ul>' ).addClass( 'three columns end' );
|
||||
|
||||
if ( $rowDiv.length === 0 || $rowDiv.find( 'ul' ).length >= 4 ) {
|
||||
$rowDiv = $( '<div>' ).addClass( 'row uls-language-block' );
|
||||
$divRegionCode.append( $rowDiv );
|
||||
$ul.addClass( 'offset-by-one' );
|
||||
}
|
||||
|
||||
$rowDiv.append( $ul );
|
||||
}
|
||||
|
||||
$divRegionCode.show();
|
||||
|
||||
return $ul;
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var that = this;
|
||||
var regions = { // FIXME Remove this when i18n is in place.
|
||||
WW: 'Worldwide',
|
||||
AM: 'America',
|
||||
EU: 'Europe',
|
||||
ME: 'Middle East',
|
||||
AS: 'Asia',
|
||||
AF: 'Africa',
|
||||
PA: 'Pacific'
|
||||
};
|
||||
var $section;
|
||||
$.each( $.uls.data.regiongroups, function( regionCode, regionIndex ) {
|
||||
$section = $( '<div>' ).addClass( 'twelve columns uls-lcd-region-section' ).prop( 'id', regionCode );
|
||||
$section.append( $( '<h3>' )
|
||||
.addClass( 'eleven columns uls-lcd-region-section offset-by-one' )
|
||||
.text( regions[regionCode] ) );
|
||||
that.$element.append( $section );
|
||||
$section.hide();
|
||||
that.regionDivs[regionCode] = $section;
|
||||
} );
|
||||
this.$noResults.hide();
|
||||
},
|
||||
|
||||
quicklist: function() {
|
||||
if ( $.isFunction( this.options.quickList ) ) {
|
||||
this.options.quickList = this.options.quickList();
|
||||
}
|
||||
|
||||
if ( !this.options.quickList ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Pick only the first elements, because we don't have room for more
|
||||
var quickList = this.options.quickList;
|
||||
quickList = quickList.slice( 0, 16 );
|
||||
quickList.sort( $.uls.data.sortByAutonym );
|
||||
var $quickListsection = $( '<div>' ).addClass( 'twelve columns uls-lcd-region-section' ).prop( 'id', 'uls-lcd-quicklist' );
|
||||
$quickListsection.append( $( '<h3>' ).addClass( 'eleven columns uls-lcd-region-section offset-by-one' ).text( 'Common languages' ) );
|
||||
this.$element.prepend( $quickListsection );
|
||||
this.regionDivs[ 'quick' ] = $quickListsection;
|
||||
for ( var i = 0; i < quickList.length; i++) {
|
||||
var $column = this.getColumn( 'quick', i % 4 === 0 );
|
||||
var langCode = quickList[i];
|
||||
var language = this.options.languages[langCode];
|
||||
var langName = $.uls.data.autonym( langCode ) || language || langCode;
|
||||
var $li = $( '<li>' )
|
||||
.data( 'code', langCode )
|
||||
.append(
|
||||
$( '<a>' ).prop( 'href', '#' ).prop( 'title', language ).html( langName )
|
||||
);
|
||||
$column.append( $li );
|
||||
}
|
||||
$quickListsection.show();
|
||||
return $quickListsection;
|
||||
},
|
||||
|
||||
show: function() {
|
||||
if ( !this.regionDivs ) {
|
||||
this.render();
|
||||
}
|
||||
},
|
||||
|
||||
empty: function() {
|
||||
this.$element.find( 'div.uls-language-block' ).remove();
|
||||
this.$element.find( 'div.uls-lcd-region-section' ).hide();
|
||||
},
|
||||
|
||||
focus: function() {
|
||||
this.$element.focus();
|
||||
},
|
||||
|
||||
noResults: function() {
|
||||
this.$noResults.show();
|
||||
var $suggestions = this.quicklist();
|
||||
$suggestions.find( 'h3' ).text( 'You may be interested in' );
|
||||
this.$noResults.find( 'h2' ).after( $suggestions );
|
||||
},
|
||||
|
||||
listen: function() {
|
||||
var that = this;
|
||||
if ( this.options.clickhandler ) {
|
||||
this.$element.on( 'click', 'div.row li', function() {
|
||||
that.options.clickhandler.call( this, $( this ).data( 'code' ) );
|
||||
} );
|
||||
}
|
||||
|
||||
// The region section need to be in sync with the map filter.
|
||||
that.$element.scroll( function () {
|
||||
if ( this.offsetHeight + this.scrollTop >= this.scrollHeight ) {
|
||||
that.$element.trigger( 'scrollend' );
|
||||
}
|
||||
|
||||
} );
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
$.fn.lcd = function( option ) {
|
||||
return this.each( function() {
|
||||
var $this = $( this ),
|
||||
data = $this.data( 'lcd' ),
|
||||
options = typeof option === 'object' && option;
|
||||
|
||||
if ( !data ) {
|
||||
$this.data( 'lcd', ( data = new LanguageCategoryDisplay( this, options ) ) );
|
||||
}
|
||||
if ( typeof option === 'string') {
|
||||
data[option]();
|
||||
}
|
||||
} );
|
||||
};
|
||||
|
||||
$.fn.lcd.defaults = {
|
||||
languages: null
|
||||
};
|
||||
|
||||
$.fn.lcd.Constructor = LanguageCategoryDisplay;
|
||||
|
||||
} ( jQuery ) );
|
||||
@@ -1,182 +0,0 @@
|
||||
/**
|
||||
* jQuery region 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
|
||||
*/
|
||||
|
||||
(function ( $ ) {
|
||||
"use strict";
|
||||
|
||||
/* 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.cache= null;
|
||||
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 );
|
||||
this.cache[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' );
|
||||
}
|
||||
|
||||
if ( this.cache ) {
|
||||
// If the result cache is present, render the results from there.
|
||||
var result = null;
|
||||
for ( result in this.cache ) {
|
||||
this.render( result, this.cache[result] );
|
||||
}
|
||||
} else {
|
||||
this.cache = {};
|
||||
// Get the languages grouped by script group
|
||||
var languagesByScriptGroup = $.uls.data.languagesByScriptGroup( this.options.languages );
|
||||
for ( var scriptGroup in languagesByScriptGroup ) {
|
||||
// Get the languages for the script group
|
||||
var languages = languagesByScriptGroup[scriptGroup];
|
||||
// Sort it based on autonym
|
||||
languages.sort( $.uls.data.sortByAutonym );
|
||||
for ( var i = 0; i < languages.length; i++ ) {
|
||||
// Check whether it belongs to the region
|
||||
this.test( languages[i] );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if ( this.options.success ) {
|
||||
this.options.success( this );
|
||||
}
|
||||
},
|
||||
|
||||
render: function( langCode, region ) {
|
||||
var $target = this.options.$target;
|
||||
if ( !$target ) {
|
||||
return;
|
||||
}
|
||||
$target.append( langCode, region );
|
||||
},
|
||||
|
||||
next: function () {
|
||||
if ( !this.$element.hasClass( 'active') ) {
|
||||
return true;
|
||||
}
|
||||
var that = this;
|
||||
// Do not respond to all scroll end events, but only after a short interval
|
||||
delay( function () {
|
||||
var regiongroup = that.$element.data( 'regiongroup' );
|
||||
var nextRegiongroup = regiongroup + 1;
|
||||
|
||||
var $nextRegion = $( '#uls-region-' + nextRegiongroup );
|
||||
var next = $nextRegion.length && $nextRegion.data( 'regionselector' );
|
||||
if ( next ) {
|
||||
next.show();
|
||||
}
|
||||
}, 100 );
|
||||
return false;
|
||||
},
|
||||
|
||||
listen: function() {
|
||||
this.$element.on( 'click', $.proxy( this.click, this ) );
|
||||
this.options.$target.$element.bind( 'scrollend', $.proxy( this.next, this) );
|
||||
},
|
||||
|
||||
click: function( e ) {
|
||||
if( this.$element.hasClass( 'active' ) ) {
|
||||
this.$element.removeClass( 'active' );
|
||||
if ( this.options.noresults ) {
|
||||
this.options.noresults.call();
|
||||
}
|
||||
} else {
|
||||
// Re-populate the list of languages
|
||||
this.options.$target.empty();
|
||||
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;
|
||||
|
||||
var delay = ( function () {
|
||||
var timer = 0;
|
||||
return function ( callback, milliseconds ) {
|
||||
clearTimeout( timer );
|
||||
timer = setTimeout( callback, milliseconds );
|
||||
};
|
||||
} () );
|
||||
|
||||
} ( jQuery ) );
|
||||
Reference in New Issue
Block a user