Implement visual language grouping in ULS

Added a utility callback function to sort languages by autonym.
Added CSS fix for group separatos.

Change-Id: I73c7c6518a85e4ea7999be3ef92a121e877610e8

lib/jquery.uls/css/jquery.uls.lcd.css

@@ -52,3 +52,7 @@
 	margin-top: 1.6em;
 	line-height: 1.6em;
 }
+
+.uls-lcd-region-section ul li.uls-column-break:hover{
+	background: none;
+}

lib/jquery.uls/src/jquery.uls.data.utils.js

@@ -170,16 +170,20 @@
 	};
 
 	/**
-	 * Get the given list of languages sorted by script.
+	 * Get the given list of languages grouped by script.
 	 * @param languages Array of language codes
 	 * @return {Object} Array of languages indexed by script codes
 	 */
 	$.uls.data.languagesByScriptGroup = function( languages ) {
-		var languagesByScriptGroup = {}, scriptGroup, language, langScriptGroup;
+		var languagesByScriptGroup = {},
+			scriptGroup,
+			language,
+			langScriptGroup;
+
 		for ( scriptGroup in $.uls.data.scriptgroups ) {
 			for ( language in languages ) {
 				langScriptGroup = $.uls.data.scriptGroupOfLanguage( language );
-				if( langScriptGroup !== scriptGroup ){
+				if( langScriptGroup !== scriptGroup ) {
 					continue;
 				}
 				if ( !languagesByScriptGroup[scriptGroup] ) {
@@ -188,8 +192,10 @@
 				languagesByScriptGroup[scriptGroup].push( language );
 			}
 		}
+
 		return languagesByScriptGroup;
 	};
+
 	/**
 	 * Returns an associative array of languages in several regions,
 	 * grouped by script group.
@@ -298,4 +304,15 @@
 	$.uls.data.scriptGroupOfLanguage = function( language ) {
 		return $.uls.data.groupOfScript( $.uls.data.script( language ) );
 	};
+
+	/**
+	 * A callback for sorting languages by autonym.
+	 * Can be used as an argument to a sort function.
+	 * @param two language codes
+	 */
+	$.uls.data.sortByAutonym = function( a, b ) {
+		var autonymA = $.uls.data.autonym( a ) || a,
+			autonymB = $.uls.data.autonym( b ) || b;
+		return ( autonymA.toLowerCase() < autonymB.toLowerCase() ) ? -1 : 1;
+	};
 } )( jQuery );

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

