Updating from ULS upstream

* Localization updates.
* Added localization for Dutch informal.
* Performance improvements - see
  https://github.com/wikimedia/jquery.uls/pull/122

Change-Id: I6a76097722ae7ab2774172838823d73da5050581

lib/jquery.uls/i18n/ar.json

@@ -1,10 +1,10 @@
 {
     "@metadata": {
-        "authors": {
+        "authors": [
-            "0": "Amire80",
+            "Amire80",
-            "1": "DRIHEM",
+            "DRIHEM",
-            "3": "ترجمان05"
+            "ترجمان05"
-        }
+        ]
     },
     "uls-select-language": "حدد اللغة",
     "uls-region-WW": "في جميع أنحاء العالم",

lib/jquery.uls/i18n/en.json

@@ -5,7 +5,7 @@
 	"locale": "en",
 	"message-documentation": "qqq"
 },
-"uls-select-language": "Select Language",
+"uls-select-language": "Select language",
 "uls-region-WW": "Worldwide",
 "uls-region-SP": "Special",
 "uls-region-AM": "America",

lib/jquery.uls/i18n/nl-informal.json

@@ -0,0 +1,15 @@
+{
+    "@metadata": {
+        "authors": [
+            "Carsrac"
+        ]
+    },
+    "uls-select-language": "Kies taal",
+    "uls-region-WW": "Wereldwijd",
+    "uls-region-SP": "Speciaal",
+    "uls-region-AM": "Amerika",
+    "uls-region-AF": "Afrika",
+    "uls-region-EU": "Europa",
+    "uls-region-AS": "Azië",
+    "uls-region-ME": "Midden-Oosten"
+}

lib/jquery.uls/i18n/zh-hans.json

@@ -15,7 +15,7 @@
     "uls-region-ME": "中东",
     "uls-region-PA": "太平洋",
     "uls-no-results-found": "无搜索结果",
-    "uls-common-languages": "常见语言",
+    "uls-common-languages": "常用语言",
     "uls-no-results-suggestion-title": "你可能感兴趣：",
     "uls-search-help": "你可以按语言名称、文字名称、语言的ISO代码搜索，或按地区浏览：",
     "uls-search-placeholder": "语言搜索"

lib/jquery.uls/src/jquery.uls.languagefilter.js

@@ -188,8 +188,9 @@
 							this.selectedLanguage = langCode;
 						}
 
-						this.render( langCode );
+						if ( this.render( langCode ) ) {
-						this.resultCount++;
+							this.resultCount++;
+						}
 					}
 				}
 			}
@@ -212,8 +213,9 @@
 						languageFilter.autofill( code, name );
 					}
 
-					languageFilter.render( code );
+					if ( languageFilter.render( code ) ) {
-					languageFilter.resultCount++;
+						languageFilter.resultCount++;
+					}
 				} );
 
 				languageFilter.resultHandler( query );
@@ -278,10 +280,10 @@
 			var $target = this.options.$target;
 
 			if ( !$target ) {
-				return;
+				return false;
 			}
 
-			$target.append( langCode, null );
+			return $target.append( langCode );
 		},
 
 		escapeRegex: function( value ) {

lib/jquery.uls/src/jquery.uls.lcd.js

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