Internationalize ULS

* internationalize ULS when jquery.i18n is present. Otherwise use the
fallback English interface
* Example with and without i18n
* Message files for few languages

.gitignore

@@ -2,3 +2,5 @@
 .*.swp
 *.kate-swp
 *.bak
+/node_modules
+/dist

examples/index-i18n.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+	<head>
+		<meta charset="utf-8"/>
+		<title>Universal Language Selector</title>
+		<meta name="author" content="Santhosh Thottingal"/>
+		<link href="../css/jquery.uls.css" rel="stylesheet"/>
+		<link href="../css/jquery.uls.grid.css" rel="stylesheet"/>
+		<link href="../css/jquery.uls.lcd.css" rel="stylesheet"/>
+		<!-- demo -->
+		<link href="resources/demo.css" rel="stylesheet"/>
+		<!-- Libs -->
+		<script src="resources/jquery.js"></script>
+		<!-- Source -->
+		<script src="../src/jquery.uls.data.js"></script>
+		<script src="../src/jquery.uls.data.utils.js"></script>
+		<script src="../src/jquery.uls.lcd.js"></script>
+		<script src="../src/jquery.uls.languagefilter.js"></script>
+		<script src="../src/jquery.uls.regionfilter.js"></script>
+		<script src="../src/jquery.uls.core.js"></script>
+		<script src="resources/jquery.i18n.min.js"></script>
+		<script>
+			$( document ).ready( function() {
+				var i18n = $.i18n( );
+				$( '.uls-trigger' ).uls( {
+					onSelect : function( language ) {
+						var languageName = $.uls.data.autonym( language );
+						$('a#pageLanguage').text( languageName );
+						i18n.locale = language;
+						// For ULS
+						i18n.load( '../i18n/' + language + '.json', language);
+						// For the web page
+						i18n.load( 'resources/i18n/' + language + '.json', language);
+						// re-i18n the elements
+						$( '.uls-menu' ).i18n();
+						$( '.navbar' ).i18n();
+					},
+					quickList: [ 'en', 'hi', 'he', 'ml', 'ta', 'fr' ]
+				} );
+			} );
+		</script>
+	</head>
+
+	<body>
+		<div class="navbar navbar-fixed-top">
+			<span class="active uls-trigger"> <a id="pageLanguage" href="#">Select Language</a> </span>
+			<h1 data-i18n="uls-example-title">Universal Language Selector</h1>
+			<p>
+				Demonstration of jquery plugin
+			</p>
+		</div>
+		<div class="container"></div>
+	</body>
+</html>

examples/resources/i18n/en.json

@@ -0,0 +1,3 @@
+{
+"uls-example-title": "Universal Language Selector"
+}

examples/resources/i18n/ml.json

@@ -0,0 +1,3 @@
+{
+"uls-example-title": "ആഗോള ഭാഷാ സഹായി"
+}

examples/resources/jquery.i18n.min.js

