bryce/mediawiki-extensions-UniversalLanguageSelector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update jquery.uls to d122f37

Browse Source 
* Do not group search results by region
* Replace ULS trigger icon with monochromatic one
* Custom no-results message support
* Upgrade jquery in the example to 3.2.1
* Use .siblings to locate the suggestions, clear elements for efficiency
* Removing assigned ids to elements that are not guaranteed to be unique
* Use eslint and stylelint, fix all errors

Update the language icon in ext.uls.pt module with new monochromatic one
Also use custom style for monobook skin.

Bug: T182539
Bug: T175769
Change-Id: I7341064cd0de367d933048c4800f951568747d11
This commit is contained in:
Santhosh Thottingal
2018-01-15 09:47:15 +05:30
parent 4489bf100a
commit fd7b9ec652
17 changed files with 421 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
extension.json
View File

@@ -353,6 +353,9 @@
"ext.uls.pt": { "ext.uls.pt": {
"styles": "css/ext.uls.pt.less", "styles": "css/ext.uls.pt.less",
"localBasePath": "resources", "localBasePath": "resources",
"skinStyles": {
"monobook": "css/ext.uls.pt-monobook.less"
},
"remoteExtPath": "UniversalLanguageSelector/resources" "remoteExtPath": "UniversalLanguageSelector/resources"
}, },
"ext.uls.interlanguage": { "ext.uls.interlanguage": {

16
lib/jquery.uls/css/jquery.uls.css
View File

@@ -1,8 +1,8 @@
.uls-trigger { .uls-trigger {
background: url('../images/icon-language.png') no-repeat left center; background: url( ../images/language.png ) no-repeat left center;
/* @embed */ /* @embed */
background-image: linear-gradient(transparent, transparent), url('../images/icon-language.svg'); background-image: linear-gradient( transparent, transparent ), url( ../images/language.svg );
padding-left: 30px; padding-left: 24px;
} }
.uls-menu { .uls-menu {
@@ -65,9 +65,9 @@
} }
.uls-search-label { .uls-search-label {
background: url('../images/search.png') no-repeat center center; background: url( ../images/search.png ) no-repeat center center;
/* @embed */ /* @embed */
background-image: linear-gradient(transparent, transparent), url('../images/search.svg'); background-image: linear-gradient( transparent, transparent ), url( ../images/search.svg );
background-size: 20px; background-size: 20px;
height: 32px; height: 32px;
width: 44px; width: 44px;
@@ -88,7 +88,7 @@
width: 100%; width: 100%;
/* For the custom clear (X) icon */ /* For the custom clear (X) icon */
padding: 6px 25px 6px 0; padding: 6px 25px 6px 0;
outline: none; outline: 0;
border: 0; border: 0;
display: block; display: block;
position: absolute; position: absolute;
@@ -110,9 +110,9 @@
} }
.uls-languagefilter-clear { .uls-languagefilter-clear {
background: url('../images/clear.png') no-repeat left center; background: url( ../images/clear.png ) no-repeat left center;
/* @embed */ /* @embed */
background-image: linear-gradient(transparent, transparent), url('../images/clear.svg'); background-image: linear-gradient( transparent, transparent ), url( ../images/clear.svg );
background-size: 15px; background-size: 15px;
cursor: pointer; cursor: pointer;
height: 15px; height: 15px;

40
lib/jquery.uls/css/jquery.uls.grid.css
View File

@@ -32,15 +32,18 @@
} }
.grid .highlight { .grid .highlight {
background: #ffff99; background: #ff9;
} }
/* The Grid ---------------------- */ /* The Grid ---------------------- */
.grid .row { .grid .row {
width: 100%; width: 100%;
max-width: none; max-width: none;
min-width: 600px; min-width: 600px;
margin: 0 auto; margin: 0 auto;
/* Nicolas Gallagher's micro clearfix */
*zoom: 1;
} }
.grid .row .row { .grid .row .row {
@@ -50,30 +53,25 @@
margin: 0 -5px; margin: 0 -5px;
} }
.grid .column,
.grid .columns {
float: left;
min-height: 1px;
padding: 0 5px;
position: relative;
}
.grid .row.collapse .column, .grid .row.collapse .column,
.grid .row.collapse .columns { .grid .row.collapse .columns {
padding: 0; padding: 0;
} }
.grid .row .row {
width: auto;
max-width: none;
min-width: 0;
margin: 0 -5px;
}
.grid .row .row.collapse { .grid .row .row.collapse {
margin: 0; margin: 0;
} }
.grid .column, .grid .columns { .grid .column.centered,
float: left; .grid .columns.centered {
min-height: 1px;
padding: 0 5px;
position: relative;
}
.grid .column.centered, .grid .columns.centered {
float: none; float: none;
margin: 0 auto; margin: 0 auto;
} }
@@ -238,13 +236,9 @@
right: 83.333%; right: 83.333%;
} }
/* Nicolas Gallagher's micro clearfix */ .grid .row:before,
.grid .row { .grid .row:after {
*zoom: 1; content: '';
}
.grid .row:before, .grid .row:after {
content: "";
display: table; display: table;
} }

37
lib/jquery.uls/css/jquery.uls.lcd.css
View File

@@ -17,6 +17,10 @@
padding: 0 16px; padding: 0 16px;
} }
.uls-lcd--no-quicklist [data-region="all"] .uls-lcd-region-title {
display: none;
}
.uls-lcd-region-section { .uls-lcd-region-section {
margin-top: 10px; margin-top: 10px;
} }
@@ -36,6 +40,16 @@
margin: 0; margin: 0;
} }
.uls-language-block > ul {
/*
* We don't want any visible bullets in this list. Not by default anyway.
* Using very unspecific selector here to allow other classes to override.
* Bug because overflow: hidden is incompatible with bullets, also render
* the bullets inside the list in case there should be any.
*/
list-style: none none;
}
/* /*
* Each block should have 16px padding on both sides. But because we already gave * Each block should have 16px padding on both sides. But because we already gave
* 16px for the whole menu, we need to remove it for first and last items the blocks. * 16px for the whole menu, we need to remove it for first and last items the blocks.
@@ -53,17 +67,6 @@
padding-right: 0; padding-right: 0;
} }
.uls-language-block > ul {
/*
* We don't want any visible bullets in this list. Not by default anyway.
* Using very unspecific selector here to allow other classes to override.
* Bug because overflow: hidden is incompatible with bullets, also render
* the bullets inside the list in case there should be any.
*/
list-style: none none;
}
.uls-language-block > ul > li { .uls-language-block > ul > li {
cursor: pointer; cursor: pointer;
margin-left: 20px; margin-left: 20px;
@@ -103,6 +106,18 @@
vertical-align: middle; vertical-align: middle;
} }
.uls-no-results-view {
display: none;
}
.uls-lcd.uls-no-results > .uls-lcd-region-section {
display: none;
}
.uls-lcd.uls-no-results > .uls-no-results-view {
display: block;
}
.uls-no-results-found-title { .uls-no-results-found-title {
font-size: 16px; font-size: 16px;
padding: 0 16px 0 28px; padding: 0 16px 0 28px;

7
lib/jquery.uls/css/jquery.uls.mobile.css
View File

@@ -40,7 +40,7 @@
float: none; float: none;
} }
.uls-mobile [class*="column"] + [class*="column"]:last-child { .uls-mobile [ class*='column' ] + [ class*='column' ]:last-child {
float: none; float: none;
} }
@@ -48,7 +48,7 @@
.uls-mobile .uls-mobile .columns:before, .uls-mobile .uls-mobile .columns:before,
.uls-mobile .column:after, .uls-mobile .column:after,
.columns:after { .columns:after {
content: ""; content: '';
display: table; display: table;
} }
@@ -201,7 +201,8 @@
.uls-mobile .hide-for-small, .uls-mobile .hide-for-small,
.uls-mobile .hide-for-medium, .uls-mobile .hide-for-medium,
.uls-mobile .hide-for-medium-down, .uls-mobile .hide-for-medium-down,
.hide-for-large, .show-for-large-up, .hide-for-large,
.show-for-large-up,
.show-for-xlarge { .show-for-xlarge {
display: block !important; display: block !important;
} }

