Update upstream jquery.uls to 10777bb

* Don't show region headings in narrow mode.
* Remove the map.

GitHub link: 10777bb25e

Change-Id: I4fcfba5a6ef46d0bda34331c6ea111cdedd157a7
This commit is contained in:
Amir E. Aharoni
2014-12-22 09:28:39 +02:00
committed by Amire80
parent 0d98108f42
commit 1acaf1515f
10 changed files with 154 additions and 326 deletions

View File

@@ -1,7 +1,5 @@
.uls-compact .uls-icon-close, .uls-compact .uls-icon-close,
.uls-compact .uls-title-region, .uls-compact .uls-title-region {
.uls-compact .uls-map-block,
.uls-compact #uls-settings-block {
display: none !important; display: none !important;
} }

View File

@@ -7,7 +7,6 @@
background-image: linear-gradient(transparent, transparent), url('../images/icon-language.svg'); background-image: linear-gradient(transparent, transparent), url('../images/icon-language.svg');
padding-left: 30px; padding-left: 30px;
} }
.uls-menu { .uls-menu {
position: absolute; position: absolute;
z-index: 1000; z-index: 1000;
@@ -25,7 +24,6 @@
-moz-background-clip: padding; -moz-background-clip: padding;
background-clip: padding-box; background-clip: padding-box;
} }
.uls-wide { .uls-wide {
min-width: 715px; min-width: 715px;
width: 45%; width: 45%;
@@ -54,18 +52,14 @@
.uls-title-region a { .uls-title-region a {
padding-left: 15px; padding-left: 15px;
} }
.uls-menu .uls-title { .uls-menu .uls-title {
font-weight: normal; font-weight: normal;
border: none; border: none;
padding-top: 1.25em;
padding-left: 15px; padding-left: 15px;
padding-bottom: 3px;
font-size: 18pt; font-size: 18pt;
line-height: 1.25em; line-height: 1.25em;
color: #555; color: #555;
} }
.uls-menu .uls-no-results-found-title { .uls-menu .uls-no-results-found-title {
font-size: 16pt; font-size: 16pt;
font-weight: bold; font-weight: bold;
@@ -77,7 +71,6 @@
border-bottom: none; border-bottom: none;
color: #555; color: #555;
} }
.uls-menu .uls-lcd-region-section .uls-lcd-region-title { .uls-menu .uls-lcd-region-section .uls-lcd-region-title {
color: #777; color: #777;
font-size: 14pt; font-size: 14pt;
@@ -88,17 +81,6 @@
margin-bottom: 10px; margin-bottom: 10px;
border-bottom: none; border-bottom: none;
} }
.uls-worldmap {
/* @embed */
background: transparent url('../images/world_map.png') no-repeat scroll right top;
/* @embed */
background-image: -webkit-linear-gradient(transparent, transparent), url('../images/world_map.svg');
/* @embed */
background-image: linear-gradient(transparent, transparent), url('../images/world_map.svg');
background-size: 100%;
}
div.uls-region { div.uls-region {
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
@@ -109,11 +91,6 @@ div.uls-region {
border-bottom-width: 2px; border-bottom-width: 2px;
} }
.uls-worldmap .uls-region { /* The map doesn't flip */
/* @noflip */
float: left;
}
.uls-region a { .uls-region a {
bottom: 2px; bottom: 2px;
left: 2px; left: 2px;
@@ -127,59 +104,6 @@ div.uls-region {
width: 99%; width: 99%;
} }
.uls-region:hover {
/*Cross-browser background transparency*/
background: #3366bb;
background: rgba(51, 102, 187, 0.1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#253366bb, endColorstr=#253366bb );
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#253366bb, endColorstr=#253366bb)";
}
.uls-map-block .active {
border-bottom-color: #3366bb;
border-bottom-style: solid;
}
.uls-menu .row .uls-map-block {
top: 1px;
margin-right: 0;
padding-right: 0;
float: right;
overflow: hidden;
opacity: 0.7;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.uls-map-block a {
color: #333;
opacity: 0;
-moz-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
-webkit-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
}
.uls-menu .uls-map-block:hover,
.uls-menu .uls-map-block:hover a {
opacity: 1;
color: #333;
}
.uls-map-block .uls-region-1 {
border-color: transparent;
}
.uls-map-block:hover .active {
border-color: #3366bb;
}
.uls-map-block .active a {
font-weight: bold;
}
.uls-icon-close { .uls-icon-close {
/* @embed */ /* @embed */
background: transparent url('../images/close.png') no-repeat scroll center center; background: transparent url('../images/close.png') no-repeat scroll center center;
@@ -205,11 +129,9 @@ div.uls-region {
-webkit-transition: border 0.15s linear 0s; -webkit-transition: border 0.15s linear 0s;
transition: border 0.15s linear 0s; transition: border 0.15s linear 0s;
} }
.uls-menu .uls-languagefilter:focus { .uls-menu .uls-languagefilter:focus {
border: 1px solid #3366bb; border: 1px solid #3366bb;
} }
.uls-menu .uls-search { .uls-menu .uls-search {
position: relative; position: relative;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F0F0F0', endColorstr='#FBFBFB'); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F0F0F0', endColorstr='#FBFBFB');
@@ -227,7 +149,6 @@ div.uls-region {
border-bottom-style: solid; border-bottom-style: solid;
border-bottom-color: #DDD; border-bottom-color: #DDD;
} }
.uls-menu .uls-search-label { .uls-menu .uls-search-label {
/* @embed */ /* @embed */
background: transparent url('../images/search.png') no-repeat scroll right center; background: transparent url('../images/search.png') no-repeat scroll right center;
@@ -242,7 +163,7 @@ div.uls-region {
} }
.uls-menu.uls-narrow .uls-search-label { .uls-menu.uls-narrow .uls-search-label {
background-size: 20px; background-size: 18px;
} }
.uls-menu .uls-languagefilter-clear { .uls-menu .uls-languagefilter-clear {
@@ -258,7 +179,6 @@ div.uls-region {
width: 32px; width: 32px;
margin-left: -32px; margin-left: -32px;
} }
.uls-menu .uls-filterinput { .uls-menu .uls-filterinput {
position: absolute; position: absolute;
top: 0; top: 0;
@@ -268,7 +188,6 @@ div.uls-region {
width: 100%; width: 100%;
text-align: left; text-align: left;
} }
.uls-menu .uls-filtersuggestion { .uls-menu .uls-filtersuggestion {
padding: 6px; padding: 6px;
background-color: white; background-color: white;
@@ -278,7 +197,6 @@ div.uls-region {
box-shadow: 0 1px 2px transparent inset; box-shadow: 0 1px 2px transparent inset;
left: 1px; left: 1px;
} }
.uls-menu .uls-search-input-block { .uls-menu .uls-search-input-block {
position: relative; position: relative;
} }

View File

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

View File

@@ -18,6 +18,6 @@
"uls-no-results-found": "Title text for 'No results found' section", "uls-no-results-found": "Title text for 'No results found' section",
"uls-common-languages": "The ULS tries to guess the langugages that the user is most likely to pick. They are taken from geolocation (languages of the current country according to the IP address), previously selected languages, and the browser's accept-language. The list of these languages appears at the top of the ULS languages list, above the geographical regions. This is the title of that list.", "uls-common-languages": "The ULS tries to guess the langugages that the user is most likely to pick. They are taken from geolocation (languages of the current country according to the IP address), previously selected languages, and the browser's accept-language. The list of these languages appears at the top of the ULS languages list, above the geographical regions. This is the title of that list.",
"uls-no-results-suggestion-title": "Title for language suggestion in 'no results found' screen", "uls-no-results-suggestion-title": "Title for language suggestion in 'no results found' screen",
"uls-search-help": "Help text for searching. After this text, there will be a set of links for regions.\n\n\"Script name\" is a name of a writing system, such as \"Latin\", \"Cyrillic\", \"Arabic\" etc.", "uls-search-help": "Help text for searching.\n\n\"Script name\" is a name of a writing system, such as \"Latin\", \"Cyrillic\", \"Arabic\" etc.",
"uls-search-placeholder": "Placeholder text in search box" "uls-search-placeholder": "Placeholder text in search box"
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 19 KiB

View File

@@ -28,34 +28,9 @@
template = '<div class="grid uls-menu"> \ template = '<div class="grid uls-menu"> \
<div class="row"> \ <div class="row"> \
<span id="uls-close" class="uls-icon-close"></span> \ <span id="uls-close" class="uls-icon-close"></span> \
</div> \
<div class="row"> \
<div class="uls-title-region seven columns">\ <div class="uls-title-region seven columns">\
<h1 data-i18n="uls-select-language" class="uls-title">Select Language</h1>\ <h1 data-i18n="uls-select-language" class="uls-title">Select Language</h1>\
</div>\ </div>\
<div class="five columns uls-map-block" id="uls-map-block">\
<div class="row">\
<div data-regiongroup="1" id="uls-region-1" class="three columns uls-region uls-region-1">\
<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 data-i18n="uls-region-AM">America</a>\
</div>\
<div data-regiongroup="3" id="uls-region-3" class="four columns uls-region">\
<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><span data-i18n="uls-region-AS">Asia</span><br>\
<span data-i18n="uls-region-PA">Pacific</span></a>\
</div>\
</div>\
</div>\
</div>\
</div>\
</div>\ </div>\
<div id="search" class="row uls-search"> \ <div id="search" class="row uls-search"> \
<div class="one column">\ <div class="one column">\
@@ -88,9 +63,9 @@
this.languages = this.options.languages; this.languages = this.options.languages;
for ( var code in this.languages ) { for ( var code in this.languages ) {
if ( $.uls.data.languages[code] === undefined ) { if ( $.uls.data.languages[ code ] === undefined ) {
// Language is unknown to ULS. // Language is unknown to ULS.
delete this.languages[code]; delete this.languages[ code ];
} }
} }
@@ -100,7 +75,6 @@
this.initialized = false; this.initialized = false;
this.$languageFilter = this.$menu.find( '#uls-languagefilter' ); this.$languageFilter = this.$menu.find( '#uls-languagefilter' );
this.$regionFilters = this.$menu.find( '.uls-region' );
this.$resultsView = this.$menu.find( 'div.uls-language-list' ); this.$resultsView = this.$menu.find( 'div.uls-language-list' );
this.render(); this.render();
@@ -147,7 +121,7 @@
var pos; var pos;
pos = $.extend( {}, this.$element.offset(), { pos = $.extend( {}, this.$element.offset(), {
height: this.$element[0].offsetHeight height: this.$element[ 0 ].offsetHeight
} ); } );
return { return {
@@ -166,7 +140,7 @@
narrow: 'uls-narrow' narrow: 'uls-narrow'
}; };
this.$menu.addClass( widthClasses[this.options.menuWidth] ); this.$menu.addClass( widthClasses[this.getMenuWidth()] );
this.$menu.css( this.position() ); this.$menu.css( this.position() );
if ( this.options.compact ) { if ( this.options.compact ) {
@@ -176,11 +150,6 @@
if ( !this.initialized ) { if ( !this.initialized ) {
$( 'body' ).prepend( this.$menu ); $( 'body' ).prepend( this.$menu );
this.i18n(); this.i18n();
// Initialize with a full search.
// This happens on first time click of uls trigger.
this.defaultSearch();
this.initialized = true; this.initialized = true;
} }
@@ -205,12 +174,6 @@
} }
}, },
defaultSearch: function () {
this.$resultsView.lcd( 'empty' );
this.$regionFilters.regionselector( 'show' );
},
/** /**
* Hide the ULS window * Hide the ULS window
*/ */
@@ -231,7 +194,6 @@
* Callback for no results found context. * Callback for no results found context.
*/ */
noresults: function () { noresults: function () {
$( '.regionselector' ).removeClass( 'active' );
this.$resultsView.lcd( 'noResults' ); this.$resultsView.lcd( 'noResults' );
}, },
@@ -239,10 +201,10 @@
* callback for results found context. * callback for results found context.
*/ */
success: function () { success: function () {
$( '.regionselector' ).removeClass( 'active' );
this.$resultsView.show(); this.$resultsView.show();
}, },
/**
/** /**
* Bind the UI elements with their event listeners * Bind the UI elements with their event listeners
*/ */
@@ -259,10 +221,6 @@
// Register all event listeners to the ULS here. // Register all event listeners to the ULS here.
this.$element.on( 'click', $.proxy( this.click, this ) ); this.$element.on( 'click', $.proxy( this.click, this ) );
this.$languageFilter.on( 'searchclear.uls', $.proxy( this.defaultSearch, this ) );
this.$languageFilter.on( 'noresults.uls', $.proxy( this.noresults, this ) );
this.$languageFilter.on( 'resultsfound.uls', $.proxy( this.success, this ) );
// Close when clicking on the close button // Close when clicking on the close button
this.$menu.find( '#uls-close' ).on( 'click', $.proxy( this.cancel, this ) ); this.$menu.find( '#uls-close' ).on( 'click', $.proxy( this.cancel, this ) );
// Don't do anything if pressing on empty space in the ULS // Don't do anything if pressing on empty space in the ULS
@@ -280,7 +238,7 @@
lcd = this.$resultsView.lcd( { lcd = this.$resultsView.lcd( {
languages: this.languages, languages: this.languages,
columns: columnsOptions[this.options.menuWidth], columns: columnsOptions[ this.getMenuWidth() ],
quickList: this.options.quickList, quickList: this.options.quickList,
clickhandler: $.proxy( this.select, this ), clickhandler: $.proxy( this.select, this ),
source: this.$languageFilter, source: this.$languageFilter,
@@ -296,7 +254,7 @@
} ); } );
// Create region selectors, one per region // Create region selectors, one per region
this.$menu.find( '.uls-region, .uls-region-link' ).regionselector( { this.regionFilter = new $.uls.RegionSelector( {
$target: lcd, $target: lcd,
languages: this.languages, languages: this.languages,
success: function ( regionfilter ) { success: function ( regionfilter ) {
@@ -316,6 +274,10 @@
} }
} ); } );
this.$languageFilter.on( 'searchclear.uls', $.proxy( this.regionFilter.show, this.regionFilter ) );
this.$languageFilter.on( 'noresults.uls', $.proxy( this.noresults, this ) );
this.$languageFilter.on( 'resultsfound.uls', $.proxy( this.success, this ) );
$( 'html' ).click( $.proxy( this.cancel, this ) ); $( 'html' ).click( $.proxy( this.cancel, this ) );
}, },
@@ -382,12 +344,36 @@
if ( !isSupported ) { if ( !isSupported ) {
this.$element.setAttribute( eventName, 'return;' ); this.$element.setAttribute( eventName, 'return;' );
isSupported = typeof this.$element[eventName] === 'function'; isSupported = typeof this.$element[ eventName ] === 'function';
} }
return isSupported; return isSupported;
}, },
/**
* Get the panel menu width parameter
* @return string
*/
getMenuWidth: function () {
var languagesCount;
if ( this.options.menuWidth ) {
return this.options.menuWidth;
}
languagesCount = Object.keys( this.options.languages ).length;
if ( languagesCount < 12 ) {
return 'narrow';
}
if ( languagesCount < 100 ) {
return 'medium';
}
return 'wide';
},
isMobile: function () { isMobile: function () {
return navigator.userAgent.match( /(iPhone|iPod|iPad|Android|BlackBerry)/ ); return navigator.userAgent.match( /(iPhone|iPod|iPad|Android|BlackBerry)/ );
} }
@@ -407,7 +393,7 @@
} }
if ( typeof option === 'string' ) { if ( typeof option === 'string' ) {
data[option](); data[ option ]();
} }
} ); } );
}; };
@@ -418,7 +404,9 @@
languages: $.uls.data.getAutonyms(), // Languages to be used for ULS, default is all languages languages: $.uls.data.getAutonyms(), // Languages to be used for ULS, default is all languages
quickList: null, // Array of language codes or function that returns such quickList: null, // Array of language codes or function that returns such
compact: false, // Show ULS in compact mode compact: false, // Show ULS in compact mode
menuWidth: 'wide', // The options are wide (4 columns), medium (2 columns), and narrow (1 column) // The options are wide (4 columns), medium (2 columns), and narrow (1 column).
// If not specified, it will be set automatically.
menuWidth: null,
showRegions: [ 'WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA' ], showRegions: [ 'WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA' ],
languageDecorator: null // Callback function to be called when a language link is prepared - for custom decoration. languageDecorator: null // Callback function to be called when a language link is prepared - for custom decoration.
}; };

