Reduce rerenderings in input settings

Change-Id: Ia929bbbb2cd6be18e37d9b73b4eea199bd0ad4b8
This commit is contained in:
Niklas Laxström
2013-04-29 12:16:49 +00:00
committed by Amir E. Aharoni
parent 71ddfdd95f
commit 2f4e9cfff9

View File

@@ -28,19 +28,19 @@
+ '</div>' + '</div>'
// "Language for ime", title above the buttons row // "Language for ime", title above the buttons row
+ '<div class="row uls-input-settings-languages-title">' + '<div class="row enabled-only uls-input-settings-languages-title">'
+ '<div class="eleven columns">' + '<div class="eleven columns">'
+ '<h4 data-i18n="ext-uls-input-settings-ui-language"></h4>' + '<h4 data-i18n="ext-uls-input-settings-ui-language"></h4>'
+ '</div>' + '</div>'
+ '</div>' + '</div>'
// UI languages buttons row // UI languages buttons row
+ '<div class="row">' + '<div class="row enabled-only">'
+ '<div class="uls-ui-languages eleven columns"></div>' + '<div class="uls-ui-languages eleven columns"></div>'
+ '</div>' + '</div>'
// Web IMEs enabling chechbox with label // Web IMEs enabling chechbox with label
+ '<div class="row">' + '<div class="row enabled-only">'
+ '<div class="eleven columns uls-input-settings-inputmethods-list">' + '<div class="eleven columns uls-input-settings-inputmethods-list">'
// "Input settings for language xyz" title // "Input settings for language xyz" title
+ '<h4 class="ext-uls-input-settings-imes-title"></h4>' + '<h4 class="ext-uls-input-settings-imes-title"></h4>'
@@ -89,17 +89,13 @@
this.$imes = $( 'body' ).data( 'ime' ); this.$imes = $( 'body' ).data( 'ime' );
this.$parent.$settingsPanel.append( this.$template ); this.$parent.$settingsPanel.append( this.$template );
if ( $.ime.preferences.isEnabled() ) { if ( $.ime.preferences.isEnabled() ) {
this.$template.find( '.enabled-only' ).removeClass( 'hide' );
} else {
// Hide the language list and ime selector
this.$template.find( '.enabled-only' ).addClass( 'hide' );
}
this.prepareLanguages(); this.prepareLanguages();
this.prepareInputmethods( $.ime.preferences.getLanguage() ); this.prepareInputmethods( $.ime.preferences.getLanguage() );
} else {
// Hide the language list
this.$template.find( 'div.uls-input-settings-languages-title' ).hide();
this.$template.find( 'div.uls-ui-languages' ).hide();
// Hide input methods
this.$template.find( 'div.uls-input-settings-inputmethods-list' ).hide();
}
this.prepareToggleButton(); this.prepareToggleButton();
this.$template.i18n(); this.$template.i18n();
this.listen(); this.listen();
@@ -122,9 +118,7 @@
this.imeLanguage = language; this.imeLanguage = language;
$imeListTitle = this.$template.find( '.ext-uls-input-settings-imes-title' ); $imeListTitle = this.$template.find( '.ext-uls-input-settings-imes-title' );
$imeListContainer = this.$template.find( '.uls-input-settings-inputmethods-list' ); $imeListContainer = this.$template.find( '.uls-input-settings-inputmethods-list' );
$imeListContainer.show();
$imeListContainer.find( 'label' ).remove(); $imeListContainer.find( 'label' ).remove();
@@ -207,9 +201,7 @@
languagesForButtons, $languages, suggestedLanguages, languagesForButtons, $languages, suggestedLanguages,
lang, i, language, $button, $caret; lang, i, language, $button, $caret;
$languages = this.$template.find( 'div.uls-ui-languages' ); $languages = this.$template.find( '.uls-ui-languages' );
this.$template.find( 'div.uls-ui-languages' ).show();
this.$template.find( 'div.uls-input-settings-languages-title' ).show();
suggestedLanguages = this.frequentLanguageList() suggestedLanguages = this.frequentLanguageList()
// Common world languages, for the case that there are // Common world languages, for the case that there are
@@ -261,7 +253,7 @@
inputSettings.enableApplyButton(); inputSettings.enableApplyButton();
$.ime.preferences.setLanguage( selectedLanguage ); $.ime.preferences.setLanguage( selectedLanguage );
$( 'div.uls-ui-languages button.button' ).removeClass( 'down' ); $( '.uls-ui-languages .button' ).removeClass( 'down' );
button.addClass( 'down' ); button.addClass( 'down' );
inputSettings.prepareInputmethods( selectedLanguage ); inputSettings.prepareInputmethods( selectedLanguage );
}; };
@@ -300,7 +292,7 @@
var inputSettings = this, var inputSettings = this,
$languages, $moreLanguagesButton; $languages, $moreLanguagesButton;
$languages = this.$template.find( 'div.uls-ui-languages' ); $languages = this.$template.find( '.uls-ui-languages' );
$moreLanguagesButton = $( '<button>' ) $moreLanguagesButton = $( '<button>' )
.prop( 'id', 'uls-more-languages' ) .prop( 'id', 'uls-more-languages' )
.addClass( 'button' ).text( '...' ); .addClass( 'button' ).text( '...' );
@@ -343,15 +335,11 @@
}, },
prepareToggleButton: function () { prepareToggleButton: function () {
var inputSettings, $toggleButton, $toggleButtonDesc; var $toggleButton, $toggleButtonDesc;
inputSettings = this; $toggleButton = this.$template.find( '.uls-input-toggle-button' );
$toggleButtonDesc = this.$template
$toggleButton = inputSettings.$template .find( '.uls-input-settings-disable-info' );
.find( 'button.uls-input-toggle-button' );
$toggleButtonDesc = inputSettings.$template
.find( 'div.uls-input-settings-disable-info' );
if ( $.ime.preferences.isEnabled() ) { if ( $.ime.preferences.isEnabled() ) {
$toggleButton.data( 'i18n', 'ext-uls-input-disable' ); $toggleButton.data( 'i18n', 'ext-uls-input-disable' );
@@ -429,29 +417,24 @@
* Disable input tools * Disable input tools
*/ */
disableInputTools: function () { disableInputTools: function () {
var inputSettings = this;
$.ime.preferences.disable(); $.ime.preferences.disable();
$.ime.preferences.save( function () { $.ime.preferences.save( function () {
mw.ime.disable(); mw.ime.disable();
// render this again.
inputSettings.render();
} ); } );
this.$template.find( '.enabled-only' ).addClass( 'hide' );
this.prepareToggleButton();
}, },
/** /**
* Enable input tools * Enable input tools
*/ */
enableInputTools: function () { enableInputTools: function () {
var inputSettings = this;
$.ime.preferences.enable(); $.ime.preferences.enable();
$.ime.preferences.save( function () { $.ime.preferences.save( function () {
mw.ime.setup(); mw.ime.setup();
// render this again.
inputSettings.render();
} ); } );
this.$template.find( '.enabled-only' ).removeClass( 'hide' );
this.prepareToggleButton();
}, },
/** /**