bryce/jquery.uls
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Internationalize ULS

Browse Source 
* internationalize ULS when jquery.i18n is present. Otherwise use the
fallback English interface
* Example with and without i18n
* Message files for few languages
This commit is contained in:
Santhosh Thottingal
2012-09-21 22:24:06 -07:00
parent 2ce74db801
commit 0781f022dd
18 changed files with 201 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/jquery.uls.core.js
View File

@@ -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 ) );

61
src/jquery.uls.lcd.js
View File

@@ -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 );
},