From 3699095401b44e631f997f398503649504d8326e Mon Sep 17 00:00:00 2001
From: "Amir E. Aharoni" <amir.aharoni@mail.huji.ac.il>
Date: Tue, 9 Oct 2012 12:31:19 +0200
Subject: [PATCH] (bug 39535) Fix the creation of language buttons

Assure that the language buttons in the display settings always
show the content and the UI language and that all the buttons are
filled with some language (by assuming major world languages if
nothing more likely was found).

Also other fixes:
* Add lang and dir attributes for the languages.
* General refactoring and better variable names.

Change-Id: Ie6a93439237b389179ebc6c4a5df34c1566a5e12
---
 resources/js/ext.uls.displaysettings.js | 64 ++++++++++++++++++-------
 1 file changed, 47 insertions(+), 17 deletions(-)

diff --git a/resources/js/ext.uls.displaysettings.js b/resources/js/ext.uls.displaysettings.js
index 68b7f6f9..cd8f81f1 100644
--- a/resources/js/ext.uls.displaysettings.js
+++ b/resources/js/ext.uls.displaysettings.js
@@ -104,39 +104,69 @@
 		 * Prepare the UI language selector
 		 */
 		prepareLanguages: function () {
-			var that = this;
-			var $languages = this.$template.find( 'div.uls-ui-languages' );
+			var displaySettings = this,
+				$languages = this.$template.find( 'div.uls-ui-languages' ),
+				suggestedLanguages = this.frequentLanguageList()
+					// Common world languages, for the case that there are
+					// too few suggested languages
+					.concat( ['en', 'zh', 'fr'] ),
+
+				// Content language is always on the first button
+				languagesForButtons = [this.contentLanguage],
+				SUGGESTED_LANGUAGES_NUMBER = 3;
+
+			// This is needed when drawing the panel for the second time
+			// after selecting a different language
 			$languages.empty();
-			var previousLanguages = this.frequentLanguageList();
-			var languages = [this.uiLanguage];
-			for ( var lang in previousLanguages ) {
-				if ( previousLanguages[lang] === this.uiLanguage ) {
-					continue;
-				}
-				languages.push( previousLanguages[lang] );
+
+			// UI language must always be present
+			if ( this.uiLanguage !== this.contentLanguage ) {
+				languagesForButtons.push( this.uiLanguage );
 			}
 
-			function buttonHandler ( button ) {
+			for ( var lang in suggestedLanguages ) {
+				// Skip already found languages
+				if ( $.inArray( suggestedLanguages[lang], languagesForButtons ) > -1 ) {
+					continue;
+				}
+
+				languagesForButtons.push( suggestedLanguages[lang] );
+
+				// No need to add more languages than buttons
+				if ( languagesForButtons.length === SUGGESTED_LANGUAGES_NUMBER ) {
+					break;
+				}
+			}
+
+			function buttonHandler( button ) {
 				return function () {
-					that.uiLanguage = button.data( "language" ) || that.uiLanguage;
+					displaySettings.uiLanguage = button.data( "language" ) || displaySettings.uiLanguage;
 					$( "div.uls-ui-languages button.button" ).removeClass( "down" );
 					button.addClass( "down" );
-					that.prepareUIFonts();
+					displaySettings.prepareUIFonts();
 				};
 			}
 
-			for ( var i = 0; i < 3; i++ ) {
-				var language = languages[i];
-				var $button = $( '<button>' )
-					.addClass( 'button uls-language-button' )
-					.text( $.uls.data.getAutonym( language ) );
+			// Add the buttons for the most likely languages
+			for ( var i = 0; i < SUGGESTED_LANGUAGES_NUMBER; i++ ) {
+				var language = languagesForButtons[i],
+					$button = $( '<button>' )
+						.addClass( 'button uls-language-button' )
+						.text( $.uls.data.getAutonym( language ) )
+						.prop({
+							lang: language,
+							dir: $.uls.data.getDir( language )
+						});
+
 				if ( language === this.uiLanguage ) {
 					$button.addClass( 'down' );
 				}
+
 				$button.data( 'language', language );
 				$languages.append( $button );
 				$button.on( 'click', buttonHandler( $button ) );
 			}
+
 			this.prepareMoreLanguages();
 		},