5
lib/jquery.uls/i18n/cop.json
View File

@@ -7,7 +7,7 @@
}, },
"uls-region-WW": "ⲧⲏⲣⲙⲁⲓ", "uls-region-WW": "ⲧⲏⲣⲙⲁⲓ",
"uls-region-AM": "ⲁⲙⲉⲣⲓⲕⲏ", "uls-region-AM": "ⲁⲙⲉⲣⲓⲕⲏ",
"uls-region-AF": "ⲁϥⲣⲓⲕⲏ", "uls-region-AF": "ⲁⲫⲣⲓⲕⲏ",
"uls-region-EU": "ⲉⲩⲣⲱⲡⲏ", "uls-region-EU": "ⲉⲩⲣⲱⲡⲏ",
"uls-region-AS": "ⲁⲥⲓⲁ", "uls-region-AS": "ⲁⲥⲓⲁ",
"uls-region-ME": "ⲡⲓⲉⲃⲧ `ⲛⲑⲙⲏϯ", "uls-region-ME": "ⲡⲓⲉⲃⲧ `ⲛⲑⲙⲏϯ",
@@ -15,5 +15,6 @@
"uls-region-all": "ⲁⲥⲡⲓ ⲛⲓⲃⲉⲛ", "uls-region-all": "ⲁⲥⲡⲓ ⲛⲓⲃⲉⲛ",
"uls-no-results-found": "ⲁⲩϫⲓⲙⲓ ⲁⲛ ⲛⲓⲁⲡⲟⲧⲉⲗⲉⲥⲙⲁ", "uls-no-results-found": "ⲁⲩϫⲓⲙⲓ ⲁⲛ ⲛⲓⲁⲡⲟⲧⲉⲗⲉⲥⲙⲁ",
"uls-common-languages": "ⲛⲓⲁⲥⲡⲓ ⲁⲩϯⲙⲉⲩⲓ", "uls-common-languages": "ⲛⲓⲁⲥⲡⲓ ⲁⲩϯⲙⲉⲩⲓ",
"uls-search-help": "ⲧⲉⲧⲉⲛϫⲉⲙϫⲟⲙ ϫⲉⲙⲣⲁⲧ ϩⲉⲛ `ⲫⲣⲁⲛ ⲛⲧⲉ ⲁⲥⲡⲓ, `ⲫⲣⲁⲛ ⲛⲧⲉ ⲓⲟⲡⲓⲥϧⲁⲓ , ISO ⲕⲱⲇⲓⲕⲟⲥ ⲛⲧⲉ ⲁⲥⲡⲓ ⲓⲉ ⲧⲉⲧⲉⲛϫⲉⲙϫⲟⲙ ⲥⲓⲛⲓ ϧⲁⲧⲉⲛⲙⲁⲛⲧⲉϭⲁ." "uls-search-help": "ⲧⲉⲧⲉⲛϫⲉⲙϫⲟⲙ ϫⲉⲙⲣⲁⲧ ϩⲉⲛ `ⲫⲣⲁⲛ ⲛⲧⲉ ⲁⲥⲡⲓ, `ⲫⲣⲁⲛ ⲛⲧⲉ ⲓⲟⲡⲓⲥϧⲁⲓ , ISO ⲕⲱⲇⲓⲕⲟⲥ ⲛⲧⲉ ⲁⲥⲡⲓ ⲓⲉ ⲧⲉⲧⲉⲛϫⲉⲙϫⲟⲙ ⲥⲓⲛⲓ ϧⲁⲧⲉⲛⲙⲁⲛⲧⲉϭⲁ.",
"uls-search-placeholder": "ϫⲉⲙⲣⲁⲧⲕ `ⲛⲟⲩⲁⲥⲡⲓ"
} }

7
lib/jquery.uls/i18n/mwl.json
View File

@@ -1,7 +1,8 @@
{ {
"@metadata": { "@metadata": {
"authors": [ "authors": [
"MokaAkashiyaPT" "MokaAkashiyaPT",
"Athena in Wonderland"
] ]
}, },
"uls-region-WW": "Global", "uls-region-WW": "Global",
@@ -12,6 +13,10 @@
"uls-region-AS": "Ásia", "uls-region-AS": "Ásia",
"uls-region-ME": "Médio Ouriente", "uls-region-ME": "Médio Ouriente",
"uls-region-PA": "Pacífico", "uls-region-PA": "Pacífico",
"uls-region-all": "Todas las lhénguas",
"uls-no-results-found": "Nó fúrun ancontrados resultados",
"uls-common-languages": "Lhénguas sugeridas", "uls-common-languages": "Lhénguas sugeridas",
"uls-no-results-suggestion-title": "Puode star antressado an:",
"uls-search-help": "Puode percurar pul nome de la lhéngua, pul tipo de abc, código ISO de la lhéngua, ó puode nabegar por region.",
"uls-search-placeholder": "Percurar por lhéngua" "uls-search-placeholder": "Percurar por lhéngua"
} }

BIN
lib/jquery.uls/images/icon-language.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 802 B

1
lib/jquery.uls/images/icon-language.svg
View File

