Grid-compatible adjustable columns

css/jquery.uls.css

@@ -26,12 +26,30 @@
 	background-clip: padding-box;
 }
 
-/*
 .uls-wide {
 	min-width: 715px;
 	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;

examples/index-mobile.html

@@ -41,7 +41,6 @@
 				$( '.uls-trigger' ).click( function () {
 					//Hacks I need to make afterwards. ULS API should be probably modified to allow optional classes and not force position:
 					$( '.uls-menu' )
-						.removeClass( 'uls-wide' )
 						.addClass( 'uls-mobile' )
 						.css( 'left', '2.5%' );
 				});

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,20 +144,15 @@
 		 * @returns {Object}
 		 */
 		position: function () {
-			var width, minWidth, pos;
-
-			width = 11 * this.options.columns;
-			minWidth = 179 * this.options.columns;
+			var pos;
 
 			pos = $.extend( {}, this.$element.offset(), {
 				height: this.$element[0].offsetHeight
 			} );
 
 			return {
-				'width': width + '%',
-				'min-width': minWidth,
-				'top': this.top !== undefined ? this.top : pos.top + pos.height,
-				'left': this.left !== undefined ? this.left : '25%'
+				top: this.top !== undefined ? this.top : pos.top + pos.height,
+				left: this.left !== undefined ? this.left : '25%'
 			};
 		},
 
@@ -165,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 ) {
@@ -245,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 ) );
 
@@ -272,7 +280,7 @@
 
 			lcd = this.$resultsView.lcd( {
 				languages: this.languages,
-				columns: this.options.columns,
+				columns: columnsOptions[this.options.menuWidth],
 				quickList: this.options.quickList,
 				clickhandler: $.proxy( this.select, this ),
 				source: this.$languageFilter,
@@ -410,7 +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
-		columns: 2, // How many columns of languages to show
+		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.
 	};

src/jquery.uls.lcd.js

@@ -152,8 +152,8 @@
 		 * Renders a region and displays it if it has content.
 		 */
 		renderRegions: function () {
-			var lcd = this, languages,
-				items = lcd.options.itemsPerColumn;
+			var languages,
+				lcd = this;
 
 			this.$noResults.addClass( 'hide' );
 			this.$element.find( '.uls-lcd-region-section' ).each( function () {
@@ -172,7 +172,12 @@
 					return;
 				}
 
-				lcd.renderRegion( $region, languages, items, lcd.options.columns );
+				lcd.renderRegion(
+					$region,
+					languages,
+					lcd.options.itemsPerColumn,
+					lcd.options.columns
+				);
 				$region.removeClass( 'hide' );
 
 				lcd.regionLanguages[regionCode] = [];
@@ -293,7 +298,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();
 
@@ -385,10 +395,10 @@
 	};
 
 	$.fn.lcd.defaults = {
-		columns: 4,
 		languages: null,
 		showRegions: ['WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA'],
 		itemsPerColumn: 8,
+		columns: 4,
 		languageDecorator: null
 	};