(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
This commit is contained in:
Amir E. Aharoni
2012-10-09 12:31:19 +02:00
parent 069d9e6915
commit 3699095401

View File

@@ -104,39 +104,69 @@
* Prepare the UI language selector * Prepare the UI language selector
*/ */
prepareLanguages: function () { prepareLanguages: function () {
var that = this; var displaySettings = this,
var $languages = this.$template.find( 'div.uls-ui-languages' ); $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(); $languages.empty();
var previousLanguages = this.frequentLanguageList();
var languages = [this.uiLanguage]; // UI language must always be present
for ( var lang in previousLanguages ) { if ( this.uiLanguage !== this.contentLanguage ) {
if ( previousLanguages[lang] === this.uiLanguage ) { languagesForButtons.push( this.uiLanguage );
continue;
}
languages.push( previousLanguages[lang] );
} }
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 () { return function () {
that.uiLanguage = button.data( "language" ) || that.uiLanguage; displaySettings.uiLanguage = button.data( "language" ) || displaySettings.uiLanguage;
$( "div.uls-ui-languages button.button" ).removeClass( "down" ); $( "div.uls-ui-languages button.button" ).removeClass( "down" );
button.addClass( "down" ); button.addClass( "down" );
that.prepareUIFonts(); displaySettings.prepareUIFonts();
}; };
} }
for ( var i = 0; i < 3; i++ ) { // Add the buttons for the most likely languages
var language = languages[i]; for ( var i = 0; i < SUGGESTED_LANGUAGES_NUMBER; i++ ) {
var $button = $( '<button>' ) var language = languagesForButtons[i],
.addClass( 'button uls-language-button' ) $button = $( '<button>' )
.text( $.uls.data.getAutonym( language ) ); .addClass( 'button uls-language-button' )
.text( $.uls.data.getAutonym( language ) )
.prop({
lang: language,
dir: $.uls.data.getDir( language )
});
if ( language === this.uiLanguage ) { if ( language === this.uiLanguage ) {
$button.addClass( 'down' ); $button.addClass( 'down' );
} }
$button.data( 'language', language ); $button.data( 'language', language );
$languages.append( $button ); $languages.append( $button );
$button.on( 'click', buttonHandler( $button ) ); $button.on( 'click', buttonHandler( $button ) );
} }
this.prepareMoreLanguages(); this.prepareMoreLanguages();
}, },