View File

@@ -29,7 +29,7 @@
LanguageFilter = function( element, options ) { LanguageFilter = function( element, options ) {
this.$element = $( element ); this.$element = $( element );
this.options = $.extend( {}, $.fn.regionselector.defaults, options ); this.options = $.extend( {}, $.fn.languagefilter.defaults, options );
this.$element.addClass( 'languagefilter' ); this.$element.addClass( 'languagefilter' );
this.resultCount = 0; this.resultCount = 0;
this.$suggestion = this.$element.parents().find( '#' + this.$element.data( 'suggestion' ) ); this.$suggestion = this.$element.parents().find( '#' + this.$element.data( 'suggestion' ) );

View File

@@ -34,14 +34,7 @@
<p>\ <p>\
<span data-i18n="uls-search-help">You can search by language name, \ <span data-i18n="uls-search-help">You can search by language name, \
script name, ISO code of language or \ script name, ISO code of language or \
you can browse by region:</span>\ you can browse by region.</span>\
<a class="uls-region-link" data-i18n="uls-region-AM" data-region="AM">America</a>, \
<a class="uls-region-link" data-i18n="uls-region-EU" data-region="EU">Europe</a>, \
<a class="uls-region-link" data-i18n="uls-region-ME" data-region="ME">Middle East</a>, \
<a class="uls-region-link" data-i18n="uls-region-AF" data-region="AF">Africa</a>, \
<a class="uls-region-link" data-i18n="uls-region-AS" data-region="AS">Asia</a>, \
<a class="uls-region-link" data-i18n="uls-region-PA" data-region="PA">Pacific</a>, \
<a class="uls-region-link" data-i18n="uls-region-WW" data-region="WW">Worldwide</a>.\
</p>\ </p>\
</div>\ </div>\
</div>\ </div>\
@@ -73,26 +66,38 @@
* @return {bool} Whether the language was added. * @return {bool} Whether the language was added.
*/ */
append: function ( langCode, regionCode ) { append: function ( langCode, regionCode ) {
var lcd = this, i, regions; var lcd = this,
i, regions;
if ( !this.options.languages[langCode] ) { if ( !this.options.languages[ langCode ] ) {
// Language is unknown or not in the list of languages for this context. // Language is unknown or not in the list of languages for this context.
return false; return false;
} }
if ( regionCode ) { // Show everything in one region when there is only one column
regions = [regionCode]; if ( lcd.options.columns === 1 ) {
regions = [ 'WW' ];
// Languages are expected to be repeated in this case,
// and we only want to show them once
if ( $.inArray( langCode, this.regionLanguages.WW ) > -1 ) {
return true;
}
} else { } else {
regions = $.uls.data.getRegions( langCode ); if ( regionCode ) {
regions = [ regionCode ];
} else {
regions = $.uls.data.getRegions( langCode );
}
} }
// Worldwides only displayed once // Worldwides only displayed once
if ( $.inArray( 'WW', regions ) > -1 ) { if ( $.inArray( 'WW', regions ) > -1 ) {
regions = ['WW']; regions = [ 'WW' ];
} }
for ( i = 0; i < regions.length; i++ ) { for ( i = 0; i < regions.length; i++ ) {
this.regionLanguages[regions[i]].push( langCode ); this.regionLanguages[ regions[ i ] ].push( langCode );
} }
// Work around the bad interface, delay rendering until we have got // Work around the bad interface, delay rendering until we have got
@@ -124,7 +129,8 @@
regions.push( this.buildQuicklist() ); regions.push( this.buildQuicklist() );
$.each( $.uls.data.regiongroups, function ( regionCode ) { $.each( $.uls.data.regiongroups, function ( regionCode ) {
lcd.regionLanguages[regionCode] = []; lcd.regionLanguages[ regionCode ] = [];
// Don't show the region unless it was enabled // Don't show the region unless it was enabled
if ( $.inArray( regionCode, lcd.options.showRegions ) === -1 ) { if ( $.inArray( regionCode, lcd.options.showRegions ) === -1 ) {
return; return;
@@ -132,13 +138,16 @@
$section = $( '<div>' ) $section = $( '<div>' )
.addClass( 'eleven columns offset-by-one uls-lcd-region-section hide' ) .addClass( 'eleven columns offset-by-one uls-lcd-region-section hide' )
.attr( 'id', regionCode ) .attr( 'id', regionCode );
.append(
$( '<h3>' ) // Show a region heading, unless we are using a narrow ULS
if ( lcd.options.columns !== 1 ) {
$section.append( $( '<h3>' )
.attr( 'data-i18n', 'uls-region-' + regionCode ) .attr( 'data-i18n', 'uls-region-' + regionCode )
.addClass( 'eleven columns uls-lcd-region-title' ) .addClass( 'eleven columns uls-lcd-region-title' )
.text( regionNames[regionCode] ) .text( regionNames[ regionCode ] )
); );
}
regions.push( $section ); regions.push( $section );
} ); } );
@@ -166,7 +175,7 @@
$region.children( '.uls-language-block' ).remove(); $region.children( '.uls-language-block' ).remove();
languages = lcd.regionLanguages[regionCode]; languages = lcd.regionLanguages[ regionCode ];
if ( !languages || languages.length === 0 ) { if ( !languages || languages.length === 0 ) {
$region.addClass( 'hide' ); $region.addClass( 'hide' );
return; return;
@@ -180,7 +189,7 @@
); );
$region.removeClass( 'hide' ); $region.removeClass( 'hide' );
lcd.regionLanguages[regionCode] = []; lcd.regionLanguages[ regionCode ] = [];
} ); } );
}, },
@@ -192,9 +201,9 @@
* @param {number} itemsPerColumn How many languages fit in a column. * @param {number} itemsPerColumn How many languages fit in a column.
* @param {number} columnsPerRow How many columns fit in a row. * @param {number} columnsPerRow How many columns fit in a row.
*/ */
renderRegion: function( $region, languages, itemsPerColumn, columnsPerRow ) { renderRegion: function ( $region, languages, itemsPerColumn, columnsPerRow ) {
var columnsClasses, i, lastItem, currentScript, nextScript, force, var columnsClasses, i, lastItem, currentScript, nextScript, force,
len = languages.length, languagesCount = languages.length,
items = [], items = [],
columns = [], columns = [],
rows = []; rows = [];
@@ -207,27 +216,39 @@
columnsClasses = 'three columns'; columnsClasses = 'three columns';
} }
for ( i = 0; i < len; i++ ) { if ( this.options.columns === 1 ) {
force = false; // For one-column narrow ULS, just render all the languages
nextScript = $.uls.data.getScriptGroupOfLanguage( languages[i+1] ); // in one simple list without separators or script groups
for ( i = 0; i < languagesCount; i++ ) {
lastItem = len - i === 1; items.push( this.renderItem( languages[ i ] ) );
// Force column break if script changes and column has more than one row already
if ( i === 0 ) {
currentScript = $.uls.data.getScriptGroupOfLanguage( languages[i] );
} else if ( currentScript !== nextScript && items.length > 1 ) {
force = true;
} }
currentScript = nextScript;
items.push( this.renderItem( languages[i] ) ); columns.push( $( '<ul>' ).addClass( columnsClasses ).append( items ) );
rows.push( $( '<div>' ).addClass( 'row uls-language-block' ).append( columns ) );
} else {
// For medium and wide ULS, clever column placement
for ( i = 0; i < languagesCount; i++ ) {
force = false;
nextScript = $.uls.data.getScriptGroupOfLanguage( languages[ i + 1 ] );
if ( items.length >= itemsPerColumn || lastItem || force ) { lastItem = languagesCount - i === 1;
columns.push( $( '<ul>' ).addClass( columnsClasses ).append( items ) ); // Force column break if script changes and column has more than one row already
items = []; if ( i === 0 ) {
if ( columns.length >= columnsPerRow || lastItem ) { currentScript = $.uls.data.getScriptGroupOfLanguage( languages[ i ] );
rows.push( $( '<div>' ).addClass( 'row uls-language-block' ).append( columns ) ); } else if ( currentScript !== nextScript && items.length > 1 ) {
columns = []; force = true;
}
currentScript = nextScript;
items.push( this.renderItem( languages[ i ] ) );
if ( items.length >= itemsPerColumn || lastItem || force ) {
columns.push( $( '<ul>' ).addClass( columnsClasses ).append( items ) );
items = [];
if ( columns.length >= columnsPerRow || lastItem ) {
rows.push( $( '<div>' ).addClass( 'row uls-language-block' ).append( columns ) );
columns = [];
}
} }
} }
} }
@@ -240,10 +261,10 @@
* @param {string} code Language code * @param {string} code Language code
* @return {Element} * @return {Element}
*/ */
renderItem: function( code ) { renderItem: function ( code ) {
var a, name, autonym, li; var a, name, autonym, li;
name = this.options.languages[code]; name = this.options.languages[ code ];
autonym = $.uls.data.getAutonym( code ) || name || code; autonym = $.uls.data.getAutonym( code ) || name || code;
// Not using jQuery as this is performance hotspot // Not using jQuery as this is performance hotspot
@@ -264,7 +285,7 @@
return li; return li;
}, },
i18n: function ( ) { i18n: function () {
this.$element.find( '[data-i18n]' ).i18n(); this.$element.find( '[data-i18n]' ).i18n();
}, },
@@ -355,34 +376,6 @@
lcd.options.clickhandler.call( this, $( this ).data( 'code' ) ); lcd.options.clickhandler.call( this, $( this ).data( 'code' ) );
} ); } );
} }
// The region section need to be in sync with the map filter.
lcd.$element.scroll( function () {
var inview, inviewRegion,
$ulsLanguageList = $( this ),
scrollTop = $ulsLanguageList.position().top,
scrollBottom = $ulsLanguageList.height();
// The region section need to be in sync with the map filter.
inviewRegion = 'WW';
lcd.$element.find( '.uls-lcd-region-section' ).each( function () {
var $lcdRegionSection = $( this ),
top = $lcdRegionSection.position().top,
height = $lcdRegionSection.height(),
padding = 10;
if ( top - padding <= scrollTop && height > scrollBottom ) {
inviewRegion = $lcdRegionSection.attr( 'id' );
}
} );
// highlight the region visible while scrolling in the map.
inview = $.uls.data.regiongroups[inviewRegion];
if ( !$( '#uls-region-' + inview ).hasClass( 'active' ) ) {
$( '.regionselector' ).removeClass( 'active' );
$( '#uls-region-' + inview ).addClass( 'active' );
}
} );
} }
}; };
@@ -396,15 +389,15 @@
$this.data( 'lcd', ( data = new LanguageCategoryDisplay( this, options ) ) ); $this.data( 'lcd', ( data = new LanguageCategoryDisplay( this, options ) ) );
} }
if ( typeof option === 'string') { if ( typeof option === 'string' ) {
data[option](); data[ option ]();
} }
} ); } );
}; };
$.fn.lcd.defaults = { $.fn.lcd.defaults = {
languages: null, languages: null,
showRegions: ['WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA'], showRegions: [ 'WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA' ],
itemsPerColumn: 8, itemsPerColumn: 8,
// Other supported values are 1 and 2. // Other supported values are 1 and 2.
// Other values will have rendering issues. // Other values will have rendering issues.
@@ -413,4 +406,4 @@
}; };
$.fn.lcd.Constructor = LanguageCategoryDisplay; $.fn.lcd.Constructor = LanguageCategoryDisplay;
} ( jQuery ) ); }( jQuery ) );

