Merge "Update jquery.uls from 601a5256b8 To 1932de9e347d"
|
@ -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',
|
||||
|
|
|
@ -71,4 +71,4 @@
|
|||
border-bottom: 4px solid transparent;
|
||||
content: "";
|
||||
margin: 0 6px 0 0;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -61,9 +61,6 @@
|
|||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
.uls-menu .uls-language-block .columns {
|
||||
width: 22%;
|
||||
}
|
||||
.uls-language-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
Before Width: | Height: | Size: 186 B After Width: | Height: | Size: 179 B |
|
@ -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 |
Before Width: | Height: | Size: 183 B After Width: | Height: | Size: 180 B |
|
@ -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 |
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 1.8 KiB |
|
@ -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 |
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 19 KiB |
|
@ -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 )
|
||||
} );
|
||||
|
|
|
@ -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 ) );
|
||||
|
|
|
@ -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.
|
||||
};
|
||||
|
||||
|
|
|
@ -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 ) );
|
||||
|
|
|
@ -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 ) );
|
||||
|
|