@@ -87,7 +87,10 @@
 		},
 
 		toggleClear: function() {
-			if ( !this.$clear.length ) return;
+			if ( !this.$clear.length ) {
+				return;
+			}
+
 			if ( this.$element.val() ) {
 				this.$clear.show();
 			} else {
@@ -101,8 +104,10 @@
 				scriptGroup, langNum, langCode;
 			this.resultCount = 0;
 			for ( scriptGroup in languages ) {
-				for ( langNum = 0; langNum < languages[scriptGroup].length; langNum++ ) {
+				var languagesInScript = languages[scriptGroup];
-					langCode = languages[scriptGroup][langNum];
+				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.
@@ -261,6 +266,7 @@
 		test: function( langCode ) {
 			var langRegions = $.uls.data.regions( langCode ),
 				region;
+
 			for ( var i = 0; i < this.regions.length; i++ ) {
 				region = this.regions[i];
 				if ( $.inArray( region, langRegions ) >= 0 ) {
@@ -271,21 +277,21 @@
 		},
 
 		show: function() {
-			var i, regions, language, languagesByScriptGroup, scriptGroup, languages;
 			// Make the selected region (and it only) active
 			$( '.regionselector' ).removeClass( 'active' );
-			if( this.regionGroup ) {
+			if ( this.regionGroup ) {
 				// if there is a region group, make it active.
 				this.$element.addClass( 'active' );
 			}
+
 			// Re-populate the list of languages
 			this.options.$target.empty();
-			languagesByScriptGroup = $.uls.data.languagesByScriptGroup( this.options.languages );
+			var languagesByScriptGroup = $.uls.data.languagesByScriptGroup( this.options.languages );
-			for ( scriptGroup in languagesByScriptGroup ) {
+			for ( var scriptGroup in languagesByScriptGroup ) {
-				languages = languagesByScriptGroup[scriptGroup];
+				var languages = languagesByScriptGroup[scriptGroup];
-				for ( i = 0; i < languages.length; i++) {
+				languages.sort( $.uls.data.sortByAutonym );
-					language = languages[i];
+				for ( var i = 0; i < languages.length; i++ ) {
-					this.test( language );
+					this.test( languages[i] );
 				}
 			}
 

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

@@ -32,7 +32,6 @@
 		constructor: LanguageCategoryDisplay,
 
 		append: function( langCode, regionCode, languageName ) {
-			var that = this;
 			this.addToRegion( langCode, regionCode, languageName );
 		},
 
@@ -47,10 +46,10 @@
 		addToRegion: function( langCode, region, languageName) {
 			var that = this;
 			var language = that.options.languages[langCode],
-				langName = languageName
+				langName = languageName ||
-					|| $.uls.data.autonym( langCode )
+					$.uls.data.autonym( langCode ) ||
-					|| that.options.languages[langCode]
+					that.options.languages[langCode] ||
-					|| langCode,
+					langCode,
 				regions = [];
 			if ( region ) {
 				regions.push( region );
@@ -68,8 +67,22 @@
 					);
 
 				// Append the element to the column in the list
-				var column = that.getColumn( regionCode );
+				var $column = that.getColumn( regionCode );
-				column.append( $li );
+				var lastLanguage = $column.find( 'li:last' ).data( 'code' );
+				if ( lastLanguage ) {
+					var lastScriptGroup = $.uls.data.scriptGroupOfLanguage( lastLanguage ),
+						currentScriptGroup = $.uls.data.scriptGroupOfLanguage( langCode );
+					if ( lastScriptGroup !== currentScriptGroup ) {
+						if ( $column.find( 'li' ).length > 5 ) {
+							// If column has already 5 or more languages, add a new column
+							$column = that.getColumn( regionCode, true );
+						} else {
+							// An empty item as column break.
+							$column.append( $( '<li>' ).addClass( 'uls-column-break' ) );
+						}
+					}
+				}
+				$column.append( $li );
 
 				if ( that.options.clickhandler ) {
 					$li.click( function() {
@@ -78,23 +91,30 @@
 				}
 			}
 		},
-
+		/**
-		getColumn: function( regionCode ) {
+		 * Get a column to add language.
-			var $divRegionCode = $( 'div#' + regionCode );
+		 * @param String regionCode The region code
-			var $rowDiv = $divRegionCode.find( 'div.row:last' );
+		 * @param boolean forceNew whether a new column must be created or not
-			var $ul = $divRegionCode.find( 'ul:last' );
+		 */
+		getColumn: function( regionCode, forceNew ) {
+			var $divRegionCode, $rowDiv, $ul;
+			forceNew = forceNew || false;
+			$divRegionCode = $( 'div#' + regionCode );
+			$rowDiv = $divRegionCode.find( 'div.row:last' );
+			$ul = $divRegionCode.find( 'ul:last' );
 			// Each column can have maximum 10 languages.
-			if ( $ul.length === 0 || $ul.find( 'li' ).length >= 10 ) {
+			if ( $ul.length === 0 || $ul.find( 'li' ).length >= 10 || forceNew ) {
-				// Each row can have 4 columns with 10 languages.
 				$ul = $( '<ul>' ).addClass( 'three columns end' );
 				if ( $rowDiv.length === 0 || $rowDiv.find( 'ul' ).length >= 4 ) {
 					$rowDiv = $( '<div>' ).addClass( 'row uls-language-block' );
 					$divRegionCode.append( $rowDiv );
-					$ul.addClass('offset-by-one');
+					$ul.addClass( 'offset-by-one' );
 				}
 				$rowDiv.append( $ul );
 			}
+			if( !$divRegionCode.is( ':visible' ) ) {
 				$divRegionCode.show();
+			}
 			return $ul;
 		},