@@ -1 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="27" height="16"><path fill="#D3E3F4" d="M0 0h11.876v16h-11.876v-16z"/><path fill="#E9E9E9" d="M12.819 0v15.969h10.755c1.085-2.578 1.837-4.991 3.062-8.591l-3.062-7.378h-10.755z"/><path fill="#434343" d="M14.828 4.146c.32.023.639.035.951.035.471 0 .922-.016 1.354-.046l.023-.258.034-.367.081-.711.033-.333.873.058c-.073.577-.133 1.091-.179 1.542 1.116-.119 2.233-.331 3.349-.637l.092.809c-1.078.271-2.251.472-3.521.602-.05.463-.082.968-.098 1.514.524-.187 1.14-.313 1.847-.378.064-.207.136-.461.213-.763l.865.201c-.027.123-.088.315-.184.579.814.104 1.461.34 1.938.711.681.542 1.021 1.252 1.021 2.128 0 .963-.406 1.746-1.221 2.351-.635.47-1.505.784-2.609.94l-.505-.779c.968-.104 1.739-.337 2.317-.7.733-.458 1.101-1.066 1.101-1.823 0-.772-.341-1.363-1.021-1.772-.345-.21-.764-.344-1.256-.401-.604 1.422-1.4 2.598-2.387 3.527.035.352.102.715.201 1.09l-.849.314-.126-.773c-.654.462-1.27.693-1.847.693-.696 0-1.044-.407-1.044-1.222 0-1.104.591-2.103 1.771-2.993.227-.165.532-.352.918-.562.012-.524.046-1.128.104-1.812-.585.046-1.143.069-1.675.069l-.493-.011-.071-.822m2.127 3.384c-.268.161-.545.392-.831.694-.612.619-.94 1.226-.986 1.817l-.017.121.017.138c0 .252.112.378.339.378.492 0 1.02-.258 1.582-.773-.057-.613-.092-1.404-.104-2.375m2.455-.884c-.57.08-1.111.226-1.623.436 0 .883.018 1.581.052 2.093.634-.707 1.158-1.55 1.571-2.529"/><path fill="#1A1A1A" d="M8.517 11.735l-.734-2.409h-3.69l-.734 2.409h-2.313l3.573-10.165h2.625l3.587 10.165h-2.314m-1.246-4.21c-.679-2.183-1.062-3.418-1.149-3.704-.083-.286-.143-.512-.18-.678-.153.59-.589 2.051-1.309 4.382h2.638"/><path fill="#BCBCBC" d="M12.817 13.5v2.5h10.757l.98-2.5h-11.737z"/><path fill="#3692D0" d="M.011 13.511h3.569l2.367-3.116 2.367 3.116h3.57v2.484h-11.873v-2.484z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.8 KiB

BIN
lib/jquery.uls/images/language.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 402 B

1
lib/jquery.uls/images/language.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><title>language</title><path d="M20 18h-1.44a.61.61 0 0 1-.4-.12.81.81 0 0 1-.23-.31L17 15h-5l-1 2.54a.77.77 0 0 1-.22.3.59.59 0 0 1-.4.14H9l4.55-11.47h1.89zm-3.53-4.31L14.89 9.5a11.62 11.62 0 0 1-.39-1.24q-.09.37-.19.69l-.19.56-1.58 4.19zM10.17 12.11a13.43 13.43 0 0 1-2.91-1.41 11.46 11.46 0 0 0 2.81-5.37H12V4H7.31a4 4 0 0 0-.2-.56C6.87 2.79 6.6 2 6.6 2l-1.47.5s.4.89.6 1.5H0v1.33h2.15A11.23 11.23 0 0 0 5 10.7a17.19 17.19 0 0 1-5 2.1q.56.82.87 1.38a23.28 23.28 0 0 0 5.22-2.51 15.64 15.64 0 0 0 3.56 1.77zM3.63 5.33h4.91a8.11 8.11 0 0 1-2.45 4.45 9.11 9.11 0 0 1-2.46-4.45z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 707 B

103
lib/jquery.uls/src/jquery.uls.core.js
View File

