Merge "Update jquery.uls from 601a5256b8 To 1932de9e347d"

This commit is contained in:
jenkins-bot 2014-04-23 18:34:44 +00:00 committed by Gerrit Code Review
commit 89faf824ad
18 changed files with 248 additions and 1367 deletions

View file

@ -459,11 +459,11 @@ class VisualEditorHooks {
'styles' => array(
'lib/jquery.uls/css/jquery.uls.css',
'lib/jquery.uls/css/jquery.uls.lcd.css',
'lib/jquery.uls/css/jquery.uls.grid.css',
'lib/jquery.uls/css/jquery.uls.compact.css',
),
'dependencies' => array(
'jquery.uls.grid',
'jquery.uls.data',
'jquery.uls.compact',
),
),
'jquery.uls.data' => $wgVisualEditorResourceTemplate + array(
@ -473,14 +473,6 @@ class VisualEditorHooks {
),
'position' => 'top',
),
'jquery.uls.grid' => $wgVisualEditorResourceTemplate + array(
'styles' => 'lib/jquery.uls/css/jquery.uls.grid.css',
'position' => 'top',
),
'jquery.uls.compact' => $wgVisualEditorResourceTemplate + array(
'styles' => 'lib/jquery.uls/css/jquery.uls.compact.css',
'position' => 'top',
),
'jquery.i18n' => $wgVisualEditorResourceTemplate + array(
'scripts' => array(
'lib/ve/lib/jquery.i18n/src/jquery.i18n.js',

View file

@ -71,4 +71,4 @@
border-bottom: 4px solid transparent;
content: "";
margin: 0 6px 0 0;
}
}

View file

