bryce/jquery.uls
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into srpski

Browse Source
This commit is contained in:
Niklas Laxström
2018-02-06 16:31:46 +02:00
committed by GitHub
parent 1dcb533b42 54a466ee52
commit 2b1cc8678f
46 changed files with 644 additions and 631 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
src/jquery.uls.core.js
View File

@@ -24,17 +24,17 @@
var template, ULS;
// 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"> \
<div id="search" class="row uls-search"> \
<div class="uls-search-wrapper"> \
<label class="uls-search-label" for="uls-languagefilter"></label>\
<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"\
id="uls-filtersuggestion" disabled="true" autocomplete="off">\
disabled="true" autocomplete="off">\
<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"\
placeholder="Search for a language" autocomplete="off">\
</div>\
@@ -43,42 +43,20 @@
<div class="row uls-language-list"></div>\
<div class="row" id="uls-settings-block"></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
* @param {Element} element
* @param {Object} options
*/
ULS = function ( element, options ) {
var code;
this.$element = $( element );
this.options = $.extend( {}, $.fn.uls.defaults, options );
this.$menu = $( template );
this.languages = this.options.languages;
for ( var code in this.languages ) {
for ( code in this.languages ) {
if ( $.uls.data.languages[ code ] === undefined ) {
// Language is unknown to ULS.
delete this.languages[ code ];
@@ -90,7 +68,7 @@
this.shown = 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.render();
@@ -131,7 +109,7 @@
/**
* Calculate the position of ULS
* Returns an object with top and left properties.
* @returns {Object}
* @return {Object}
*/
position: function () {
var pos,
@@ -142,14 +120,13 @@
pos = $.extend( {}, this.$element.offset(), {
height: this.$element[ 0 ].offsetHeight
} );
top = pos.top + pos.height;
top = pos.top + pos.height;
}
if ( left === undefined ) {
left = $( window ).width() / 2 - this.$menu.outerWidth() / 2;
}
return {
top: top,
left: left
@@ -166,7 +143,7 @@
narrow: 'uls-narrow'
};
this.$menu.addClass( widthClasses[this.getMenuWidth()] );
this.$menu.addClass( widthClasses[ this.getMenuWidth() ] );
if ( !this.initialized ) {
$( 'body' ).prepend( this.$menu );
@@ -213,13 +190,6 @@
// Rendering stuff here
},
/**
* Callback for no results found context.
*/
noresults: function () {
this.$resultsView.lcd( 'noResults' );
},
/**
* Callback for results found context.
*/
@@ -248,33 +218,30 @@
} );
// Handle key press events on the menu
this.$menu.on( 'keypress', $.proxy( this.keypress, this ) )
.on( 'keyup', $.proxy( this.keyup, this ) );
this.$menu.on( 'keydown', $.proxy( this.keypress, this ) );
if ( this.eventSupported( 'keydown' ) ) {
this.$menu.on( 'keydown', $.proxy( this.keypress, this ) );
}
languagesCount = objectLength( this.options.languages );
languagesCount = Object.keys( this.options.languages ).length;
lcd = this.$resultsView.lcd( {
languages: this.languages,
columns: columnsOptions[ this.getMenuWidth() ],
quickList: languagesCount > 12 ? this.options.quickList : [],
clickhandler: $.proxy( this.select, this ),
source: this.$languageFilter,
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' );
this.$languageFilter.languagefilter( {
$target: lcd,
lcd: lcd,
languages: this.languages,
searchAPI: this.options.searchAPI,
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 ) );
$( 'html' ).click( $.proxy( this.cancel, this ) );
@@ -282,7 +249,7 @@
/**
* On select handler for search results
* @param langCode
* @param {string} langCode
*/
select: function ( langCode ) {
this.hide();
@@ -293,27 +260,16 @@
/**
* On cancel handler for the uls menu
* @param {Event} 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 ) ) ) {
return;
}
this.hide();
},
keyup: function ( e ) {
if ( !this.shown ) {
return;
}
if ( e.keyCode === 27 ) { // escape
this.cancel();
e.preventDefault();
e.stopPropagation();
}
},
keypress: function ( e ) {
if ( !this.shown ) {
return;
@@ -334,20 +290,9 @@
}
},
eventSupported: function ( eventName ) {
var isSupported = eventName in this.$menu;
if ( !isSupported ) {
this.$element.setAttribute( eventName, 'return;' );
isSupported = typeof this.$element[ eventName ] === 'function';
}
return isSupported;
},
/**
* Get the panel menu width parameter
* @return string
* @return {string}
*/
getMenuWidth: function () {
var languagesCount;
@@ -356,7 +301,7 @@
return this.options.menuWidth;
}
languagesCount = objectLength( this.options.languages );
languagesCount = Object.keys( this.options.languages ).length;
if ( languagesCount < 25 ) {
return 'narrow';
@@ -394,15 +339,35 @@
};
$.fn.uls.defaults = {
onSelect: null, // Callback function to be called when a language is selected
searchAPI: null, // Language search API
languages: $.uls.data.getAutonyms(), // Languages to be used for ULS, default is all languages
quickList: [], // Array of language codes or function that returns such
// CSS top position for the dialog
top: undefined,
// CSS left position for the dialog
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).
// If not specified, it will be set automatically.
menuWidth: null,
showRegions: [ 'WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA' ],
languageDecorator: null // Callback function to be called when a language link is prepared - for custom decoration.
menuWidth: undefined,
// Used by LCD
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.

20
src/jquery.uls.data.js
View File

@@ -897,7 +897,8 @@ module.exports=( function ( $ ) {
"EU",
"AM",
"AF",
"WW"
"WW",
"PA"
],
"español"
],
@@ -1360,6 +1361,14 @@ module.exports=( function ( $ ) {
],
"Հայերեն"
],
"hyw": [
"Armn",
[
"EU",
"ME"
],
"արեւմտահայերէն"
],
"hz": [
"Latn",
[
@@ -1801,6 +1810,13 @@ module.exports=( function ( $ ) {
],
"Kurdî"
],
"kum": [
"Cyrl",
[
"EU"
],
"къумукъ"
],
"kv": [
"Cyrl",
[
@@ -5084,6 +5100,7 @@ module.exports=( function ( $ ) {
"kbd",
"myv",
"mdf",
"kum",
"kv",
"lez",
"krc",
@@ -5449,6 +5466,5 @@ module.exports=( function ( $ ) {
]
}
}
} ( jQuery ) );
},{}]},{},[1]);

117
src/jquery.uls.data.utils.js
View File

@@ -22,18 +22,18 @@
/**
* Is this language a redirect to another language?
* @param language string Language code
* @return Target language code if it's a redirect or false if it's not
* @param {string} language Language code
* @return {string|boolean} Target language code if it's a redirect or false if it's not
*/
$.uls.data.isRedirect = function ( language ) {
return ( $.uls.data.languages[language] !== undefined &&
$.uls.data.languages[language].length === 1 ) ? $.uls.data.languages[language][0] : false;
return ( $.uls.data.languages[ language ] !== undefined &&
$.uls.data.languages[ language ].length === 1 ) ? $.uls.data.languages[ language ][ 0 ] : false;
};
/**
* Returns the script of the language.
* @param language string Language code
* @return string
* @param {string} language Language code
* @return {string}
*/
$.uls.data.getScript = function ( language ) {
var target = $.uls.data.isRedirect( language );
@@ -42,18 +42,18 @@
return $.uls.data.getScript( target );
}
if ( !$.uls.data.languages[language] ) {
if ( !$.uls.data.languages[ language ] ) {
// Undetermined
return 'Zyyy';
}
return $.uls.data.languages[language][0];
return $.uls.data.languages[ language ][ 0 ];
};
/**
* Returns the regions in which a language is spoken.
* @param language string Language code
* @return array|string 'UNKNOWN'
* @param {string} language Language code
* @return {string|string[]}
*/
$.uls.data.getRegions = function ( language ) {
var target = $.uls.data.isRedirect( language );
@@ -62,13 +62,13 @@
return $.uls.data.getRegions( target );
}
return ( $.uls.data.languages[language] && $.uls.data.languages[language][1] ) || 'UNKNOWN';
return ( $.uls.data.languages[ language ] && $.uls.data.languages[ language ][ 1 ] ) || 'UNKNOWN';
};
/**
* Returns the autonym of the language.
* @param language string Language code
* @return string
* @param {string} language Language code
* @return {string}
*/
$.uls.data.getAutonym = function ( language ) {
var target = $.uls.data.isRedirect( language );
@@ -77,12 +77,12 @@
return $.uls.data.getAutonym( target );
}
return ( $.uls.data.languages[language] && $.uls.data.languages[language][2] ) || language;
return ( $.uls.data.languages[ language ] && $.uls.data.languages[ language ][ 2 ] ) || language;
};
/**
* Returns all language codes and corresponding autonyms
* @return array
* @return {string[]}
*/
$.uls.data.getAutonyms = function () {
var language,
@@ -93,7 +93,7 @@
continue;
}
autonymsByCode[language] = $.uls.data.getAutonym( language );
autonymsByCode[ language ] = $.uls.data.getAutonym( language );
}
return autonymsByCode;
@@ -101,8 +101,8 @@
/**
* Returns all languages written in script.
* @param script string
* @return array of strings (languages codes)
* @param {string} script string
* @return {string[]} languages codes
*/
$.uls.data.getLanguagesInScript = function ( script ) {
return $.uls.data.getLanguagesInScripts( [ script ] );
@@ -110,8 +110,8 @@
/**
* Returns all languages written in the given scripts.
* @param scripts array of strings
* @return array of strings (languages codes)
* @param {string[]} scripts
* @return {string[]} languages codes
*/
$.uls.data.getLanguagesInScripts = function ( scripts ) {
var language, i,
@@ -123,7 +123,7 @@
}
for ( i = 0; i < scripts.length; i++ ) {
if ( scripts[i] === $.uls.data.getScript( language ) ) {
if ( scripts[ i ] === $.uls.data.getScript( language ) ) {
languagesInScripts.push( language );
break;
}
@@ -136,8 +136,8 @@
/**
* Returns an associative array of languages in a region,
* grouped by script group.
* @param region string Region code
* @return associative array
* @param {string} region Region code
* @return {object}
*/
$.uls.data.getLanguagesByScriptGroupInRegion = function ( region ) {
return $.uls.data.getLanguagesByScriptGroupInRegions( [ region ] );
@@ -145,7 +145,7 @@
/**
* 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
*/
$.uls.data.getLanguagesByScriptGroup = function ( languages ) {
@@ -157,11 +157,11 @@
langScriptGroup = $.uls.data.getScriptGroupOfLanguage( resolvedRedirect );
if ( !languagesByScriptGroup[langScriptGroup] ) {
languagesByScriptGroup[langScriptGroup] = [];
if ( !languagesByScriptGroup[ langScriptGroup ] ) {
languagesByScriptGroup[ langScriptGroup ] = [];
}
languagesByScriptGroup[langScriptGroup].push( language );
languagesByScriptGroup[ langScriptGroup ].push( language );
}
return languagesByScriptGroup;
@@ -170,8 +170,8 @@
/**
* Returns an associative array of languages in several regions,
* grouped by script group.
* @param regions array of strings - region codes
* @return associative array
* @param {string[]} regions region codes
* @return {Object}
*/
$.uls.data.getLanguagesByScriptGroupInRegions = function ( regions ) {
var language, i, scriptGroup,
@@ -183,14 +183,14 @@
}
for ( i = 0; i < regions.length; i++ ) {
if ( $.inArray( regions[i], $.uls.data.getRegions( language ) ) !== -1 ) {
if ( $.inArray( regions[ i ], $.uls.data.getRegions( language ) ) !== -1 ) {
scriptGroup = $.uls.data.getScriptGroupOfLanguage( language );
if ( languagesByScriptGroupInRegions[scriptGroup] === undefined ) {
languagesByScriptGroupInRegions[scriptGroup] = [];
if ( languagesByScriptGroupInRegions[ scriptGroup ] === undefined ) {
languagesByScriptGroupInRegions[ scriptGroup ] = [];
}
languagesByScriptGroupInRegions[scriptGroup].push( language );
languagesByScriptGroupInRegions[ scriptGroup ].push( language );
break;
}
}
@@ -202,14 +202,14 @@
/**
* Returns the script group of a script or 'Other' if it doesn't
* belong to any group.
* @param script string Script code
* @return string script group name
* @param {string} script Script code
* @return {string} script group name
*/
$.uls.data.getGroupOfScript = function ( script ) {
var scriptGroup;
for ( scriptGroup in $.uls.data.scriptgroups ) {
if ( $.inArray( script, $.uls.data.scriptgroups[scriptGroup] ) !== -1 ) {
if ( $.inArray( script, $.uls.data.scriptgroups[ scriptGroup ] ) !== -1 ) {
return scriptGroup;
}
}
@@ -219,8 +219,8 @@
/**
* Returns the script group of a language.
* @param language string Language code
* @return string script group name
* @param {string} language Language code
* @return {string} script group name
*/
$.uls.data.getScriptGroupOfLanguage = function ( language ) {
return $.uls.data.getGroupOfScript( $.uls.data.getScript( language ) );
@@ -229,8 +229,9 @@
/**
* A callback for sorting languages by autonym.
* Can be used as an argument to a sort function.
* @param a string Language code
* @param b string Language code
* @param {string} a Language code
* @param {string} b Language code
* @return {number}
*/
$.uls.data.sortByAutonym = function ( a, b ) {
var autonymA = $.uls.data.getAutonym( a ) || a,
@@ -241,8 +242,8 @@
/**
* Check if a language is right-to-left.
* @param language string Language code
* @return boolean
* @param {string} language Language code
* @return {boolean}
*/
$.uls.data.isRtl = function ( language ) {
return $.inArray( $.uls.data.getScript( language ), $.uls.data.rtlscripts ) !== -1;
@@ -250,8 +251,8 @@
/**
* Return the direction of the language
* @param language string Language code
* @return string
* @param {string} language Language code
* @return {string}
*/
$.uls.data.getDir = function ( language ) {
return $.uls.data.isRtl( language ) ? 'rtl' : 'ltr';
@@ -259,11 +260,11 @@
/**
* Returns the languages spoken in a territory.
* @param territory string Territory code
* @return list of language codes
* @param {string} territory Territory code
* @return {string[]} list of language codes
*/
$.uls.data.getLanguagesInTerritory = function ( territory ) {
return $.uls.data.territories[territory];
return $.uls.data.territories[ territory ];
};
/**
@@ -271,30 +272,30 @@
* If the target option is provided, the language is defined as a redirect.
* Other possible options are script, regions and autonym.
*
* @param code string New language code.
* @param options Object Language properties.
* @param {string} code New language code.
* @param {Object} options Language properties.
*/
$.uls.data.addLanguage = function( code, options ) {
$.uls.data.addLanguage = function ( code, options ) {
if ( options.target ) {
$.uls.data.languages[code] = [options.target];
$.uls.data.languages[ code ] = [ options.target ];
} else {
$.uls.data.languages[code] = [options.script, options.regions, options.autonym];
$.uls.data.languages[ code ] = [ options.script, options.regions, options.autonym ];
}
};
/**
* Removes a language from the langdb in run time.
*
* @param code string Language code to delete.
* @return true if the language was removed, false otherwise.
* @param {string} code Language code to delete.
* @return {boolean} true if the language was removed, false otherwise.
*/
$.uls.data.deleteLanguage = function( code ) {
if ( $.uls.data.languages[code] ) {
delete $.uls.data.languages[code];
$.uls.data.deleteLanguage = function ( code ) {
if ( $.uls.data.languages[ code ] ) {
delete $.uls.data.languages[ code ];
return true;
}
return false;
};
} ( jQuery ) );
}( jQuery ) );

269
src/jquery.uls.languagefilter.js
View File

@@ -19,21 +19,34 @@
/**
* Usage: $( 'inputbox' ).languagefilter();
* The values for autocompletion is from the options.languages.
* The data is in the format of languagecode:languagename.
* The values for autocompletion is from the options.languages or options.searchAPI.
*/
( function ( $ ) {
'use strict';
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 ) {
this.$element = $( element );
this.options = $.extend( {}, $.fn.languagefilter.defaults, options );
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.$suggestion = this.$element.siblings( '.' + this.$element.data( 'suggestion' ) );
this.$clear = this.$element.siblings( '.' + this.$element.data( 'clear' ) );
this.selectedLanguage = null;
this.init();
this.listen();
@@ -54,12 +67,8 @@
},
listen: function () {
this.$element.on( 'keypress', $.proxy( this.keyup, this ) )
.on( 'keyup', $.proxy( this.keyup, this ) );
if ( this.eventSupported( 'keydown' ) ) {
this.$element.on( 'keydown', $.proxy( this.keyup, this ) );
}
this.$element.on( 'keydown', $.proxy( this.keypress, this ) );
if ( this.$clear.length ) {
this.$clear.on( 'click', $.proxy( this.clear, this ) );
@@ -68,62 +77,62 @@
this.toggleClear();
},
keyup: function ( e ) {
keypress: function ( e ) {
var suggestion, query, languageFilter;
switch ( e.keyCode ) {
case 9: // Tab -> Autocomplete
suggestion = this.$suggestion.val();
case 9: // Tab -> Autocomplete
suggestion = this.$suggestion.val();
if ( suggestion && suggestion !== this.$element.val() ) {
this.$element.val( suggestion );
if ( suggestion && suggestion !== this.$element.val() ) {
this.$element.val( suggestion );
e.preventDefault();
e.stopPropagation();
}
break;
case 13: // Enter
if ( !this.options.onSelect ) {
break;
}
// Avoid bubbling this 'enter' to background page elements
e.preventDefault();
e.stopPropagation();
}
break;
case 13: // Enter
if ( !this.options.onSelect ) {
break;
}
// Avoid bubbling this 'enter' to background page elements
e.preventDefault();
e.stopPropagation();
query = $.trim( this.$element.val() ).toLowerCase();
query = $.trim( this.$element.val() ).toLowerCase();
if ( this.selectedLanguage ) {
// this.selectLanguage will be populated from a matching search
this.options.onSelect( this.selectedLanguage );
} else if ( this.options.languages[ query ] ) {
// Search is yet to happen (in timeout delay),
// but we have a matching language code.
this.options.onSelect( query );
}
break;
default:
languageFilter = this;
if ( e.which < 32 &&
e.which !== 8 // Backspace
) {
// ignore any ASCII control characters
break;
}
this.selectedLanguage = null;
delay( function () {
if ( !languageFilter.$element.val() ) {
languageFilter.clear();
} else {
languageFilter.options.$target.empty();
languageFilter.search();
if ( this.selectedLanguage ) {
// this.selectLanguage will be populated from a matching search
this.options.onSelect( this.selectedLanguage );
} else if ( this.options.languages[ query ] ) {
// Search is yet to happen (in timeout delay),
// but we have a matching language code.
this.options.onSelect( query );
}
}, 300 );
this.toggleClear();
break;
default:
languageFilter = this;
if ( e.which < 32 &&
e.which !== 8 // Backspace
) {
// ignore any ASCII control characters
break;
}
this.selectedLanguage = null;
delay( function () {
if ( !languageFilter.$element.val() ) {
languageFilter.clear();
} else {
languageFilter.options.lcd.empty();
languageFilter.search();
}
}, 300 );
this.toggleClear();
}
},
@@ -167,86 +176,75 @@
},
search: function () {
var langCode, scriptGroup, langNum, languagesInScript,
languages = $.uls.data.getLanguagesByScriptGroup( this.options.languages ),
query = $.trim( this.$element.val() );
var languages = Object.keys( this.options.languages ),
results = [],
query = $.trim( this.$element.val() ).toLowerCase();
this.resultCount = 0;
for ( scriptGroup in languages ) {
languagesInScript = languages[ scriptGroup ];
languagesInScript.sort( $.uls.data.sortByAutonym );
for ( langNum = 0; langNum < languagesInScript.length; langNum++ ) {
langCode = languagesInScript[ langNum ];
if ( query === '' || this.filter( langCode, query ) ) {
if ( this.resultCount === 0 ) {
// Autofill the first result.
this.autofill( langCode );
}
if ( query.toLowerCase() === langCode ) {
this.selectedLanguage = langCode;
}
if ( this.render( langCode ) ) {
this.resultCount++;
}
}
}
if ( query === '' ) {
this.options.lcd.setGroupByRegionOverride( null );
this.resultHandler( query, languages );
return;
}
// Also do a search by search API
if ( !this.resultCount && this.options.searchAPI && query ) {
this.searchAPI( query );
this.options.lcd.setGroupByRegionOverride( false );
// Local search results
results = languages.filter( function ( langCode ) {
return this.filter( langCode, query );
}.bind( this ) );
// Use the searchAPI if available, assuming that it has superior search results.
if ( this.options.searchAPI ) {
this.searchAPI( query )
.done( this.resultHandler.bind( this ) )
.fail( this.resultHandler.bind( this, query, results, undefined ) );
} else {
this.resultHandler( query );
this.resultHandler( query, results );
}
},
searchAPI: function ( query ) {
var languageFilter = this;
return $.get( this.options.searchAPI, { search: query } ).then( function ( result ) {
var autofillLabel,
results = [];
$.get( languageFilter.options.searchAPI, {
search: query
}, function ( result ) {
$.each( result.languagesearch, function ( code, name ) {
var target;
if ( languageFilter.resultCount === 0 ) {
// Autofill the first result.
languageFilter.autofill( code, name );
}
if ( languageFilter.options.languages[ code ] &&
languageFilter.render( code )
) {
languageFilter.resultCount++;
if ( this.options.languages[ code ] ) {
autofillLabel = autofillLabel || name;
results.push( code );
return;
}
// Try to hide issues caused by inconsistent language codes
target = $.uls.data.isRedirect( code );
if ( languageFilter.options.languages[ target ] &&
languageFilter.render( target )
) {
languageFilter.resultCount++;
if ( target && this.options.languages[ target ] ) {
autofillLabel = autofillLabel || name;
results.push( target );
}
} );
languageFilter.resultHandler( query );
} );
return $.Deferred().resolve( query, results, autofillLabel );
}.bind( this ) );
},
/**
* Handler method to be called once search is over.
* Based on search result triggers resultsfound or noresults events
* @param query string
* @param {string} query
* @param {string[]} results
* @param {string} [autofillLabel]
*/
resultHandler: function ( query ) {
if ( this.resultCount === 0 ) {
resultHandler: function ( query, results, autofillLabel ) {
if ( results.length === 0 ) {
this.$suggestion.val( '' );
this.$element.trigger( 'noresults.uls', query );
} else {
this.$element.trigger( 'resultsfound.uls', [ query, this.resultCount ] );
return;
}
if ( query ) {
this.selectedLanguage = results[ 0 ];
this.autofill( results[ 0 ], autofillLabel );
}
results.map( this.render.bind( this ) );
this.$element.trigger( 'resultsfound.uls', [ query, results.length ] );
},
autofill: function ( langCode, languageName ) {
@@ -261,7 +259,6 @@
return;
}
this.selectedLanguage = langCode;
languageName = languageName || this.options.languages[ langCode ];
if ( !languageName ) {
@@ -291,17 +288,11 @@
},
render: function ( langCode ) {
var $target = this.options.$target;
if ( !$target ) {
return false;
}
return $target.append( langCode );
return this.options.lcd.append( langCode );
},
escapeRegex: function ( value ) {
return value.replace( /[\-\[\]{}()*+?.,\\\^$\|#\s]/g, '\\$&' );
return value.replace( /[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&' );
},
/**
@@ -311,6 +302,9 @@
* b) Language autonym 'starts with' search string.
* c) ISO 639 code match with 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 ) {
// FIXME script is ISO 15924 code. We might need actual name of script.
@@ -321,17 +315,6 @@
matcher.test( $.uls.data.getAutonym( langCode ) ) ||
matcher.test( langCode ) ||
matcher.test( $.uls.data.getScript( langCode ) );
},
eventSupported: function ( eventName ) {
var isSupported = eventName in this.$element;
if ( !isSupported ) {
this.$element.setAttribute( eventName, 'return;' );
isSupported = typeof this.$element[ eventName ] === 'function';
}
return isSupported;
}
};
@@ -352,24 +335,16 @@
};
$.fn.languagefilter.defaults = {
$target: null, // Where to append the results
searchAPI: null,
languages: null, // Languages as code:name format.
onSelect: null // Language select handler - like enter in filter textbox.
// LanguageCategoryDisplay
lcd: undefined,
// URL to which we append query parameter with the query value
searchAPI: undefined,
// Object of language tags to language names
languages: [],
// Callback function when language is selected
onSelect: undefined
};
$.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 ) );

242
src/jquery.uls.lcd.js
View File

@@ -22,43 +22,46 @@
( function ( $ ) {
'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 data-i18n="uls-search-help">You can search by language name, script name, ISO code of language or you can browse by region.</div> \
</div></div>';
noResultsTemplate = $( '<div>' ).addClass( 'uls-no-results-view hide' );
noResultsTemplate.append(
$( '<h2>' )
.attr( 'data-i18n', 'uls-no-results-found' )
.addClass( 'uls-no-results-found-title' )
.text( 'No results found' ),
$( '<div>' )
.addClass( 'uls-no-found-more' )
.append(
$( '<div>' )
.addClass( '' )
.append(
$( '<p>' ).append(
$( '<span>' )
.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.' )
)
)
)
);
LanguageCategoryDisplay = function ( element, options ) {
/**
* Language category display
* @param {Element} element The container element to which the languages to be displayed
* @param {Object} [options] Configuration object
* @cfg {Object} [languages] Selectable languages. Keyed by language code, values are autonyms.
* @cfg {string[]} [showRegions] Array of region codes to show. Default is
* [ 'WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA' ]
* @cfg {number} [itemsPerColumn] Number of languages per column.
* @cfg {number} [columns] Number of columns for languages. Default is 4.
* @cfg {Function} [languageDecorator] Callback function to be called when a language
* link is prepared - for custom decoration.
* @cfg {Function|string[]} [quickList] The languages to display as suggestions for quick selection.
* @cfg {Function} [clickhandler] Callback when language is selected.
* @cfg {jQuery|Function} [noResultsTemplate]
*/
function LanguageCategoryDisplay( element, options ) {
this.$element = $( element );
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.regionLanguages = {};
this.renderTimeout = null;
this.cachedQuicklist = null;
this.$element.append( noResultsTemplate.clone() );
this.$noResults = this.$element.children( '.uls-no-results-view' );
this.groupByRegionOverride = null;
this.render();
this.listen();
};
}
LanguageCategoryDisplay.prototype = {
constructor: LanguageCategoryDisplay,
@@ -67,24 +70,21 @@
* Adds language to the language list.
* @param {string} langCode
* @param {string} [regionCode]
* @return {boolean} Whether the language was added.
* @return {boolean} Whether the language was known and accepted
*/
append: function ( langCode, regionCode ) {
var lcd = this,
i, regions;
var i, regions;
if ( !$.uls.data.languages[ langCode ] ) {
// Language is unknown or not in the list of languages for this context.
return false;
}
// Show everything in one region when there is only one column
if ( lcd.options.columns === 1 ) {
regions = [ 'WW' ];
if ( !this.isGroupingByRegionEnabled() ) {
regions = [ 'all' ];
// Languages are expected to be repeated in this case,
// and we only want to show them once
if ( $.inArray( langCode, this.regionLanguages.WW ) > -1 ) {
// Make sure we do not get duplicates
if ( this.regionLanguages.all.indexOf( langCode ) > -1 ) {
return true;
}
} else {
@@ -101,21 +101,45 @@
// 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 );
clearTimeout( this.renderTimeout );
this.renderTimeout = setTimeout( function () {
this.renderRegions();
}.bind( this ), 50 );
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 () {
var $section, $quicklist,
lcd = this,
narrowMode = this.options.columns === 1,
var $section,
$quicklist = this.buildQuicklist(),
regions = [],
regionNames = {
// These are fallback text when i18n library not present
all: 'All languages', // Used if there is quicklist and no region grouping
WW: 'Worldwide',
SP: 'Special',
AM: 'America',
@@ -126,42 +150,30 @@
PA: 'Pacific'
};
$quicklist = this.buildQuicklist();
regions.push( $quicklist );
if ( narrowMode && $quicklist.length ) {
regions.push( $( '<h3>' )
.attr( 'data-i18n', 'uls-region-all' )
.addClass( 'uls-lcd-region-title' )
.text( 'All languages' )
);
if ( $quicklist.length ) {
regions.push( $quicklist );
} else {
// We use CSS to hide the header for 'all' when quicklist is NOT present
this.$element.addClass( 'uls-lcd--no-quicklist' );
}
$.each( $.uls.data.regiongroups, function ( regionCode ) {
lcd.regionLanguages[ regionCode ] = [];
// Don't show the region unless it was enabled
if ( $.inArray( regionCode, lcd.options.showRegions ) === -1 ) {
return;
}
this.options.showRegions.forEach( function ( regionCode ) {
this.regionLanguages[ regionCode ] = [];
$section = $( '<div>' )
.addClass( 'uls-lcd-region-section hide' )
.attr( 'id', regionCode );
.attr( 'data-region', regionCode );
// Show a region heading, unless we are using a narrow ULS
if ( !narrowMode ) {
$section.append( $( '<h3>' )
.attr( 'data-i18n', 'uls-region-' + regionCode )
.addClass( 'uls-lcd-region-title' )
.text( regionNames[ regionCode ] )
);
}
$( '<h3>' )
.attr( 'data-i18n', 'uls-region-' + regionCode )
.addClass( 'uls-lcd-region-title' )
.text( regionNames[ regionCode ] )
.appendTo( $section );
regions.push( $section );
} );
}.bind( this ) );
lcd.$element.append( regions );
this.$element.append( regions );
this.i18n();
},
@@ -173,12 +185,12 @@
var languages,
lcd = this;
this.$noResults.addClass( 'hide' );
this.$element.removeClass( 'uls-no-results' );
this.$element.children( '.uls-lcd-region-section' ).each( function () {
var $region = $( this ),
regionCode = $region.attr( 'id' );
regionCode = $region.data( 'region' );
if ( $region.is( '#uls-lcd-quicklist' ) ) {
if ( $region.is( '.uls-lcd-quicklist' ) ) {
return;
}
@@ -241,8 +253,9 @@
nextScript = $.uls.data.getScriptGroupOfLanguage( languages[ i + 1 ] );
lastItem = languagesCount - i === 1;
// Force column break if script changes and column has more than one row already
if ( i === 0 ) {
// Force column break if script changes and column has more than one row already,
// but only if grouping by region
if ( i === 0 || !this.isGroupingByRegionEnabled() ) {
currentScript = $.uls.data.getScriptGroupOfLanguage( languages[ i ] );
} else if ( currentScript !== nextScript && items.length > 1 ) {
force = true;
@@ -287,7 +300,6 @@
a.lang = code;
a.dir = $.uls.data.getDir( code );
li.appendChild( a );
if ( this.options.languageDecorator ) {
this.options.languageDecorator( $( a ), code );
@@ -303,7 +315,7 @@
* Adds quicklist as a region.
*/
quicklist: function () {
this.$element.find( '#uls-lcd-quicklist' ).removeClass( 'hide' );
this.$element.find( '.uls-lcd-quicklist' ).removeClass( 'hide' );
},
buildQuicklist: function () {
@@ -328,8 +340,7 @@
quickList.sort( $.uls.data.sortByAutonym );
$quickListSection = $( '<div>' )
.addClass( 'uls-lcd-region-section' )
.attr( 'id', 'uls-lcd-quicklist' );
.addClass( 'uls-lcd-region-section uls-lcd-quicklist' );
$quickListSectionTitle = $( '<h3>' )
.attr( 'data-i18n', 'uls-common-languages' )
@@ -356,30 +367,41 @@
}
},
/**
* Called when a fresh search is started
*/
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 () {
this.$element.focus();
},
noResults: function () {
this.$noResults.removeClass( 'hide' );
this.$noResults.siblings( '.uls-lcd-region-section' ).addClass( 'hide' );
/**
* No-results event handler
* @param {Event} event
* @param {string} [currentSearchQuery] Current search query that gave mp results
*/
noResults: function ( event, currentSearchQuery ) {
var $noResults;
// Only build the data once
if ( this.$noResults.find( '.uls-lcd-region-title' ).length ) {
return;
this.$element.addClass( 'uls-no-results' );
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();
$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 );
this.$element.append( $noResults.addClass( 'uls-no-results-view' ) );
},
listen: function () {
@@ -410,15 +432,37 @@
};
$.fn.lcd.defaults = {
languages: null,
// List of languages to show
languages: [],
// List of regions to show
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,
// Other supported values are 1 and 2.
// Other values will have rendering issues.
// Number of columns, only 1, 2 and 4 are supported
columns: 4,
languageDecorator: null,
quickList: []
// Callback function for language item styling
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 ) );