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
2012-09-21 22:24:06 -07:00
parent 2ce74db801
commit 0781f022dd
18 changed files with 201 additions and 31 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,5 @@
 .*.swp
 *.kate-swp
 *.bak
+/node_modules
+/dist
--- a/examples/index-i18n.html
+++ b/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>
--- a/examples/resources/i18n/en.json
+++ b/examples/resources/i18n/en.json
@@ -0,0 +1,3 @@
+{
+"uls-example-title": "Universal Language Selector"
+}
--- a/examples/resources/i18n/ml.json
+++ b/examples/resources/i18n/ml.json
@@ -0,0 +1,3 @@
+{
+"uls-example-title": "ആഗോള ഭാഷാ സഹായി"
+}
--- a/examples/resources/jquery.i18n.min.js
+++ b/examples/resources/jquery.i18n.min.js
--- a/i18n/de.json
+++ b/i18n/de.json
@@ -0,0 +1,3 @@
+{
+"uls-select-language": "Wählen Sie eine Sprache"
+}
--- a/i18n/en.json
+++ b/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:"
+}
--- a/i18n/es.json
+++ b/i18n/es.json
@@ -0,0 +1,3 @@
+{
+"uls-select-language": "Seleccione el idioma"
+}
--- a/i18n/fi.json
+++ b/i18n/fi.json
@@ -0,0 +1,3 @@
+{
+"uls-select-language": "Valitse kieli"
+}
--- a/i18n/he.json
+++ b/i18n/he.json
@@ -0,0 +1,3 @@
+{
+"uls-select-language": "בחר את השפה"
+}
--- a/i18n/hi.json
+++ b/i18n/hi.json
@@ -0,0 +1,3 @@
+{
+"uls-select-language": "भाषा चुनें"
+}
--- a/i18n/ja.json
+++ b/i18n/ja.json
@@ -0,0 +1,3 @@
+{
+"uls-select-language": "言語を選択する"
+}
--- a/i18n/ml.json
+++ b/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 കോഡ്, ലിപിയുടെ പേര് എന്നിവ ഉപയോഗിച്ച് തിരയാം. അല്ലെങ്കിൽ ഈ മേഖലകളിൽ തിരയാം:"
+}
--- a/i18n/nl.json
+++ b/i18n/nl.json
@@ -0,0 +1,3 @@
+{
+"uls-select-language": "Selecteer taal"
+}
--- a/i18n/qqq.json
+++ b/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:"
+}
--- a/i18n/ta.json
+++ b/i18n/ta.json
@@ -0,0 +1,3 @@
+{
+"uls-select-language": "மொழி தேர்வு"
+}
--- a/src/jquery.uls.core.js
+++ b/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,7 +150,11 @@
 			this.$languageFilter.focus();
 		},

-		defaultSearch: function() {
+		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 ) );
--- a/src/jquery.uls.lcd.js
+++ b/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">\
-			No results found\
+		<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>' )
-						.addClass( 'eleven columns uls-lcd-region-section offset-by-one' )
-						.text( regions[regionCode] ) );
+				$sectionTitle = $( '<h3 data-i18n="uls-region-'+ regionCode+'">' )
+					.addClass( 'eleven columns uls-lcd-region-section offset-by-one' )
+					.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 );
 		},