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:
@@ -34,14 +34,7 @@
|
||||
<p>\
|
||||
<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">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>.\
|
||||
you can browse by region.</span>\
|
||||
</p>\
|
||||
</div>\
|
||||
</div>\
|
||||
@@ -73,26 +66,38 @@
|
||||
* @return {bool} Whether the language was added.
|
||||
*/
|
||||
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.
|
||||
return false;
|
||||
}
|
||||
|
||||
if ( regionCode ) {
|
||||
regions = [regionCode];
|
||||
// Show everything in one region when there is only one column
|
||||
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 {
|
||||
regions = $.uls.data.getRegions( langCode );
|
||||
if ( regionCode ) {
|
||||
regions = [ regionCode ];
|
||||
} else {
|
||||
regions = $.uls.data.getRegions( langCode );
|
||||
}
|
||||
}
|
||||
|
||||
// Worldwides only displayed once
|
||||
if ( $.inArray( 'WW', regions ) > -1 ) {
|
||||
regions = ['WW'];
|
||||
regions = [ 'WW' ];
|
||||
}
|
||||
|
||||
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
|
||||
@@ -124,7 +129,8 @@
|
||||
regions.push( this.buildQuicklist() );
|
||||
|
||||
$.each( $.uls.data.regiongroups, function ( regionCode ) {
|
||||
lcd.regionLanguages[regionCode] = [];
|
||||
lcd.regionLanguages[ regionCode ] = [];
|
||||
|
||||
// Don't show the region unless it was enabled
|
||||
if ( $.inArray( regionCode, lcd.options.showRegions ) === -1 ) {
|
||||
return;
|
||||
@@ -132,13 +138,16 @@
|
||||
|
||||
$section = $( '<div>' )
|
||||
.addClass( 'eleven columns offset-by-one uls-lcd-region-section hide' )
|
||||
.attr( 'id', regionCode )
|
||||
.append(
|
||||
$( '<h3>' )
|
||||
.attr( 'id', regionCode );
|
||||
|
||||
// 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 )
|
||||
.addClass( 'eleven columns uls-lcd-region-title' )
|
||||
.text( regionNames[regionCode] )
|
||||
.text( regionNames[ regionCode ] )
|
||||
);
|
||||
}
|
||||
|
||||
regions.push( $section );
|
||||
} );
|
||||
@@ -166,7 +175,7 @@
|
||||
|
||||
$region.children( '.uls-language-block' ).remove();
|
||||
|
||||
languages = lcd.regionLanguages[regionCode];
|
||||
languages = lcd.regionLanguages[ regionCode ];
|
||||
if ( !languages || languages.length === 0 ) {
|
||||
$region.addClass( 'hide' );
|
||||
return;
|
||||
@@ -180,7 +189,7 @@
|
||||
);
|
||||
$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} 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,
|
||||
len = languages.length,
|
||||
languagesCount = languages.length,
|
||||
items = [],
|
||||
columns = [],
|
||||
rows = [];
|
||||
@@ -207,27 +216,39 @@
|
||||
columnsClasses = 'three columns';
|
||||
}
|
||||
|
||||
for ( i = 0; i < len; i++ ) {
|
||||
force = false;
|
||||
nextScript = $.uls.data.getScriptGroupOfLanguage( languages[i+1] );
|
||||
|
||||
lastItem = len - i === 1;
|
||||
// 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;
|
||||
if ( this.options.columns === 1 ) {
|
||||
// For one-column narrow ULS, just render all the languages
|
||||
// in one simple list without separators or script groups
|
||||
for ( i = 0; i < languagesCount; i++ ) {
|
||||
items.push( this.renderItem( languages[ i ] ) );
|
||||
}
|
||||
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 ) {
|
||||
columns.push( $( '<ul>' ).addClass( columnsClasses ).append( items ) );
|
||||
items = [];
|
||||
if ( columns.length >= columnsPerRow || lastItem ) {
|
||||
rows.push( $( '<div>' ).addClass( 'row uls-language-block' ).append( columns ) );
|
||||
columns = [];
|
||||
lastItem = languagesCount - i === 1;
|
||||
// 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 ] ) );
|
||||
|
||||
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
|
||||
* @return {Element}
|
||||
*/
|
||||
renderItem: function( code ) {
|
||||
renderItem: function ( code ) {
|
||||
var a, name, autonym, li;
|
||||
|
||||
name = this.options.languages[code];
|
||||
name = this.options.languages[ code ];
|
||||
autonym = $.uls.data.getAutonym( code ) || name || code;
|
||||
|
||||
// Not using jQuery as this is performance hotspot
|
||||
@@ -264,7 +285,7 @@
|
||||
return li;
|
||||
},
|
||||
|
||||
i18n: function ( ) {
|
||||
i18n: function () {
|
||||
this.$element.find( '[data-i18n]' ).i18n();
|
||||
},
|
||||
|
||||
@@ -355,34 +376,6 @@
|
||||
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 ) ) );
|
||||
}
|
||||
|
||||
if ( typeof option === 'string') {
|
||||
data[option]();
|
||||
if ( typeof option === 'string' ) {
|
||||
data[ option ]();
|
||||
}
|
||||
} );
|
||||
};
|
||||
|
||||
$.fn.lcd.defaults = {
|
||||
languages: null,
|
||||
showRegions: ['WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA'],
|
||||
showRegions: [ 'WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA' ],
|
||||
itemsPerColumn: 8,
|
||||
// Other supported values are 1 and 2.
|
||||
// Other values will have rendering issues.
|
||||
@@ -413,4 +406,4 @@
|
||||
};
|
||||
|
||||
$.fn.lcd.Constructor = LanguageCategoryDisplay;
|
||||
} ( jQuery ) );
|
||||
}( jQuery ) );
|
||||
|
||||
Reference in New Issue
Block a user