' ).append(
- $( '' )
- .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 +72,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 +103,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 +152,30 @@
PA: 'Pacific'
};
- $quicklist = this.buildQuicklist();
- regions.push( $quicklist );
-
- if ( narrowMode && $quicklist.length ) {
- regions.push( $( '
' )
- .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 = $( '
' )
.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( $( '