@@ -24,17 +24,17 @@
var template, ULS; var template, ULS;
// Region numbers in id attributes also appear in the langdb. // Region numbers in id attributes also appear in the langdb.
/*jshint multistr:true */ // eslint-disable-next-line no-multi-str
template = '<div class="grid uls-menu"> \ template = '<div class="grid uls-menu"> \
<div id="search" class="row uls-search"> \ <div id="search" class="row uls-search"> \
<div class="uls-search-wrapper"> \ <div class="uls-search-wrapper"> \
<label class="uls-search-label" for="uls-languagefilter"></label>\ <label class="uls-search-label" for="uls-languagefilter"></label>\
<div class="uls-search-input-wrapper">\ <div class="uls-search-input-wrapper">\
<span id="uls-languagefilter-clear" class="uls-languagefilter-clear"></span>\ <span class="uls-languagefilter-clear"></span>\
<input type="text" class="uls-filterinput uls-filtersuggestion"\ <input type="text" class="uls-filterinput uls-filtersuggestion"\
id="uls-filtersuggestion" disabled="true" autocomplete="off">\ disabled="true" autocomplete="off">\
<input type="text" class="uls-filterinput uls-languagefilter"\ <input type="text" class="uls-filterinput uls-languagefilter"\
id="uls-languagefilter" data-clear="uls-languagefilter-clear"\ data-clear="uls-languagefilter-clear"\
data-suggestion="uls-filtersuggestion"\ data-suggestion="uls-filtersuggestion"\
placeholder="Search for a language" autocomplete="off">\ placeholder="Search for a language" autocomplete="off">\
</div>\ </div>\
@@ -43,42 +43,20 @@
<div class="row uls-language-list"></div>\ <div class="row uls-language-list"></div>\
<div class="row" id="uls-settings-block"></div>\ <div class="row" id="uls-settings-block"></div>\
</div>'; </div>';
/*jshint multistr:false */
/**
* Count the number of keys in an object.
* Works in a cross-browser way.
* @param {Object} The object.
*/
function objectLength ( obj ) {
var count, key;
// Some old browsers don't support Object.keys
if ( Object.keys ) {
return Object.keys( obj ).length;
}
count = 0;
for ( key in obj ) {
if ( Object.prototype.hasOwnProperty.call( obj, key ) ) {
count++;
}
}
return count;
}
/** /**
* ULS Public class definition * ULS Public class definition
* @param {Element} element
* @param {Object} options
*/ */
ULS = function ( element, options ) { ULS = function ( element, options ) {
var code;
this.$element = $( element ); this.$element = $( element );
this.options = $.extend( {}, $.fn.uls.defaults, options ); this.options = $.extend( {}, $.fn.uls.defaults, options );
this.$menu = $( template ); this.$menu = $( template );
this.languages = this.options.languages; this.languages = this.options.languages;
for ( var code in this.languages ) { for ( 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 ];
@@ -90,7 +68,7 @@
this.shown = false; this.shown = false;
this.initialized = false; this.initialized = false;
this.$languageFilter = this.$menu.find( '#uls-languagefilter' ); this.$languageFilter = this.$menu.find( '.uls-languagefilter' );
this.$resultsView = this.$menu.find( '.uls-language-list' ); this.$resultsView = this.$menu.find( '.uls-language-list' );
this.render(); this.render();
@@ -131,7 +109,7 @@
/** /**
* Calculate the position of ULS * Calculate the position of ULS
* Returns an object with top and left properties. * Returns an object with top and left properties.
* @returns {Object} * @return {Object}
*/ */
position: function () { position: function () {
var pos, var pos,
@@ -149,7 +127,6 @@
left = $( window ).width() / 2 - this.$menu.outerWidth() / 2; left = $( window ).width() / 2 - this.$menu.outerWidth() / 2;
} }
return { return {
top: top, top: top,
left: left left: left
@@ -213,13 +190,6 @@
// Rendering stuff here // Rendering stuff here
}, },
/**
* Callback for no results found context.
*/
noresults: function () {
this.$resultsView.lcd( 'noResults' );
},
/** /**
* Callback for results found context. * Callback for results found context.
*/ */
@@ -255,26 +225,28 @@
this.$menu.on( 'keydown', $.proxy( this.keypress, this ) ); this.$menu.on( 'keydown', $.proxy( this.keypress, this ) );
} }
languagesCount = objectLength( this.options.languages ); languagesCount = Object.keys( this.options.languages ).length;
lcd = this.$resultsView.lcd( { lcd = this.$resultsView.lcd( {
languages: this.languages, languages: this.languages,
columns: columnsOptions[ this.getMenuWidth() ], columns: columnsOptions[ this.getMenuWidth() ],
quickList: languagesCount > 12 ? this.options.quickList : [], quickList: languagesCount > 12 ? this.options.quickList : [],
clickhandler: $.proxy( this.select, this ), clickhandler: $.proxy( this.select, this ),
source: this.$languageFilter,
showRegions: this.options.showRegions, showRegions: this.options.showRegions,
languageDecorator: this.options.languageDecorator languageDecorator: this.options.languageDecorator,
noResultsTemplate: this.options.noResultsTemplate,
itemsPerColumn: this.options.itemsPerColumn,
groupByRegion: this.options.groupByRegion
} ).data( 'lcd' ); } ).data( 'lcd' );
this.$languageFilter.languagefilter( { this.$languageFilter.languagefilter( {
$target: lcd, lcd: lcd,
languages: this.languages, languages: this.languages,
searchAPI: this.options.searchAPI, searchAPI: this.options.searchAPI,
onSelect: $.proxy( this.select, this ) onSelect: $.proxy( this.select, this )
} ); } );
this.$languageFilter.on( 'noresults.uls', $.proxy( this.noresults, this ) ); this.$languageFilter.on( 'noresults.uls', $.proxy( lcd.noResults, lcd ) );
this.$languageFilter.on( 'resultsfound.uls', $.proxy( this.success, this ) ); this.$languageFilter.on( 'resultsfound.uls', $.proxy( this.success, this ) );
$( 'html' ).click( $.proxy( this.cancel, this ) ); $( 'html' ).click( $.proxy( this.cancel, this ) );
@@ -282,7 +254,7 @@
/** /**
* On select handler for search results * On select handler for search results
* @param langCode * @param {string} langCode
*/ */
select: function ( langCode ) { select: function ( langCode ) {
this.hide(); this.hide();
@@ -293,6 +265,7 @@
/** /**
* On cancel handler for the uls menu * On cancel handler for the uls menu
* @param {Event} e
*/ */
cancel: function ( e ) { cancel: function ( e ) {
if ( e && ( this.$element.is( e.target ) || $.contains( this.$element[ 0 ], e.target ) ) ) { if ( e && ( this.$element.is( e.target ) || $.contains( this.$element[ 0 ], e.target ) ) ) {
@@ -347,7 +320,7 @@
/** /**
* Get the panel menu width parameter * Get the panel menu width parameter
* @return string * @return {string}
*/ */
getMenuWidth: function () { getMenuWidth: function () {
var languagesCount; var languagesCount;
@@ -356,7 +329,7 @@
return this.options.menuWidth; return this.options.menuWidth;
} }
languagesCount = objectLength( this.options.languages ); languagesCount = Object.keys( this.options.languages ).length;
if ( languagesCount < 25 ) { if ( languagesCount < 25 ) {
return 'narrow'; return 'narrow';
@@ -394,15 +367,35 @@
}; };
$.fn.uls.defaults = { $.fn.uls.defaults = {
onSelect: null, // Callback function to be called when a language is selected // CSS top position for the dialog
searchAPI: null, // Language search API top: undefined,
languages: $.uls.data.getAutonyms(), // Languages to be used for ULS, default is all languages // CSS left position for the dialog
quickList: [], // Array of language codes or function that returns such left: undefined,
// Callback function when user selects a language
onSelect: undefined,
// Callback function when the dialog is closed without selecting a language
onCancel: undefined,
// Callback function when ULS has initialized
onReady: undefined,
// Callback function when ULS dialog is shown
onVisible: undefined,
// Languages to be used for ULS, default is all languages
languages: $.uls.data.getAutonyms(),
// 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. // If not specified, it will be set automatically.
menuWidth: null, menuWidth: undefined,
showRegions: [ 'WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA' ], // Used by LCD
languageDecorator: null // Callback function to be called when a language link is prepared - for custom decoration. quickList: [],
// Used by LCD
showRegions: undefined,
// Used by LCD
languageDecorator: undefined,
// Used by LCD
itemsPerColumn: undefined,
// Used by LCD
groupByRegion: undefined,
// Used by LanguageFilter
searchAPI: undefined
}; };
// Define a dummy i18n function, if jquery.i18n not integrated. // Define a dummy i18n function, if jquery.i18n not integrated.

69
lib/jquery.uls/src/jquery.uls.data.utils.js
View File

@@ -22,8 +22,8 @@
/** /**
* Is this language a redirect to another language? * Is this language a redirect to another language?
* @param language string Language code * @param {string} language Language code
* @return Target language code if it's a redirect or false if it's not * @return {string|boolean} Target language code if it's a redirect or false if it's not
*/ */
$.uls.data.isRedirect = function ( language ) { $.uls.data.isRedirect = function ( language ) {
return ( $.uls.data.languages[ language ] !== undefined && return ( $.uls.data.languages[ language ] !== undefined &&
@@ -32,8 +32,8 @@
/** /**
* Returns the script of the language. * Returns the script of the language.
* @param language string Language code * @param {string} language Language code
* @return string * @return {string}
*/ */
$.uls.data.getScript = function ( language ) { $.uls.data.getScript = function ( language ) {
var target = $.uls.data.isRedirect( language ); var target = $.uls.data.isRedirect( language );
@@ -52,8 +52,8 @@
/** /**
* Returns the regions in which a language is spoken. * Returns the regions in which a language is spoken.
* @param language string Language code * @param {string} language Language code
* @return array|string 'UNKNOWN' * @return {string|string[]}
*/ */
$.uls.data.getRegions = function ( language ) { $.uls.data.getRegions = function ( language ) {
var target = $.uls.data.isRedirect( language ); var target = $.uls.data.isRedirect( language );
@@ -67,8 +67,8 @@
/** /**
* Returns the autonym of the language. * Returns the autonym of the language.
* @param language string Language code * @param {string} language Language code
* @return string * @return {string}
*/ */
$.uls.data.getAutonym = function ( language ) { $.uls.data.getAutonym = function ( language ) {
var target = $.uls.data.isRedirect( language ); var target = $.uls.data.isRedirect( language );
@@ -82,7 +82,7 @@
/** /**
* Returns all language codes and corresponding autonyms * Returns all language codes and corresponding autonyms
* @return array * @return {string[]}
*/ */
$.uls.data.getAutonyms = function () { $.uls.data.getAutonyms = function () {
var language, var language,
@@ -101,8 +101,8 @@
/** /**
* Returns all languages written in script. * Returns all languages written in script.
* @param script string * @param {string} script string
* @return array of strings (languages codes) * @return {string[]} languages codes
*/ */
$.uls.data.getLanguagesInScript = function ( script ) { $.uls.data.getLanguagesInScript = function ( script ) {
return $.uls.data.getLanguagesInScripts( [ script ] ); return $.uls.data.getLanguagesInScripts( [ script ] );
@@ -110,8 +110,8 @@
/** /**
* Returns all languages written in the given scripts. * Returns all languages written in the given scripts.
* @param scripts array of strings * @param {string[]} scripts
* @return array of strings (languages codes) * @return {string[]} languages codes
*/ */
$.uls.data.getLanguagesInScripts = function ( scripts ) { $.uls.data.getLanguagesInScripts = function ( scripts ) {
var language, i, var language, i,
@@ -136,8 +136,8 @@
/** /**
* Returns an associative array of languages in a region, * Returns an associative array of languages in a region,
* grouped by script group. * grouped by script group.
* @param region string Region code * @param {string} region Region code
* @return associative array * @return {object}
*/ */
$.uls.data.getLanguagesByScriptGroupInRegion = function ( region ) { $.uls.data.getLanguagesByScriptGroupInRegion = function ( region ) {
return $.uls.data.getLanguagesByScriptGroupInRegions( [ region ] ); return $.uls.data.getLanguagesByScriptGroupInRegions( [ region ] );
@@ -145,7 +145,7 @@
/** /**
* Get the given list of languages grouped by script. * Get the given list of languages grouped by script.
* @param languages Array of language codes * @param {string} languages Array of language codes
* @return {Object} Array of languages indexed by script codes * @return {Object} Array of languages indexed by script codes
*/ */
$.uls.data.getLanguagesByScriptGroup = function ( languages ) { $.uls.data.getLanguagesByScriptGroup = function ( languages ) {
@@ -170,8 +170,8 @@
/** /**
* Returns an associative array of languages in several regions, * Returns an associative array of languages in several regions,
* grouped by script group. * grouped by script group.
* @param regions array of strings - region codes * @param {string[]} regions region codes
* @return associative array * @return {Object}
*/ */
$.uls.data.getLanguagesByScriptGroupInRegions = function ( regions ) { $.uls.data.getLanguagesByScriptGroupInRegions = function ( regions ) {
var language, i, scriptGroup, var language, i, scriptGroup,
@@ -202,8 +202,8 @@
/** /**
* Returns the script group of a script or 'Other' if it doesn't * Returns the script group of a script or 'Other' if it doesn't
* belong to any group. * belong to any group.
* @param script string Script code * @param {string} script Script code
* @return string script group name * @return {string} script group name
*/ */
$.uls.data.getGroupOfScript = function ( script ) { $.uls.data.getGroupOfScript = function ( script ) {
var scriptGroup; var scriptGroup;
@@ -219,8 +219,8 @@
/** /**
* Returns the script group of a language. * Returns the script group of a language.
* @param language string Language code * @param {string} language Language code
* @return string script group name * @return {string} script group name
*/ */
$.uls.data.getScriptGroupOfLanguage = function ( language ) { $.uls.data.getScriptGroupOfLanguage = function ( language ) {
return $.uls.data.getGroupOfScript( $.uls.data.getScript( language ) ); return $.uls.data.getGroupOfScript( $.uls.data.getScript( language ) );
@@ -229,8 +229,9 @@
/** /**
* A callback for sorting languages by autonym. * A callback for sorting languages by autonym.
* Can be used as an argument to a sort function. * Can be used as an argument to a sort function.
* @param a string Language code * @param {string} a Language code
* @param b string Language code * @param {string} b Language code
* @return {number}
*/ */
$.uls.data.sortByAutonym = function ( a, b ) { $.uls.data.sortByAutonym = function ( a, b ) {
var autonymA = $.uls.data.getAutonym( a ) || a, var autonymA = $.uls.data.getAutonym( a ) || a,
@@ -241,8 +242,8 @@
/** /**
* Check if a language is right-to-left. * Check if a language is right-to-left.
* @param language string Language code * @param {string} language Language code
* @return boolean * @return {boolean}
*/ */
$.uls.data.isRtl = function ( language ) { $.uls.data.isRtl = function ( language ) {
return $.inArray( $.uls.data.getScript( language ), $.uls.data.rtlscripts ) !== -1; return $.inArray( $.uls.data.getScript( language ), $.uls.data.rtlscripts ) !== -1;
@@ -250,8 +251,8 @@
/** /**
* Return the direction of the language * Return the direction of the language
* @param language string Language code * @param {string} language Language code
* @return string * @return {string}
*/ */
$.uls.data.getDir = function ( language ) { $.uls.data.getDir = function ( language ) {
return $.uls.data.isRtl( language ) ? 'rtl' : 'ltr'; return $.uls.data.isRtl( language ) ? 'rtl' : 'ltr';
@@ -259,8 +260,8 @@
/** /**
* Returns the languages spoken in a territory. * Returns the languages spoken in a territory.
* @param territory string Territory code * @param {string} territory Territory code
* @return list of language codes * @return {string[]} list of language codes
*/ */
$.uls.data.getLanguagesInTerritory = function ( territory ) { $.uls.data.getLanguagesInTerritory = function ( territory ) {
return $.uls.data.territories[ territory ]; return $.uls.data.territories[ territory ];
@@ -271,8 +272,8 @@
* If the target option is provided, the language is defined as a redirect. * If the target option is provided, the language is defined as a redirect.
* Other possible options are script, regions and autonym. * Other possible options are script, regions and autonym.
* *
* @param code string New language code. * @param {string} code New language code.
* @param options Object Language properties. * @param {Object} options Language properties.
*/ */
$.uls.data.addLanguage = function ( code, options ) { $.uls.data.addLanguage = function ( code, options ) {
if ( options.target ) { if ( options.target ) {
@@ -285,8 +286,8 @@
/** /**
* Removes a language from the langdb in run time. * Removes a language from the langdb in run time.
* *
* @param code string Language code to delete. * @param {string} code Language code to delete.
* @return true if the language was removed, false otherwise. * @return {boolean} true if the language was removed, false otherwise.
*/ */
$.uls.data.deleteLanguage = function ( code ) { $.uls.data.deleteLanguage = function ( code ) {
if ( $.uls.data.languages[ code ] ) { if ( $.uls.data.languages[ code ] ) {

65
lib/jquery.uls/src/jquery.uls.languagefilter.js
View File

@@ -19,21 +19,34 @@
/** /**
* Usage: $( 'inputbox' ).languagefilter(); * Usage: $( 'inputbox' ).languagefilter();
* The values for autocompletion is from the options.languages. * The values for autocompletion is from the options.languages or options.searchAPI.
* The data is in the format of languagecode:languagename.
*/ */
( function ( $ ) { ( function ( $ ) {
'use strict'; 'use strict';
var LanguageFilter, delay; var LanguageFilter, delay;
/**
* Check if a prefix is visually prefix of a string
*
* @param {string} prefix
* @param {string} string
* @return {boolean}
*/
function isVisualPrefix( prefix, string ) {
// Pre-base vowel signs of Indic languages. A vowel sign is called pre-base if
// consonant + vowel becomes [vowel][consonant] when rendered. Eg: ക + െ => കെ
var prebases = 'െേൈൊോൌெேைொோௌେୈୋୌિਿिিেৈোৌෙේෛොෝෞ';
return prebases.indexOf( string[ prefix.length ] ) <= 0;
}
LanguageFilter = function ( element, options ) { LanguageFilter = function ( element, options ) {
this.$element = $( element ); this.$element = $( element );
this.options = $.extend( {}, $.fn.languagefilter.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.siblings( '.' + this.$element.data( 'suggestion' ) );
this.$clear = this.$element.parents().find( '#' + this.$element.data( 'clear' ) ); this.$clear = this.$element.siblings( '.' + this.$element.data( 'clear' ) );
this.selectedLanguage = null; this.selectedLanguage = null;
this.init(); this.init();
this.listen(); this.listen();
@@ -118,7 +131,7 @@
if ( !languageFilter.$element.val() ) { if ( !languageFilter.$element.val() ) {
languageFilter.clear(); languageFilter.clear();
} else { } else {
languageFilter.options.$target.empty(); languageFilter.options.lcd.empty();
languageFilter.search(); languageFilter.search();
} }
}, 300 ); }, 300 );
@@ -172,11 +185,13 @@
query = $.trim( this.$element.val() ).toLowerCase(); query = $.trim( this.$element.val() ).toLowerCase();
if ( query === '' ) { if ( query === '' ) {
this.options.lcd.setGroupByRegionOverride( null );
languages.map( this.render.bind( this ) ); languages.map( this.render.bind( this ) );
this.resultHandler( query, languages ); this.resultHandler( query, languages );
return; return;
} }
this.options.lcd.setGroupByRegionOverride( false );
// Local search results // Local search results
results = languages.filter( function ( langCode ) { results = languages.filter( function ( langCode ) {
return this.filter( langCode, query ); return this.filter( langCode, query );
@@ -213,7 +228,7 @@
* Handler method to be called once search is over. * Handler method to be called once search is over.
* Based on search result triggers resultsfound or noresults events * Based on search result triggers resultsfound or noresults events
* @param {string} query * @param {string} query
* @param {number} resultCount * @param {string[]} results
* @param {string} [autofillLabel] * @param {string} [autofillLabel]
*/ */
resultHandler: function ( query, results, autofillLabel ) { resultHandler: function ( query, results, autofillLabel ) {
@@ -273,18 +288,11 @@
}, },
render: function ( langCode ) { render: function ( langCode ) {
// This is actually instance of LanguageCategoryDisplay and not jQuery! return this.options.lcd.append( langCode );
var $target = this.options.$target;
if ( !$target ) {
return false;
}
return $target.append( langCode );
}, },
escapeRegex: function ( value ) { escapeRegex: function ( value ) {
return value.replace( /[\-\[\]{}()*+?.,\\\^$\|#\s]/g, '\\$&' ); return value.replace( /[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&' );
}, },
/** /**
@@ -294,6 +302,9 @@
* b) Language autonym 'starts with' search string. * b) Language autonym 'starts with' search string.
* c) ISO 639 code match with search string. * c) ISO 639 code match with search string.
* d) ISO 15924 code for the script match the search string. * d) ISO 15924 code for the script match the search string.
* @param {string} langCode
* @param {string} searchTerm
* @return {boolean}
*/ */
filter: function ( langCode, searchTerm ) { filter: function ( langCode, searchTerm ) {
// FIXME script is ISO 15924 code. We might need actual name of script. // FIXME script is ISO 15924 code. We might need actual name of script.
@@ -335,24 +346,16 @@
}; };
$.fn.languagefilter.defaults = { $.fn.languagefilter.defaults = {
$target: null, // Where to append the results // LanguageCategoryDisplay
searchAPI: null, lcd: undefined,
languages: null, // Languages as code:name format. // URL to which we append query parameter with the query value
onSelect: null // Language select handler - like enter in filter textbox. searchAPI: undefined,
// Object of language tags to language names
languages: [],
// Callback function when language is selected
onSelect: undefined
}; };
$.fn.languagefilter.Constructor = LanguageFilter; $.fn.languagefilter.Constructor = LanguageFilter;
/**
* Check if a prefix is visually prefix of a string
*
* @param {string} prefix
* @param {string} string
*/
function isVisualPrefix( prefix, string ) {
// Pre-base vowel signs of Indic languages. A vowel sign is called pre-base if
// consonant + vowel becomes [vowel][consonant] when rendered. Eg: ക + െ => കെ
var prebases = 'െേൈൊോൌெேைொோௌେୈୋୌિਿिিেৈোৌෙේෛොෝෞ';
return prebases.indexOf( string[ prefix.length ] ) <= 0;
}
}( jQuery ) ); }( jQuery ) );

236
lib/jquery.uls/src/jquery.uls.lcd.js
View File

@@ -22,43 +22,48 @@
( function ( $ ) { ( function ( $ ) {
'use strict'; 'use strict';
var noResultsTemplate, LanguageCategoryDisplay; // eslint-disable-next-line no-multi-str
var noResultsTemplate = '<div class="uls-no-results-view"> \
<h2 data-i18n="uls-no-results-found" class="uls-no-results-found-title">No results found</h2> \
<div class="uls-no-results-suggestions"></div> \
<div class="uls-no-found-more"> \
<div><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>\
</p></div> \
</div></div>';
noResultsTemplate = $( '<div>' ).addClass( 'uls-no-results-view hide' ); /**
noResultsTemplate.append( * Language category display
$( '<h2>' ) * @param {Element} element The container element to which the languages to be displayed
.attr( 'data-i18n', 'uls-no-results-found' ) * @param {Object} [options] Configuration object
.addClass( 'uls-no-results-found-title' ) * @cfg {Object} [languages] Selectable languages. Keyed by language code, values are autonyms.
.text( 'No results found' ), * @cfg {string[]} [showRegions] Array of region codes to show. Default is
$( '<div>' ) * [ 'WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA' ]
.addClass( 'uls-no-found-more' ) * @cfg {number} [itemsPerColumn] Number of languages per column.
.append( * @cfg {number} [columns] Number of columns for languages. Default is 4.
$( '<div>' ) * @cfg {Function} [languageDecorator] Callback function to be called when a language
.addClass( '' ) * link is prepared - for custom decoration.
.append( * @cfg {Function|string[]} [quickList] The languages to display as suggestions for quick selection.
$( '<p>' ).append( * @cfg {Function} [clickhandler] Callback when language is selected.
$( '<span>' ) * @cfg {jQuery|Function} [noResultsTemplate]
.attr( 'data-i18n', 'uls-search-help' ) */
.text( 'You can search by language name, script name, ISO code of language or you can browse by region.' ) function LanguageCategoryDisplay( element, options ) {
)
)
)
);
LanguageCategoryDisplay = function ( element, options ) {
this.$element = $( element ); this.$element = $( element );
this.options = $.extend( {}, $.fn.lcd.defaults, options ); this.options = $.extend( {}, $.fn.lcd.defaults, options );
// Ensure the internal region 'all' is always present
if ( this.options.showRegions.indexOf( 'all' ) === -1 ) {
this.options.showRegions.push( 'all' );
}
this.$element.addClass( 'uls-lcd' ); this.$element.addClass( 'uls-lcd' );
this.regionLanguages = {}; this.regionLanguages = {};
this.renderTimeout = null; this.renderTimeout = null;
this.cachedQuicklist = null; this.cachedQuicklist = null;
this.groupByRegionOverride = null;
this.$element.append( noResultsTemplate.clone() );
this.$noResults = this.$element.children( '.uls-no-results-view' );
this.render(); this.render();
this.listen(); this.listen();
}; }
LanguageCategoryDisplay.prototype = { LanguageCategoryDisplay.prototype = {
constructor: LanguageCategoryDisplay, constructor: LanguageCategoryDisplay,
@@ -67,24 +72,21 @@
* Adds language to the language list. * Adds language to the language list.
* @param {string} langCode * @param {string} langCode
* @param {string} [regionCode] * @param {string} [regionCode]
* @return {boolean} Whether the language was added. * @return {boolean} Whether the language was known and accepted
*/ */
append: function ( langCode, regionCode ) { append: function ( langCode, regionCode ) {
var lcd = this, var i, regions;
i, regions;
if ( !$.uls.data.languages[ langCode ] ) { if ( !$.uls.data.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;
} }
// Show everything in one region when there is only one column if ( !this.isGroupingByRegionEnabled() ) {
if ( lcd.options.columns === 1 ) { regions = [ 'all' ];
regions = [ 'WW' ];
// Languages are expected to be repeated in this case, // Make sure we do not get duplicates
// and we only want to show them once if ( this.regionLanguages.all.indexOf( langCode ) > -1 ) {
if ( $.inArray( langCode, this.regionLanguages.WW ) > -1 ) {
return true; return true;
} }
} else { } else {
@@ -101,21 +103,45 @@
// Work around the bad interface, delay rendering until we have got // Work around the bad interface, delay rendering until we have got
// all the languages to speed up performance. // all the languages to speed up performance.
window.clearTimeout( this.renderTimeout ); clearTimeout( this.renderTimeout );
this.renderTimeout = window.setTimeout( function () { this.renderTimeout = setTimeout( function () {
lcd.renderRegions(); this.renderRegions();
}, 50 ); }.bind( this ), 50 );
return true; return true;
}, },
/**
* Whether we should render languages grouped to geographic regions.
* @return {boolean}
*/
isGroupingByRegionEnabled: function () {
if ( this.groupByRegionOverride !== null ) {
return this.groupByRegionOverride;
} else if ( this.options.groupByRegion !== 'auto' ) {
return this.options.groupByRegion;
} else {
return this.options.columns > 1;
}
},
/**
* Override the default region grouping setting.
* This is to allow LanguageFilter to disable grouping when displaying search results.
*
* @param {boolean|null} val True to force grouping, false to disable, null to undo override.
*/
setGroupByRegionOverride: function ( val ) {
this.groupByRegionOverride = val;
},
render: function () { render: function () {
var $section, $quicklist, var $section,
lcd = this, $quicklist = this.buildQuicklist(),
narrowMode = this.options.columns === 1,
regions = [], regions = [],
regionNames = { regionNames = {
// These are fallback text when i18n library not present // These are fallback text when i18n library not present
all: 'All languages', // Used if there is quicklist and no region grouping
WW: 'Worldwide', WW: 'Worldwide',
SP: 'Special', SP: 'Special',
AM: 'America', AM: 'America',
@@ -126,42 +152,30 @@
PA: 'Pacific' PA: 'Pacific'
}; };
$quicklist = this.buildQuicklist(); if ( $quicklist.length ) {
regions.push( $quicklist ); regions.push( $quicklist );
} else {
if ( narrowMode && $quicklist.length ) { // We use CSS to hide the header for 'all' when quicklist is NOT present
regions.push( $( '<h3>' ) this.$element.addClass( 'uls-lcd--no-quicklist' );
.attr( 'data-i18n', 'uls-region-all' )
.addClass( 'uls-lcd-region-title' )
.text( 'All languages' )
);
} }
$.each( $.uls.data.regiongroups, function ( regionCode ) { this.options.showRegions.forEach( function ( regionCode ) {
lcd.regionLanguages[ regionCode ] = []; this.regionLanguages[ regionCode ] = [];
// Don't show the region unless it was enabled
if ( $.inArray( regionCode, lcd.options.showRegions ) === -1 ) {
return;
}
$section = $( '<div>' ) $section = $( '<div>' )
.addClass( 'uls-lcd-region-section hide' ) .addClass( 'uls-lcd-region-section hide' )
.attr( 'id', regionCode ); .attr( 'data-region', regionCode );
// Show a region heading, unless we are using a narrow ULS $( '<h3>' )
if ( !narrowMode ) {
$section.append( $( '<h3>' )
.attr( 'data-i18n', 'uls-region-' + regionCode ) .attr( 'data-i18n', 'uls-region-' + regionCode )
.addClass( 'uls-lcd-region-title' ) .addClass( 'uls-lcd-region-title' )
.text( regionNames[ regionCode ] ) .text( regionNames[ regionCode ] )
); .appendTo( $section );
}
regions.push( $section ); regions.push( $section );
} ); }.bind( this ) );
lcd.$element.append( regions ); this.$element.append( regions );
this.i18n(); this.i18n();
}, },
@@ -173,12 +187,12 @@
var languages, var languages,
lcd = this; lcd = this;
this.$noResults.addClass( 'hide' ); this.$element.removeClass( 'uls-no-results' );
this.$element.children( '.uls-lcd-region-section' ).each( function () { this.$element.children( '.uls-lcd-region-section' ).each( function () {
var $region = $( this ), var $region = $( this ),
regionCode = $region.attr( 'id' ); regionCode = $region.data( 'region' );
if ( $region.is( '#uls-lcd-quicklist' ) ) { if ( $region.is( '.uls-lcd-quicklist' ) ) {
return; return;
} }
@@ -241,8 +255,9 @@
nextScript = $.uls.data.getScriptGroupOfLanguage( languages[ i + 1 ] ); nextScript = $.uls.data.getScriptGroupOfLanguage( languages[ i + 1 ] );
lastItem = languagesCount - i === 1; lastItem = languagesCount - i === 1;
// Force column break if script changes and column has more than one row already // Force column break if script changes and column has more than one row already,
if ( i === 0 ) { // but only if grouping by region
if ( i === 0 || !this.isGroupingByRegionEnabled() ) {
currentScript = $.uls.data.getScriptGroupOfLanguage( languages[ i ] ); currentScript = $.uls.data.getScriptGroupOfLanguage( languages[ i ] );
} else if ( currentScript !== nextScript && items.length > 1 ) { } else if ( currentScript !== nextScript && items.length > 1 ) {
force = true; force = true;
@@ -287,7 +302,6 @@
a.lang = code; a.lang = code;
a.dir = $.uls.data.getDir( code ); a.dir = $.uls.data.getDir( code );
li.appendChild( a ); li.appendChild( a );
if ( this.options.languageDecorator ) { if ( this.options.languageDecorator ) {
this.options.languageDecorator( $( a ), code ); this.options.languageDecorator( $( a ), code );
@@ -303,7 +317,7 @@
* Adds quicklist as a region. * Adds quicklist as a region.
*/ */
quicklist: function () { quicklist: function () {
this.$element.find( '#uls-lcd-quicklist' ).removeClass( 'hide' ); this.$element.find( '.uls-lcd-quicklist' ).removeClass( 'hide' );
}, },
buildQuicklist: function () { buildQuicklist: function () {
@@ -328,8 +342,7 @@
quickList.sort( $.uls.data.sortByAutonym ); quickList.sort( $.uls.data.sortByAutonym );
$quickListSection = $( '<div>' ) $quickListSection = $( '<div>' )
.addClass( 'uls-lcd-region-section' ) .addClass( 'uls-lcd-region-section uls-lcd-quicklist' );
.attr( 'id', 'uls-lcd-quicklist' );
$quickListSectionTitle = $( '<h3>' ) $quickListSectionTitle = $( '<h3>' )
.attr( 'data-i18n', 'uls-common-languages' ) .attr( 'data-i18n', 'uls-common-languages' )
@@ -356,30 +369,41 @@
} }
}, },
/**
* Called when a fresh search is started
*/
empty: function () { empty: function () {
this.$element.find( '#uls-lcd-quicklist' ).addClass( 'hide' ); this.$element.addClass( 'uls-lcd--no-quicklist' );
this.$element.find( '.uls-lcd-quicklist' ).addClass( 'hide' );
}, },
focus: function () { focus: function () {
this.$element.focus(); this.$element.focus();
}, },
noResults: function () { /**
this.$noResults.removeClass( 'hide' ); * No-results event handler
this.$noResults.siblings( '.uls-lcd-region-section' ).addClass( 'hide' ); * @param {Event} event
* @param {string} [currentSearchQuery] Current search query that gave mp results
*/
noResults: function ( event, currentSearchQuery ) {
var $noResults;
// Only build the data once this.$element.addClass( 'uls-no-results' );
if ( this.$noResults.find( '.uls-lcd-region-title' ).length ) {
return; this.$element.find( '.uls-no-results-view' ).remove();
if ( typeof this.options.noResultsTemplate === 'function' ) {
$noResults =
this.options.noResultsTemplate.call( this, currentSearchQuery );
} else if ( this.options.noResultsTemplate instanceof jQuery ) {
$noResults = this.options.noResultsTemplate;
} else {
throw new Error( 'noResultsTemplate option must be ' +
'either jQuery or function returning jQuery' );
} }
var $suggestions = this.buildQuicklist().clone(); this.$element.append( $noResults.addClass( 'uls-no-results-view' ) );
$suggestions.removeClass( 'hide' ).removeAttr( 'id' );
$suggestions.find( 'h3' )
.data( 'i18n', 'uls-no-results-suggestion-title' )
.text( 'You may be interested in:' )
.i18n();
this.$noResults.find( 'h2' ).after( $suggestions );
}, },
listen: function () { listen: function () {
@@ -410,15 +434,37 @@
}; };
$.fn.lcd.defaults = { $.fn.lcd.defaults = {
languages: null, // List of languages to show
languages: [],
// List of regions to show
showRegions: [ 'WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA' ], showRegions: [ 'WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA' ],
// Whether to group by region, defaults to true when columns > 1
groupByRegion: 'auto',
// How many items per column until new "row" starts
itemsPerColumn: 8, itemsPerColumn: 8,
// Other supported values are 1 and 2. // Number of columns, only 1, 2 and 4 are supported
// Other values will have rendering issues.
columns: 4, columns: 4,
languageDecorator: null, // Callback function for language item styling
quickList: [] languageDecorator: undefined,
// Likely candidates
quickList: [],
// Callback function for language selection
clickhandler: undefined,
// Callback function when no search results
noResultsTemplate: function () {
var $suggestionsContainer, $suggestions,
$noResultsTemplate = $( noResultsTemplate );
$suggestions = this.buildQuicklist().clone();
$suggestions.removeClass( 'hide' )
.find( 'h3' )
.data( 'i18n', 'uls-no-results-suggestion-title' )
.text( 'You may be interested in:' )
.i18n();
$suggestionsContainer = $noResultsTemplate.find( '.uls-no-results-suggestions' );
$suggestionsContainer.append( $suggestions );
return $noResultsTemplate;
}
}; };
$.fn.lcd.Constructor = LanguageCategoryDisplay;
}( jQuery ) ); }( jQuery ) );

6
resources/css/ext.uls.pt-monobook.less Normal file
View File

@@ -0,0 +1,6 @@
/* stylelint-disable selector-max-id */
#pt-uls a.uls-trigger {
// Use same padding-left as #pt-userpage
padding-left: 20px;
}

10
resources/css/ext.uls.pt.less
View File

@@ -13,12 +13,16 @@
*/ */
.uls-trigger { .uls-trigger {
background: transparent no-repeat scroll left center; background: transparent no-repeat scroll left center;
.background-image-svg( '../../lib/jquery.uls/images/icon-language.svg', '../../lib/jquery.uls/images/icon-language.png' ); .background-image-svg( '../../lib/jquery.uls/images/language.svg', '../../lib/jquery.uls/images/language.png' );
padding-left: 30px; // Let the SVG image fit without cropping or stretch
background-size: contain;
padding-left: 24px;
} }
#pt-uls a.uls-trigger { #pt-uls a.uls-trigger {
padding-left: 30px; padding-left: 24px;
// Let the SVG image fit without cropping or stretch
background-size: contain;
/* Fix alignment in vector: https://phabricator.wikimedia.org/T61239 */ /* Fix alignment in vector: https://phabricator.wikimedia.org/T61239 */
line-height: 1; line-height: 1;
} }