Fixes to avoid fragmentation in the language list

Adjustments in the language layout to make it easy to scan through
the language list and distinguish the different script groups:

* Removed the empty spacing row between groups.
* Changed the maximum number of languages in a column.
* Changed the order of script groups for better discoverability.

Change-Id: If223ae65bfec256c56d6092628b3999dfd02a119

lib/jquery.uls/data/langdb.yaml

@@ -496,18 +496,18 @@ languages:
  #
  # The classification is roughly based on http://www.unicode.org/charts/
  # with some practical corrections.
+ # The order of the groups affects display. It was suggested by Pau to distance
+ # the largest groups from one another to improve discoverability.
 scriptgroups:
- # Other is reserved
- # Large groups, one script in each
-  Cyrillic: [Cyrl]
-  Arabic: [Arab]
- # It's probalby different enough from Latin and Cyrillic, but user testing
+ # The group name "Other" is reserved.
+ # It's hard to find a better place for Goth except the Latin group.
+  Latin: [Latn, Goth]
+ # Greek is probalby different enough from Latin and Cyrillic, but user testing
  # may prove otherwise.
   Greek: [Grek]
- # Couldn't find a better place for Goth.
-  Latin: [Latn, Goth]
   WestCaucasian: [Armn, Geor]
- # Maybe it can be unified with Arabic.
+  Arabic: [Arab]
+ # Maybe MiddleEastern can be unified with Arabic.
  # Maybe Thaana can be moved here from SouthAsian.
  # Maybe it can be unified with African.
   MiddleEastern: [Hebr, Syrc]
@@ -522,10 +522,11 @@ scriptgroups:
  # Unicode, because linguistically and geographically it's closely related to
  # the Brahmic family.
   SouthAsian: [Beng, Deva, Gujr, Guru, Knda, Mlym, Orya, Saur, Sinh, Taml, Telu, Tibt, Thaa]
+  Cyrillic: [Cyrl]
+  CJK: [Hans, Hant, Kana, Kore, Jpan, Yiii]
   SouthEastAsian: [Batk, Bugi, Java, Khmr, Laoo, Mymr, Thai]
   Mongolian: [Mong]
   SignWriting: [Sgnw]
-  CJK: [Hans, Hant, Kana, Kore, Jpan, Yiii]
   NativeAmerican: [Cher, Cans]
 
 regiongroups:

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

@@ -45,10 +45,9 @@
 		addToRegion: function( langCode, region ) {
 			var that = this;
 			var language = that.options.languages[langCode],
-				langName = $.uls.data.autonym( langCode )
-					|| language
-					|| langCode,
+				langName = $.uls.data.autonym( langCode ) || language || langCode,
 				regions = [];
+
 			if ( region ) {
 				regions.push( region );
 			} else {
@@ -67,19 +66,19 @@
 				// Append the element to the column in the list
 				var $column = that.getColumn( regionCode );
 				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
+						if ( $column.find( 'li' ).length > 2 ) {
+							// If column already has 2 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 ) {
@@ -96,23 +95,29 @@
 		 */
 		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 || forceNew ) {
+
+			// Each column can have maximum 8 languages.
+			if ( $ul.length === 0 || $ul.find( 'li' ).length >= 8 || forceNew ) {
 				$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' );
 				}
+
 				$rowDiv.append( $ul );
 			}
+
 			if( !$divRegionCode.is( ':visible' ) ) {
 				$divRegionCode.show();
 			}
+
 			return $ul;
 		},