Update from upstream jquery.uls

Allow configurable panel width instead of
hardcoded 4 columns of languages.

Change-Id: I163d7501598bdf6098a00432f53d56babe10a1a9

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

@@ -31,6 +31,26 @@
 	width: 45%;
 }
 
+.uls-medium {
+	min-width: 360px;
+	width: 30%;
+}
+
+/* Override the grid */
+.uls-medium.grid .row {
+	min-width: 300px;
+}
+
+.uls-narrow {
+	min-width: 180px;
+	width: 20%;
+}
+
+/* Override the grid */
+.uls-narrow.grid .row {
+	min-width: 150px;
+}
+
 .uls-title-region a {
 	padding-left: 15px;
 }
@@ -221,6 +241,10 @@ div.uls-region {
 	float: right;
 }
 
+.uls-menu.uls-narrow .uls-search-label {
+	background-size: 20px;
+}
+
 .uls-menu .uls-languagefilter-clear {
 	/* @embed */
 	background: transparent url('../images/clear.png') no-repeat scroll left center;

lib/jquery.uls/src/jquery.uls.core.js

@@ -25,7 +25,7 @@
 
 	// Region numbers in id attributes also appear in the langdb.
 	/*jshint multistr:true */
-	template = '<div class="grid uls-menu uls-wide"> \
+	template = '<div class="grid uls-menu"> \
 			<div class="row"> \
 				<span id="uls-close" class="uls-icon-close"></span> \
 			</div> \
@@ -144,9 +144,12 @@
 		 * @returns {Object}
 		 */
 		position: function () {
-			var pos = $.extend( {}, this.$element.offset(), {
+			var pos;
+
+			pos = $.extend( {}, this.$element.offset(), {
 				height: this.$element[0].offsetHeight
 			} );
+
 			return {
 				top: this.top !== undefined ? this.top : pos.top + pos.height,
 				left: this.left !== undefined ? this.left : '25%'
@@ -157,6 +160,13 @@
 		 * Show the ULS window
 		 */
 		show: function () {
+			var widthClasses = {
+				wide: 'uls-wide',
+				medium: 'uls-medium',
+				narrow: 'uls-narrow'
+			};
+
+			this.$menu.addClass( widthClasses[this.options.menuWidth] );
 			this.$menu.css( this.position() );
 
 			if ( this.options.compact ) {
@@ -237,9 +247,15 @@
 		 * Bind the UI elements with their event listeners
 		 */
 		listen: function () {
-			var lcd,
+			var lcd, columnsOptions,
 				uls = this;
 
+			columnsOptions = {
+				wide: 4,
+				medium: 2,
+				narrow: 1
+			};
+
 			// Register all event listeners to the ULS here.
 			this.$element.on( 'click', $.proxy( this.click, this ) );
 
@@ -264,6 +280,7 @@
 
 			lcd = this.$resultsView.lcd( {
 				languages: this.languages,
+				columns: columnsOptions[this.options.menuWidth],
 				quickList: this.options.quickList,
 				clickhandler: $.proxy( this.select, this ),
 				source: this.$languageFilter,
@@ -401,6 +418,7 @@
 		languages: $.uls.data.getAutonyms(), // Languages to be used for ULS, default is all languages
 		quickList: null, // Array of language codes or function that returns such
 		compact: false, // Show ULS in compact mode
+		menuWidth: 'wide', // The options are wide (4 columns), medium (2 columns), and narrow (1 column)
 		showRegions: [ 'WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA' ],
 		languageDecorator: null // Callback function to be called when a language link is prepared - for custom decoration.
 	};

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

@@ -152,9 +152,8 @@
 		 * Renders a region and displays it if it has content.
 		 */
 		renderRegions: function () {
-			var lcd = this, languages,
+			var languages,
-				items = lcd.options.itemsPerColumn,
+				lcd = this;
-				columns = 4;
 
 			this.$noResults.addClass( 'hide' );
 			this.$element.find( '.uls-lcd-region-section' ).each( function () {
@@ -173,7 +172,12 @@
 					return;
 				}
 
-				lcd.renderRegion( $region, languages, items, columns );
+				lcd.renderRegion(
+					$region,
+					languages,
+					lcd.options.itemsPerColumn,
+					lcd.options.columns
+				);
 				$region.removeClass( 'hide' );
 
 				lcd.regionLanguages[regionCode] = [];
@@ -189,12 +193,20 @@
 		 * @param {number} columnsPerRow How many columns fit in a row.
 		 */
 		renderRegion: function( $region, languages, itemsPerColumn, columnsPerRow ) {
-			var i, lastItem, currentScript, nextScript, force,
+			var columnsClasses, i, lastItem, currentScript, nextScript, force,
 				len = languages.length,
 				items = [],
 				columns = [],
 				rows = [];
 
+			if ( columnsPerRow === 1 ) {
+				columnsClasses = 'twelve columns';
+			} else if ( columnsPerRow === 2 ) {
+				columnsClasses = 'six columns';
+			} else {
+				columnsClasses = 'three columns';
+			}
+
 			for ( i = 0; i < len; i++ ) {
 				force = false;
 				nextScript = $.uls.data.getScriptGroupOfLanguage( languages[i+1] );
@@ -211,7 +223,7 @@
 				items.push( this.renderItem( languages[i] ) );
 
 				if ( items.length >= itemsPerColumn || lastItem || force ) {
-					columns.push( $( '<ul>' ).addClass( 'three columns' ).append( items ) );
+					columns.push( $( '<ul>' ).addClass( columnsClasses ).append( items ) );
 					items = [];
 					if ( columns.length >= columnsPerRow || lastItem ) {
 						rows.push( $( '<div>' ).addClass( 'row uls-language-block' ).append( columns ) );
@@ -294,7 +306,12 @@
 				.text( 'Common languages' ); // This is placeholder text if jquery.i18n not present
 			$quickListSection.append( $quickListSectionTitle );
 
-			this.renderRegion( $quickListSection, quickList, 4, 4 );
+			this.renderRegion(
+				$quickListSection,
+				quickList,
+				this.options.itemsPerColumn,
+				this.options.columns
+			);
 
 			$quickListSectionTitle.i18n();
 
@@ -389,6 +406,9 @@
 		languages: null,
 		showRegions: ['WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA'],
 		itemsPerColumn: 8,
+		// Other supported values are 1 and 2.
+		// Other values will have rendering issues.
+		columns: 4,
 		languageDecorator: null
 	};