From 3c93da564c48666376931904f1f4301d3cb6c95f Mon Sep 17 00:00:00 2001
From: "Amir E. Aharoni" <amir.aharoni@mail.huji.ac.il>
Date: Tue, 9 Dec 2014 13:18:21 +0200
Subject: [PATCH] Select the menu width automatically

A follow-up to https://phabricator.wikimedia.org/T76196 .
---
 src/jquery.uls.core.js | 32 +++++++++++++++++++++++++++++---
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/jquery.uls.core.js b/src/jquery.uls.core.js
index e259728..fa861cb 100644
--- a/src/jquery.uls.core.js
+++ b/src/jquery.uls.core.js
@@ -166,7 +166,7 @@
 				narrow: 'uls-narrow'
 			};
 
-			this.$menu.addClass( widthClasses[this.options.menuWidth] );
+			this.$menu.addClass( widthClasses[this.getMenuWidth()] );
 			this.$menu.css( this.position() );
 
 			if ( this.options.compact ) {
@@ -280,7 +280,7 @@
 
 			lcd = this.$resultsView.lcd( {
 				languages: this.languages,
-				columns: columnsOptions[this.options.menuWidth],
+				columns: columnsOptions[ this.getMenuWidth() ],
 				quickList: this.options.quickList,
 				clickhandler: $.proxy( this.select, this ),
 				source: this.$languageFilter,
@@ -388,6 +388,30 @@
 			return isSupported;
 		},
 
+		/**
+		 * Get the panel menu width parameter
+		 * @return string
+		 */
+		getMenuWidth: function () {
+			var menuWidth, languagesCount;
+
+			menuWidth = this.options.menuWidth;
+
+			if ( !menuWidth ) {
+				languagesCount = Object.keys( this.options.languages ).length;
+
+				if ( languagesCount < 12 ) {
+					menuWidth = 'narrow';
+				} else if ( languagesCount < 100 ) {
+					menuWidth = 'medium';
+				} else {
+					menuWidth = 'wide';
+				}
+			}
+
+			return menuWidth;
+		},
+
 		isMobile: function () {
 			return navigator.userAgent.match( /(iPhone|iPod|iPad|Android|BlackBerry)/ );
 		}
@@ -418,7 +442,9 @@
 		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)
+		// The options are wide (4 columns), medium (2 columns), and narrow (1 column).
+		// If not specified, it will be set automatically.
+		menuWidth: null,
 		showRegions: [ 'WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA' ],
 		languageDecorator: null // Callback function to be called when a language link is prepared - for custom decoration.
 	};