View File

@@ -1,5 +1,5 @@
/** /**
* jQuery region filter plugin. * Region Filter for ULS
* *
* Copyright (C) 2012 Alolita Sharma, Amir Aharoni, Arun Ganesh, Brandon Harris, * Copyright (C) 2012 Alolita Sharma, Amir Aharoni, Arun Ganesh, Brandon Harris,
* Niklas Laxström, Pau Giner, Santhosh Thottingal, Siebrand Mazeland and other * Niklas Laxström, Pau Giner, Santhosh Thottingal, Siebrand Mazeland and other
@@ -20,37 +20,23 @@
( function ( $ ) { ( function ( $ ) {
'use strict'; 'use strict';
/* RegionSelector plugin definition */
var RegionSelector;
/** /**
* Region selector is a language selector based on regions. * 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. * that defines the regiongroup for the selector.
*/ */
RegionSelector = function ( element, options ) { var RegionSelector = function ( options ) {
this.$element = $( element ); this.options = options;
this.options = $.extend( {}, $.fn.regionselector.defaults, options );
this.$element.addClass( 'regionselector' );
this.regions = []; this.regions = [];
this.cache = null; this.cache = null;
this.regionGroup = this.$element.data( 'regiongroup' );
this.init(); this.init();
this.listen();
}; };
RegionSelector.prototype = { RegionSelector.prototype = {
constructor: RegionSelector, constructor: RegionSelector,
init: function () { init: function () {
var region = this.$element.data( 'region' ); this.regions = this.options.regions || $.uls.data.getAllRegions();
this.regions = $.uls.data.getRegionsInGroup( this.regionGroup ); this.show();
if ( region ) {
this.regions.push( region );
}
}, },
test: function ( langCode ) { test: function ( langCode ) {
@@ -58,11 +44,11 @@
langRegions = $.uls.data.getRegions( langCode ); langRegions = $.uls.data.getRegions( langCode );
for ( i = 0; i < this.regions.length; i++ ) { for ( i = 0; i < this.regions.length; i++ ) {
region = this.regions[i]; region = this.regions[ i ];
if ( $.inArray( region, langRegions ) >= 0 ) { if ( $.inArray( region, langRegions ) >= 0 ) {
this.render( langCode, region ); this.render( langCode, region );
this.cache[langCode] = region; this.cache[ langCode ] = region;
return; return;
} }
@@ -71,14 +57,14 @@
show: function () { show: function () {
var result, languagesByScriptGroup, scriptGroup, languages, i, var result, languagesByScriptGroup, scriptGroup, languages, i,
$element = this.options.$target && this.options.$target.$element, $target = this.options.$target && this.options.$target.$target,
$parent = $element && $element.parent(), $parent = $target && $target.parent(),
$prev = $element && $element.prev(); $prev = $target && $target.prev();
if ( $element && $parent ) { if ( $target && $parent ) {
// Avoid reflows while adding new elements to the list // Avoid reflows while adding new elements to the list
// Use .detach() to keep jQuery events and data associated with elements // Use .detach() to keep jQuery events and data associated with elements
$element.detach(); $target.detach();
} }
if ( this.cache ) { if ( this.cache ) {
@@ -87,7 +73,7 @@
result = null; result = null;
for ( result in this.cache ) { for ( result in this.cache ) {
this.render( result, this.cache[result] ); this.render( result, this.cache[ result ] );
} }
} else { } else {
this.cache = {}; this.cache = {};
@@ -98,7 +84,7 @@
// of script groups // of script groups
for ( scriptGroup in $.uls.data.scriptgroups ) { for ( scriptGroup in $.uls.data.scriptgroups ) {
// Get the languages for the script group // Get the languages for the script group
languages = languagesByScriptGroup[scriptGroup]; languages = languagesByScriptGroup[ scriptGroup ];
// It's possible that some script groups are missing // It's possible that some script groups are missing
if ( !languages ) { if ( !languages ) {
@@ -110,17 +96,17 @@
for ( i = 0; i < languages.length; i++ ) { for ( i = 0; i < languages.length; i++ ) {
// Check whether it belongs to the region // Check whether it belongs to the region
this.test( languages[i] ); this.test( languages[ i ] );
} }
} }
} }
if ( $element && $parent ) { if ( $target && $parent ) {
// Restore the element to where we removed it from // Restore the element to where we removed it from
if ( $prev ) { if ( $prev ) {
$prev.after( $element ); $prev.after( $target );
} else { } else {
$parent.append( $element ); $parent.append( $target );
} }
} }
@@ -138,61 +124,7 @@
$target.append( langCode, region ); $target.append( langCode, region );
}, },
listen: function () {
this.$element.on( 'click', $.proxy( this.click, this ) );
},
click: function () {
var $list, $firstTargetRegion;
// Don't do anything if a region is selected already
if ( this.$element.hasClass( 'active' ) ) {
return;
}
$list = this.options.$target.$element;
$firstTargetRegion = $list.find( '#' + this.regions[0] );
// Scroll to appropriate area
$list.scrollTop(
$firstTargetRegion.offset().top - $list.offset().top + $list.scrollTop()
);
// 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' );
}
}
}; };
/* RegionSelector plugin definition */ $.uls.RegionSelector = RegionSelector;
}( jQuery ) );
$.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;
} ( jQuery ) );