@ -1,8 +1,9 @@
.uls-trigger {
/* @embed */
background: transparent url('../images/icon-language.png') no-repeat scroll left center;
/* @embed */
background-image: -webkit-linear-gradient(transparent, transparent), url('../images/icon-language.svg');
background-image: -moz-linear-gradient(transparent, transparent), url('../images/icon-language.svg');
/* @embed */
background-image: linear-gradient(transparent, transparent), url('../images/icon-language.svg');
padding-left: 30px;
}
@ -16,8 +17,6 @@
background-color: #ffffff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
@ -73,8 +72,9 @@
.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');
background-image: -moz-linear-gradient(transparent, transparent), url('../images/world_map.svg');
/* @embed */
background-image: linear-gradient(transparent, transparent), url('../images/world_map.svg');
background-size: 100%;
}
@ -111,10 +111,8 @@ div.uls-region {
/*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)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#253366bb, endColorstr=#253366bb );
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#253366bb, endColorstr=#253366bb)";
}
.map-block .active {
@ -165,8 +163,9 @@ div.uls-region {
.icon-close {
/* @embed */
background: transparent url('../images/close.png') no-repeat scroll center center;
/* @embed */
background-image: -webkit-linear-gradient(transparent, transparent), url('../images/close.svg');
background-image: -moz-linear-gradient(transparent, transparent), url('../images/close.svg');
/* @embed */
background-image: linear-gradient(transparent, transparent), url('../images/close.svg');
float: right;
padding: 15px;
@ -198,7 +197,6 @@ div.uls-region {
background: -webkit-gradient(linear, left top, left bottom, from(#F0F0F0), to(#FBFBFB));
background: -webkit-linear-gradient(top, #F0F0F0, #FBFBFB);
background: -moz-linear-gradient(top, #F0F0F0, #FBFBFB);
background: -ms-linear-gradient(top, #F0F0F0, #FBFBFB);
background: -o-linear-gradient(top, #F0F0F0, #FBFBFB);
background: linear-gradient(#F0F0F0, #FBFBFB);
border-top-color: #AAA;
@ -213,8 +211,9 @@ div.uls-region {
.uls-menu .search-label {
/* @embed */
background: transparent url('../images/search.png') no-repeat scroll right center;
/* @embed */
background-image: -webkit-linear-gradient(transparent, transparent), url('../images/search.svg');
background-image: -moz-linear-gradient(transparent, transparent), url('../images/search.svg');
/* @embed */
background-image: linear-gradient(transparent, transparent), url('../images/search.svg');
background-size: 30px;
height: 32px;
@ -225,8 +224,9 @@ div.uls-region {
.uls-menu .languagefilter-clear {
/* @embed */
background: transparent url('../images/clear.png') no-repeat scroll left center;
/* @embed */
background-image: -webkit-linear-gradient(transparent, transparent), url('../images/clear.svg');
background-image: -moz-linear-gradient(transparent, transparent), url('../images/clear.svg');
/* @embed */
background-image: linear-gradient(transparent, transparent), url('../images/clear.svg');
cursor: pointer;
height: 32px;

View file

@ -61,9 +61,6 @@
line-height: 1.6em;
}
.uls-menu .uls-language-block .columns {
width: 22%;
}
.uls-language-block {
width: 100%;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 186 B

After

Width:  |  Height:  |  Size: 179 B

View file

@ -1,44 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="12.520475"
height="12.52047"
id="svg2">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<rect
width="1.6884073"
height="16.018188"
x="-0.84419048"
y="0.84421676"
transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,0,0)"
id="rect9372-5-6-44-7-7-7-4"
style="fill:#555555;fill-opacity:1;stroke:none" />
<rect
width="1.6884073"
height="16.018188"
x="8.0091028"
y="-8.0090809"
transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
id="rect9372-5-6-44-7-7-7-4-0"
style="fill:#555555;fill-opacity:1;stroke:none" />
</svg>
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12.52" height="12.52"><rect width="1.688" height="16.018" x="-.844" y=".844" transform="rotate(-45)" fill="#555"/><rect width="1.688" height="16.018" x="8.009" y="-8.009" transform="rotate(45)" fill="#555"/></svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 298 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 183 B

After

Width:  |  Height:  |  Size: 180 B

View file

@ -1,48 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="13.591901"
height="13.591884"
id="svg2">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(-578.6585,-309.30142)"
id="layer1">
<rect
width="3.2036376"
height="16.018188"
x="188.86241"
y="629.48431"
transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,0,0)"
id="rect9372-4-9-5-4-0"
style="fill:#555555;fill-opacity:1;stroke:none" />
<rect
width="3.2036376"
height="16.018188"
x="-639.09521"
y="182.45512"
transform="matrix(-0.70710678,-0.70710678,0.70710678,-0.70710678,0,0)"
id="rect9372-5-6-44-7-7-7"
style="fill:#555555;fill-opacity:1;stroke:none" />
</g>
</svg>
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="13.592" height="13.592"><g transform="translate(-578.659 -309.301)" fill="#555"><rect width="3.204" height="16.018" x="188.862" y="629.484" transform="rotate(-45)"/><rect width="3.204" height="16.018" x="-639.095" y="182.455" transform="matrix(-.707 -.707 .707 -.707 0 0)"/></g></svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 369 B

File diff suppressed because it is too large Load diff

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

View file

@ -1,36 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="32"
height="32.000031"
id="svg2">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(-576.51154,-295.86765)"
id="layer1">
<path
d="m 579.88857,299.24469 c 4.50273,-4.50274 11.80568,-4.50272 16.3085,6e-5 4.07216,4.07223 4.41687,10.42533 1.12323,14.93559 l 11.19124,11.19116 -2.49615,2.49618 -11.19125,-11.19116 c -4.51016,3.29363 -10.86328,2.9491 -14.93549,-1.12339 -4.50281,-4.50264 -4.50279,-11.80558 -8e-5,-16.30844 z m 2.12176,2.12187 c -3.34229,3.34214 -3.38386,8.76418 -0.0416,12.10657 3.34232,3.34223 8.80592,3.34224 12.1482,-2e-5 3.34223,-3.34239 3.30056,-8.76429 -0.0417,-12.10668 -3.3422,-3.34213 -8.72263,-3.34213 -12.06491,1.3e-4 z"
id="path3017-6-34-0"
style="fill:#555555;fill-opacity:1;stroke:none" />
</g>
</svg>
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" height="32" width="32"><path fill="#555" d="M3.378 3.372c4.503-4.503 11.806-4.503 16.308 0 4.072 4.072 4.417 10.425 1.123 14.936l11.191 11.191-2.496 2.496-11.191-11.191c-4.51 3.294-10.863 2.949-14.935-1.123-4.503-4.503-4.503-11.806 0-16.308zm2.122 2.122c-3.342 3.342-3.384 8.764-.042 12.107 3.342 3.342 8.806 3.342 12.148 0 3.342-3.342 3.301-8.764-.042-12.107-3.342-3.342-8.723-3.342-12.065 0z"/></svg>

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 480 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.3 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 99 KiB

After

Width:  |  Height:  |  Size: 19 KiB

View file

@ -90,9 +90,7 @@
for ( var code in this.languages ) {
if ( $.uls.data.languages[code] === undefined ) {
if ( window.console && window.console.log ) {
window.console.log( 'ULS: Unknown language ' + code + '.' );
}
// Language is unknown to ULS.
delete this.languages[code];
}
}
@ -224,6 +222,7 @@
* Callback for no results found context.
*/
noresults: function () {
$( '.regionselector' ).removeClass( 'active' );
this.$resultsView.lcd( 'noResults' );
},
@ -231,6 +230,7 @@
* callback for results found context.
*/
success: function () {
$( '.regionselector' ).removeClass( 'active' );
this.$resultsView.show();
},
@ -244,7 +244,9 @@
// Register all event listeners to the ULS here.
uls.$element.on( 'click', $.proxy( uls.click, uls ) );
uls.$languageFilter.on( 'searchclear', $.proxy( uls.defaultSearch, uls ) );
uls.$languageFilter.on( 'searchclear.uls', $.proxy( uls.defaultSearch, uls ) );
uls.$languageFilter.on( 'noresults.uls', $.proxy( uls.noresults, uls ) );
uls.$languageFilter.on( 'resultsfound.uls', $.proxy( uls.success, uls ) );
// Close when clicking on the close button
uls.$menu.find( '#uls-close' ).on( 'click', $.proxy( uls.cancel, uls ) );
@ -272,14 +274,6 @@
uls.$languageFilter.languagefilter( {
$target: lcd,
languages: uls.languages,
success: function () {
$( '.regionselector' ).removeClass( 'active' );
uls.success();
},
noresults: function () {
$( '.regionselector' ).removeClass( 'active' );
uls.noresults();
},
searchAPI: uls.options.searchAPI,
onSelect: $.proxy( uls.select, uls )
} );

File diff suppressed because one or more lines are too long

View file

@ -114,7 +114,6 @@
return allRegions;
};
/**
* Returns all languages written in script.
* @param script string
@ -364,7 +363,6 @@
return regionsInGroup;
};
/**
* Returns the script group of a script or 'Other' if it doesn't
* belong to any group.
@ -464,5 +462,4 @@
return false;
};
} ( jQuery ) );

View file

@ -33,7 +33,7 @@
this.$element.addClass( 'languagefilter' );
this.resultCount = 0;
this.$suggestion = this.$element.parents().find( '#' + this.$element.data( 'suggestion' ) );
this.$clear = this.$element.parents().find( '#'+ this.$element.data( 'clear' ) );
this.$clear = this.$element.parents().find( '#' + this.$element.data( 'clear' ) );
this.selectedLanguage = null;
this.listen();
@ -143,7 +143,7 @@
*/
clear: function() {
this.deactivate();
this.$element.trigger( 'searchclear' );
this.$element.trigger( 'searchclear.uls' );
},
/**
@ -188,8 +188,9 @@
this.selectedLanguage = langCode;
}
this.render( langCode );
this.resultCount++;
if ( this.render( langCode ) ) {
this.resultCount++;
}
}
}
}
@ -212,8 +213,9 @@
languageFilter.autofill( code, name );
}
languageFilter.render( code );
languageFilter.resultCount++;
if ( languageFilter.render( code ) ) {
languageFilter.resultCount++;
}
} );
languageFilter.resultHandler( query );
@ -222,15 +224,15 @@
/**
* Handler method to be called once search is over.
* Based on search result call success or noresults callbacks
* Based on search result triggers resultsfound or noresults events
* @param query string
*/
resultHandler: function( query ) {
if ( this.resultCount === 0 && this.options.noresults ) {
if ( this.resultCount === 0 ) {
this.$suggestion.val( '' );
this.options.noresults.call( this, query );
} else if ( this.options.success ) {
this.options.success( this, query, this.resultCount );
this.$element.trigger( 'noresults.uls', query );
} else {
this.$element.trigger( 'resultsfound.uls', [query, this.resultCount] );
}
},
@ -278,10 +280,10 @@
var $target = this.options.$target;
if ( !$target ) {
return;
return false;
}
$target.append( langCode, null );
return $target.append( langCode );
},
escapeRegex: function( value ) {
@ -339,8 +341,6 @@
$target: null, // Where to append the results
searchAPI: null,
languages: null, // Languages as code:name format.
noresults: null, // callback for no results found case
success: null, // callback if any results found.
onSelect: null // Language select handler - like enter in filter textbox.
};

View file

@ -26,12 +26,12 @@
/*jshint multistr:true */
noResultsTemplate = '\
<div class="twelve columns uls-no-results-view">\
<h2 data-i18n="uls-no-results-found" class="eleven columns end offset-by-one uls-no-results-found-title">\
<div class="twelve columns uls-no-results-view hide">\
<h2 data-i18n="uls-no-results-found" class="eleven columns offset-by-one uls-no-results-found-title">\
No results found\
</h2>\
<div id="uls-no-found-more" class="uls-no-found-more">\
<div class="ten columns end offset-by-one">\
<div class="ten columns offset-by-one">\
<p>\
<span data-i18n="uls-search-help">You can search by language name, \
script name, ISO code of language or \
@ -53,9 +53,13 @@
this.$element = $( element );
this.options = $.extend( {}, $.fn.lcd.defaults, options );
this.$element.addClass( 'lcd' );
this.regionDivs = {};
this.regionLanguages = {};
this.renderTimeout = null;
this.cachedQuicklist = null;
this.$element.append( $( noResultsTemplate ) );
this.$noResults = this.$element.find( 'div.uls-no-results-view' );
this.$noResults = this.$element.children( '.uls-no-results-view' );
this.render();
this.listen();
};
@ -63,107 +67,50 @@
LanguageCategoryDisplay.prototype = {
constructor: LanguageCategoryDisplay,
append: function ( langCode, regionCode ) {
this.addToRegion( langCode, regionCode );
this.$noResults.hide();
},
/**
* Add the language to a region.
* If the region parameter is given, add to that region alone
* Otherwise to all regions that this language belongs.
* @param langCode
* @param region Optional region
* Adds language to the language list.
* @param {string} langCode
* @param {string} [regionCode]
* @return {bool} Whether the language was added.
*/
addToRegion: function ( langCode, region ) {
var i, regionCode, $li, $column, lastLanguage, lastScriptGroup, currentScriptGroup,
lcd = this,
language = lcd.options.languages[langCode],
langName = $.uls.data.getAutonym( langCode ) || language || langCode,
regions = [];
append: function ( langCode, regionCode ) {
var lcd = this, i, regions;
if ( region ) {
regions.push( region );
if ( !this.options.languages[langCode] ) {
// Language is unknown or not in the list of languages for this context.
return false;
}
if ( regionCode ) {
regions = [regionCode];
} else {
regions = $.uls.data.getRegions( langCode );
}
// World wide languages need not be repeated in all regions.
// Worldwides only displayed once
if ( $.inArray( 'WW', regions ) > -1 ) {
regions = [ 'WW' ];
regions = ['WW'];
}
for ( i = 0; i < regions.length; i++ ) {
regionCode = regions[i];
$li = $( '<li>' )
.data( 'code', langCode )
.attr( {
lang: langCode,
dir: $.uls.data.getDir( langCode )
} )
.append(
$( '<a>' ).prop( 'title', language ).html( langName )
);
// Append the element to the column in the list
$column = lcd.getColumn( regionCode );
lastLanguage = $column.find( 'li:last' ).data( 'code' );
if ( lastLanguage ) {
lastScriptGroup = $.uls.data.getScriptGroupOfLanguage( lastLanguage );
currentScriptGroup = $.uls.data.getScriptGroupOfLanguage( langCode );
if ( lastScriptGroup !== currentScriptGroup ) {
if ( $column.find( 'li' ).length > 2 ) {
// If column already has 2 or more languages, add a new column
$column = lcd.getColumn( regionCode, true );
}
}
}
$column.append( $li );
}
},
/**
* Get a column to add language.
* @param regionCode string The region code
* @param forceNew bool whether a new column must be created or not
*/
getColumn: function ( regionCode, forceNew ) {
var $divRegionCode, $rowDiv, $ul;
forceNew = forceNew || false;
$divRegionCode = this.regionDivs[regionCode];
$rowDiv = $divRegionCode.find( 'div.row:last' );
$ul = $rowDiv.find( 'ul:last' );
// Each column can have maximum 8 languages.
if ( $ul.length === 0 || $ul.find( 'li' ).length >= 8 || forceNew ) {
$ul = $( '<ul>' ).addClass( 'three columns end' );
if ( $rowDiv.length === 0 || $rowDiv.find( 'ul' ).length >= 4 ) {
$rowDiv = $( '<div>' ).addClass( 'row uls-language-block' );
$divRegionCode.append( $rowDiv );
$ul.addClass( 'offset-by-one' );
}
$rowDiv.append( $ul );
this.regionLanguages[regions[i]].push( langCode );
}
// Don't show the region unless it was enabled
if ( $.inArray( regionCode, this.options.showRegions ) > -1 ) {
$divRegionCode.show();
}
// Work around the bad interface, delay rendering until we have got
// all the languages to speed up performance.
window.clearTimeout( this.renderTimeout );
this.renderTimeout = window.setTimeout( function () {
lcd.renderRegions();
}, 50 );
return $ul;
return true;
},
render: function () {
var $section, $sectionTitle,
var $section,
lcd = this,
regions = {
regions = [],
regionNames = {
// These are fallback text when i18n library not present
WW: 'Worldwide',
SP: 'Special',
@ -175,38 +122,160 @@
PA: 'Pacific'
};
regions.push( this.buildQuicklist() );
$.each( $.uls.data.regiongroups, function ( regionCode ) {
$section = $( '<div>' ).addClass( 'twelve columns uls-lcd-region-section' ).prop( 'id', regionCode );
lcd.regionLanguages[regionCode] = [];
// Don't show the region unless it was enabled
if ( $.inArray( regionCode, lcd.options.showRegions ) === -1 ) {
return;
}
$sectionTitle = $( '<h3>' )
.attr( 'data-i18n', 'uls-region-' + regionCode )
.addClass( 'eleven columns uls-lcd-region-section uls-lcd-region-title offset-by-one' )
.text( regions[regionCode] );
$section = $( '<div>' )
.addClass( 'eleven columns offset-by-one uls-lcd-region-section hide' )
.attr( 'id', regionCode )
.append(
$( '<h3>' )
.attr( 'data-i18n', 'uls-region-' + regionCode )
.addClass( 'eleven columns uls-lcd-region-title' )
.text( regionNames[regionCode] )
);
$section.append( $sectionTitle );
lcd.$element.append( $section );
$section.hide();
lcd.regionDivs[regionCode] = $section;
regions.push( $section );
} );
this.$noResults.hide();
lcd.$element.append( regions );
this.i18n();
},
/**
* Renders a region and displays it if it has content.
*/
renderRegions: function () {
var lcd = this, languages,
items = lcd.options.itemsPerColumn,
columns = 4;
this.$noResults.addClass( 'hide' );
this.$element.find( '.uls-lcd-region-section' ).each( function () {
var $region = $( this ),
regionCode = $region.attr( 'id' );
if ( $region.is( '#uls-lcd-quicklist' ) ) {
return;
}
$region.children( '.uls-language-block' ).remove();
languages = lcd.regionLanguages[regionCode];
if ( !languages || languages.length === 0 ) {
$region.addClass( 'hide' );
return;
}
lcd.renderRegion( $region, languages, items, columns );
$region.removeClass( 'hide' );
lcd.regionLanguages[regionCode] = [];
} );
},
/**
* Adds given languages sorted into rows and columns into given element.
* @param {jQuery} $region Element to add language list.
* @param {array} languages List of language codes.
* @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 ) {
var i, lastItem, currentScript, nextScript, force,
len = languages.length,
items = [],
columns = [],
rows = [];
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;
}
currentScript = nextScript;
items.push( this.renderItem( languages[i] ) );
if ( items.length >= itemsPerColumn || lastItem || force ) {
columns.push( $( '<ul>' ).addClass( 'three columns' ).append( items ) );
items = [];
if ( columns.length >= columnsPerRow || lastItem ) {
rows.push( $( '<div>' ).addClass( 'row uls-language-block' ).append( columns ) );
columns = [];
}
}
}
$region.append( rows );
},
/**
* Creates dom node representing one item in language list.
* @param {string} code Language code
* @return {Element}
*/
renderItem: function( code ) {
var a, name, autonym, li;
name = this.options.languages[code];
autonym = $.uls.data.getAutonym( code ) || name || code;
// Not using jQuery as this is performance hotspot
li = document.createElement( 'li' );
li.title = name;
li.lang = code;
li.dir = $.uls.data.getDir( code );
li.setAttribute( 'data-code', code );
a = document.createElement( 'a' );
a.appendChild( document.createTextNode( autonym ) );
a.className = 'autonym';
li.appendChild( a );
return li;
},
i18n: function ( ) {
this.$element.find( '[data-i18n]' ).i18n();
},
/**
* Adds quicklist as a region.
*/
quicklist: function () {
var quickList, $quickListSection, $quickListSectionTitle, i,
$column, langCode, language, langName, $li;
this.$element.find( '#uls-lcd-quicklist' ).removeClass( 'hide' );
},
buildQuicklist: function () {
var quickList, $quickListSection, $quickListSectionTitle;
if ( this.cachedQuicklist !== null ) {
return this.cachedQuicklist;
}
if ( $.isFunction( this.options.quickList ) ) {
this.options.quickList = this.options.quickList();
}
if ( !this.options.quickList ) {
return $( [] );
this.cachedQuicklist = $( [] );
return this.cachedQuicklist;
}
// Pick only the first elements, because we don't have room for more
@ -214,36 +283,22 @@
quickList = quickList.slice( 0, 16 );
quickList.sort( $.uls.data.sortByAutonym );
$quickListSection = $( '<div>' ).addClass( 'twelve columns uls-lcd-region-section' ).prop( 'id', 'uls-lcd-quicklist' );
$quickListSection = $( '<div>' )
.addClass( 'eleven columns offset-by-one uls-lcd-region-section' )
.attr( 'id', 'uls-lcd-quicklist' );
$quickListSectionTitle = $( '<h3>' )
.attr( 'data-i18n', 'uls-common-languages' )
.addClass( 'eleven columns uls-lcd-region-section uls-lcd-region-title offset-by-one' )
.addClass( 'eleven columns uls-lcd-region-title' )
.text( 'Common languages' ); // This is placeholder text if jquery.i18n not present
$quickListSection.append( $quickListSectionTitle );
this.$element.prepend( $quickListSection );
this.regionDivs.quick = $quickListSection;
for ( i = 0; i < quickList.length; i++) {
$column = this.getColumn( 'quick', i % 4 === 0 );
langCode = quickList[i];
language = this.options.languages[langCode];
langName = $.uls.data.getAutonym( langCode ) || language || langCode;
$li = $( '<li>' )
.data( 'code', langCode )
.attr( {
lang: langCode,
dir: $.uls.data.getDir( langCode )
} )
.append(
$( '<a>' ).prop( 'title', language ).html( langName )
);
$column.append( $li );
}
this.renderRegion( $quickListSection, quickList, 4, 4 );
$quickListSection.show();
$quickListSectionTitle.i18n();
return $quickListSection;
this.cachedQuicklist = $quickListSection;
return this.cachedQuicklist;
},
show: function () {
@ -253,8 +308,7 @@
},
empty: function () {
this.$element.find( 'div.uls-language-block' ).remove();
this.$element.find( 'div.uls-lcd-region-section' ).hide();
this.$element.find( '#uls-lcd-quicklist' ).addClass( 'hide' );
},
focus: function () {
@ -262,8 +316,12 @@
},
noResults: function () {
this.$noResults.show();
var $suggestions = this.quicklist();
this.$noResults.removeClass( 'hide' );
if ( this.$noResults.find( '.uls-lcd-region-title' ).length ) {
return;
}
var $suggestions = this.buildQuicklist().clone();
$suggestions.find( 'h3' )
.data( 'i18n', 'uls-no-results-suggestion-title' )
.text( 'You may be interested in:' )
@ -275,7 +333,7 @@
var lcd = this;
if ( this.options.clickhandler ) {
this.$element.on( 'click', 'div.row li', function () {
this.$element.on( 'click', '.row li', function () {
lcd.options.clickhandler.call( this, $( this ).data( 'code' ) );
} );
}
@ -289,7 +347,7 @@
// The region section need to be in sync with the map filter.
inviewRegion = 'WW';
lcd.$element.find( 'div.uls-lcd-region-section' ).each( function () {
lcd.$element.find( '.uls-lcd-region-section' ).each( function () {
var $lcdRegionSection = $( this ),
top = $lcdRegionSection.position().top,
height = $lcdRegionSection.height(),
@ -297,14 +355,15 @@
if ( top - padding <= scrollTop && height > scrollBottom ) {
inviewRegion = $lcdRegionSection.attr( 'id' );
return true;
}
} );
// highlight the region visible while scrolling in the map.
inview = $.uls.data.regiongroups[inviewRegion];
$( '.regionselector' ).removeClass( 'active' );
$( '#uls-region-' + inview ).addClass( 'active' );
if ( !$( '#uls-region-' + inview ).hasClass( 'active' ) ) {
$( '.regionselector' ).removeClass( 'active' );
$( '#uls-region-' + inview ).addClass( 'active' );
}
} );
}
};
@ -327,9 +386,9 @@
$.fn.lcd.defaults = {
languages: null,
showRegions: ['WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA']
showRegions: ['WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA'],
itemsPerColumn: 8
};
$.fn.lcd.Constructor = LanguageCategoryDisplay;
} ( jQuery ) );

View file

@ -35,7 +35,7 @@
this.options = $.extend( {}, $.fn.regionselector.defaults, options );
this.$element.addClass( 'regionselector' );
this.regions = [];
this.cache= null;
this.cache = null;
this.regionGroup = this.$element.data( 'regiongroup' );
this.init();
this.listen();
@ -144,14 +144,21 @@
},
click: function () {
var $list, $firstTargetRegion;
// Don't do anything if a region is selected already
if ( this.$element.hasClass( 'active' ) ) {
return;
}
// Re-populate the list of languages
this.options.$target.empty();
this.show();
$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' );
@ -188,5 +195,4 @@
};
$.fn.regionselector.Constructor = RegionSelector;
} ( jQuery ) );