@@ -0,0 +1,4 @@
+/*! jquery.i18n - v0.1.0 - 2012-09-21
+* https://github.com/wikimedia/jquery.i18n
+* Copyright (c) 2012 Santhosh Thottingal; Licensed GPL, MIT */
+function pluralRuleParser(a,b){function q(){}function r(a){return function(){for(var b=0;b<a.length;b++){var c=a[b]();if(c!==null)return c}return null}}function s(a){var b=c,d=[];for(var e=0;e<a.length;e++){var f=a[e]();if(f===null)return c=b,null;d.push(f)}return d}function t(a,b){return function(){var d=c,e=[],f=b();while(f!==null)e.push(f),f=b();return e.length<a?(c=d,null):e}}function u(b){var d=b.length;return function(){var e=null;return a.substr(c,d)===b&&(e=b,c+=d),e}}function v(b){return function(){var d=a.substr(c).match(b);return d===null?null:(c+=d[0].length,d[0])}}function w(){var a=f();return a===null?(q(" -- failed n"),a):(a=parseInt(b,10),q(" -- passed n ",a),a)}function y(){var a=s([w,d,h,d,e]);return a===null?(q(" -- failed mod"),null):(q(" -- passed mod"),parseInt(a[0],10)%parseInt(a[4],10))}function z(){var a=s([d,j]);return a===null?(q(" -- failed not"),null):a[1]}function A(){var a=s([x,d,g,t(0,z),d,e]);return a!==null?(q(" -- passed is"),a[3][0]==="not"?a[0]!==parseInt(a[5],10):a[0]===parseInt(a[5],10)):(q(" -- failed is"),null)}function B(){var a=s([r([D,e]),t(0,C)]),b=[];return a!==null?(b=b.concat(a[0],a[1][0]),b):(q(" -- failed rangeList"),null)}function C(){var a=s([n,B]);return a!==null?a[1]:(q(" -- failed rangeTail"),null)}function D(){var a=s([e,m,e]);if(a!==null){q(" -- passed range");var b=[],c=parseInt(a[0],10),d=parseInt(a[2],10);for(i=c;i<=d;i++)b.push(i);return b}return q(" -- failed range"),null}function E(){var a=s([x,t(0,z),d,k,d,B]);if(a!==null){q(" -- passed _in");var b=a[5];for(var c=0;c<b.length;c++)if(parseInt(b[c],10)===a[0])return a[1][0]!=="not";return a[1][0]==="not"}return q(" -- failed _in "),null}function F(){var a=s([x,d,l,d,B]);if(a!==null){q(" -- passed within ");var b=a[4];return parseInt(b[0],10)<=a[0]&&a[0]<=parseInt(b[1],10)}return q(" -- failed within "),null}function H(){var a=s([G,d,p,d,J]);return a?(q(" -- passed and"),a[0]&&a[4]):(q(" -- failed and"),null)}function I(){var a=s([G,d,o,d,J]);return a?(q(" -- passed or"),a[0]||a[4]):(q(" -- failed or"),null)}function K(a){return parseFloat(a)%1===0}function L(){if(!K(b))return!1;var a=J();return a}var c=0,d=v(/^\s+/),e=v(/^\d+/),f=u("n"),g=u("is"),h=u("mod"),j=u("not"),k=u("in"),l=u("within"),m=u(".."),n=u(","),o=u("or"),p=u("and");q("pluralRuleParser",a,b);var x=r([y,w]),G=r([A,E,F]),J=r([H,I,G]),M=L();return M!==null&&c===a.length,M}(function(a,b,c){"use strict";var d=function(b){this.options=a.extend({},a.i18n.defaults,b),this.parser=this.options.parser,this.messageStore=this.options.messageStore,this.languages={},this.locale=this.options.locale,this.init()};d.prototype={init:function(){var b=this;this.messageStore.init(this.locale),String.prototype.toLocaleString=function(){var c=this.valueOf(),d=b.locale,e=0;while(d){var f=d.toLowerCase().split("-"),g=f.length;do{var h=f.slice(0,g).join("-");!b.messageStore.messages[h]&&b.options.messageLocationResolver&&b.messageStore.load(b.options.messageLocationResolver(h),h);var i=b.messageStore.get(h,c);if(i)return i;g--}while(g);if(d==="en")break;d=a.i18n.fallbacks[b.locale]&&a.i18n.fallbacks[b.locale][e]||b.options.fallbackLocale,b.log("Trying fallback locale for "+b.locale+": "+d),e++}return c},String.locale=this.locale},destroy:function(){a("body").data("i18n",null)},load:function(a,b){this.messageStore.load(a,b)},log:function(){var d=b.console!==c;d&&a.i18n.debug&&b.console.log.apply(b.console,arguments)},parse:function(b,c){var d=b.toLocaleString();return this.parser.language=a.i18n.languages[a.i18n().locale]||a.i18n.languages["default"],this.parser.parse(d,c)}},String.locale=String.locale||a("html").attr("lang");if(!String.locale)if(typeof b.navigator!==c){var e=b.navigator;String.locale=e.language||e.userLanguage||""}else String.locale="";a.i18n=function(b,e){var f=[],g=a("body").data("i18n"),h=typeof b=="object"&&b;return h&&h.locale&&g&&g.locale!==h.locale&&(String.locale=g.locale=h.locale),g||(a("body").data("i18n",g=new d(h)),a("[data-i18n]").each(function(b){var c=a(this);if(c.data("i18n")){var d=c.data("i18n"),e=a.i18n(d);e!==d&&c.text(e)}})),b?(e!==c&&(f=a.makeArray(arguments),f.shift()),typeof b=="string"?g.parse(b,f):g):g},a.fn.i18n=function(b){return this.each(function(){var b=a(this);if(b.data("i18n")){var c=b.data("i18n"),d=a.i18n(c);d!==c&&b.text(d)}else b.find("[data-i18n]").i18n()})};var f={parse:function(a,b){return a.replace(/\$(\d+)/g,function(a,d){var e=parseInt(d,10)-1;return b[e]!==c?b[e]:"$"+d})}};a.i18n.languages={},a.i18n.messageStore=a.i18n.messageStore||{},a.i18n.parser=f,a.i18n.parser.emitter={},a.i18n.debug=!1,a.i18n.defaults={locale:String.locale,fallbackLocale:"en",parser:a.i18n.parser,messageStore:a.i18n.messageStore,messageLocationResolver:null},a.i18n.Constructor=d,b._=b._||a.i18n})(jQuery,window),function(a,b,c){"use strict";var d=function(){this.messages={},this.sources={},this.locale=String.locale};d.prototype={init:function(b){this.locale=b;var c=this,d=a("link"),e=d.length;this.log("initializing for "+b);whLine truncated

i18n/de.json

@@ -0,0 +1,3 @@
+{
+"uls-select-language": "Wählen Sie eine Sprache"
+}

i18n/en.json

@@ -0,0 +1,20 @@
+{
+"@metadata": {
+	"author": "Santhosh Thottingal <santhosh.thottingal@gmail.com>",
+	"last-updated": "2012 Septmber 21",
+	"locale": "en",
+	"message-documentation": "qqq"
+},
+"uls-select-language": "Select Language",
+"uls-region-WW": "Worldwide",
+"uls-region-AM": "America",
+"uls-region-AF": "Africa",
+"uls-region-EU": "Europe",
+"uls-region-AS": "Asia",
+"uls-region-ME": "Middle East",
+"uls-region-PA": "Pacific",
+"uls-no-results-found": "No results found",
+"uls-common-languages": "Common languages",
+"uls-no-results-suggestion-title": "You may be interested in:", 
+"uls-search-help": "You can search by language name, script name, ISO code of language or you can browse by region:"
+}

i18n/es.json

@@ -0,0 +1,3 @@
+{
+"uls-select-language": "Seleccione el idioma"
+}

i18n/fi.json

@@ -0,0 +1,3 @@
+{
+"uls-select-language": "Valitse kieli"
+}

i18n/he.json

@@ -0,0 +1,3 @@
+{
+"uls-select-language": "בחר את השפה"
+}

i18n/hi.json

@@ -0,0 +1,3 @@
+{
+"uls-select-language": "भाषा चुनें"
+}

i18n/ja.json

@@ -0,0 +1,3 @@
+{
+"uls-select-language": "言語を選択する"
+}

i18n/ml.json

@@ -0,0 +1,14 @@
+{
+"uls-select-language": "ഭാഷ തിരഞ്ഞെടുക്കുക",
+"uls-region-WW": "ആഗോള ഭാഷകൾ",
+"uls-region-AM": "അമേരിക്ക",
+"uls-region-AF": "ആഫ്രിക്ക",
+"uls-region-EU": "യൂറോപ്പ്",
+"uls-region-AS": "ഏഷ്യ",
+"uls-region-ME": "മദ്ധ്യപൂർവേഷ്യ",
+"uls-region-PA": "പസഫിക്",
+"uls-no-results-found": "ഒന്നും കണ്ടെത്താനായില്ല",
+"uls-common-languages": "സാധാരണ ഭാഷകൾ",
+"uls-no-results-suggestion-title": "ഒരു പക്ഷേ ഇതായിരിക്കും നിങ്ങൾ തിരഞ്ഞത്:", 
+"uls-search-help": "നിങ്ങൾക്ക് ഭാഷയുടെ പേര്, ISO 639 കോഡ്, ലിപിയുടെ പേര് എന്നിവ ഉപയോഗിച്ച് തിരയാം. അല്ലെങ്കിൽ ഈ മേഖലകളിൽ തിരയാം:"
+}

i18n/nl.json

@@ -0,0 +1,3 @@
+{
+"uls-select-language": "Selecteer taal"
+}

i18n/qqq.json

@@ -0,0 +1,19 @@
+{
+"@metadata": {
+	"author": "Santhosh Thottingal <santhosh.thottingal@gmail.com>",
+	"last-updated": "2012 Septmber 21",
+	"locale": "qqq"
+},
+"uls-select-language": "Language Selector Title",
+"uls-region-WW": "Label for worldwide languages. They are languages spoken in multiple countries. Eg: English, French, Spanish etc. This lable is used in the map region of ULS and as the title of section showing worldwide languages. Translation should not be descriptive.",
+"uls-region-AM": "America",
+"uls-region-AF": "Africa",
+"uls-region-EU": "Europe",
+"uls-region-AS": "Asia",
+"uls-region-ME": "Middle East",
+"uls-region-PA": "Pacific",
+"uls-no-results-found": "No results found",
+"uls-common-languages": "Common languages",
+"uls-no-results-suggestion-title": "You may be interested in:", 
+"uls-search-help": "You can search by language name, script name, ISO code of language or you can browse by region:"
+}

i18n/ta.json

@@ -0,0 +1,3 @@
+{
+"uls-select-language": "மொழி தேர்வு"
+}

src/jquery.uls.core.js

@@ -29,26 +29,27 @@
 			</div> \
 			<div class="row"> \
 				<div class="uls-title four columns">\
-					<h1>Select language</h1>\
+					<h1 data-i18n="uls-select-language">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>\
+							<a data-i18n="uls-region-WW">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>\
+									<a data-i18n="uls-region-AM">America</a>\
 								</div>\
 								<div data-regiongroup="3" id="uls-region-3" class="four columns uls-region">\
-									<a>Europe <br> Middle East <br> Africa\
-									</a>\
+									<a><span data-i18n="uls-region-EU">Europe</span><br>\
+									<span data-i18n="uls-region-ME">Middle East</span><br>\
+									<span data-i18n="uls-region-AF">Africa</span></a>\
 								</div>\
 								<div data-regiongroup="4" id="uls-region-4" class="four columns uls-region">\
-									<a>Asia <br> Pacific\
-									</a>\
+									<a><span data-i18n="uls-region-AS">Asia</span><br>\
+									<span data-i18n="uls-region-PA">Pacific</span></a>\
 								</div>\
 							</div>\
 						</div>\
@@ -138,6 +139,7 @@
 
 			if ( !this.initialized ) {
 				$( 'body' ).prepend( this.$menu );
+				this.i18n();
 				// Initialize with a full search.
 				// This happens on first time click of uls trigger.
 				this.defaultSearch();
@@ -148,6 +150,10 @@
 			this.$languageFilter.focus();
 		},
 
+		i18n: function() {
+			this.$element.find( '[data-i18n]' ).i18n();
+		},
+
 		defaultSearch: function () {
 			this.$resultsView.lcd( 'empty' );
 			this.$regionFilters.first().regionselector( 'show' );
@@ -315,6 +321,12 @@
 		quickList: null // Array of language codes of function that returns such
 	};
 
+	//  Define a dummy i18n function, if jquery.i18n not integrated.
+	if( !$.fn.i18n ) {
+		$.fn.i18n = function( option ) {
+		};
+	}
+	
 	$.fn.uls.Constructor = ULS;
 
 } ( jQuery ) );

src/jquery.uls.lcd.js

@@ -25,21 +25,22 @@
 
 	var noResultsTemplate = '\
 	<div class="twelve columns uls-no-results-view">\
-		<h2 class="eleven columns end offset-by-one">\
+		<h2 data-i18n="uls-no-results-found" 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>.\
+					<span data-i18n="uls-search-help">You can search by language name, \
+					script name, ISO code of language or \
+					you can browse by region:</span>\
+					<a class="uls-region-link" data-i18n="uls-region-AM" data-region="AM" href="#">America</a>, \
+					<a class="uls-region-link" data-i18n="uls-region-EU" data-region="EU" href="#">Europe</a>, \
+					<a class="uls-region-link" data-i18n="uls-region-ME" data-region="ME" href="#">Middle East</a>, \
+					<a class="uls-region-link" data-i18n="uls-region-AF" data-region="AF" href="#">Africa</a>, \
+					<a class="uls-region-link" data-i18n="uls-region-AS" data-region="AS" href="#">Asia</a>, \
+					<a class="uls-region-link" data-i18n="uls-region-PA" data-region="PA" href="#">Pacific</a>, \
+					<a class="uls-region-link" data-i18n="uls-region-WW" data-region="WW" href="#">Worldwide</a>.\
 				</p>\
 			</div>\
 		</div>\
@@ -149,7 +150,9 @@
 
 		render: function() {
 			var that = this;
-			var regions = { // FIXME Remove this when i18n is in place.
+			var $section, $sectionTitle;
+			var regions = {
+				// These are fallback text when i18n library not present
 				WW: 'Worldwide',
 				AM: 'America',
 				EU: 'Europe',
@@ -158,17 +161,22 @@
 				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>' )
+				$sectionTitle = $( '<h3 data-i18n="uls-region-'+ regionCode+'">' )
 					.addClass( 'eleven columns uls-lcd-region-section offset-by-one' )
-						.text( regions[regionCode] ) );
+					.text( regions[regionCode] );
+				$section.append( $sectionTitle );
 				that.$element.append( $section );
 				$section.hide();
 				that.regionDivs[regionCode] = $section;
 			} );
 			this.$noResults.hide();
+			this.i18n();
+		},
+
+		i18n: function( ) {
+			this.$element.find( '[data-i18n]' ).i18n();
 		},
 
 		quicklist: function() {
@@ -184,10 +192,13 @@
 			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;
+			var $quickListSection = $( '<div>' ).addClass( 'twelve columns uls-lcd-region-section' ).prop( 'id', 'uls-lcd-quicklist' );
+			var $quickListSectionTitle = $( '<h3 data-i18n="uls-common-languages">' )
+				.addClass( 'eleven columns uls-lcd-region-section offset-by-one' )
+				.text( 'Common languages' ); // This is placeholder text if jquery.i18n not present
+			$quickListSection.append( $quickListSectionTitle );
+			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];
@@ -200,8 +211,9 @@
 					);
 				$column.append( $li );
 			}
-			$quickListsection.show();
-			return $quickListsection;
+			$quickListSection.show();
+			$quickListSectionTitle.i18n();
+			return $quickListSection;
 		},
 
 		show: function() {
@@ -222,7 +234,10 @@
 		noResults: function() {
 			this.$noResults.show();
 			var $suggestions = this.quicklist();
-			$suggestions.find( 'h3' ).text( 'You may be interested in' );
+			$suggestions.find( 'h3' )
+				.data( 'i18n', 'uls-no-results-suggestion-title' )
+				.text( "You may be interested in:" )
+				.i18n();
 			this.$noResults.find( 'h2' ).after( $suggestions );
 		},