Simplify the cancel logic for input and display settings

Restore the language(ui, content), font values, input method values.

Rest of the UI resetting will be done by redrawing the settings
area whenever the language settings is accessed again.

Change-Id: Ia1488d1501f9c9f61726cea3637624f22a7ba135

resources/js/ext.uls.displaysettings.js

@@ -113,9 +113,11 @@
 			this.$parent.$settingsPanel.empty();
 			this.$webfonts = $( 'body' ).data( 'webfonts' );
 			this.$parent.$settingsPanel.append( this.$template );
+			this.disableApplyButton();
 			this.prepareLanguages();
 			this.prepareUIFonts();
 			this.prepareContentFonts();
+			$.i18n().locale = this.uiLanguage;
 			this.i18n();
 			this.$webfonts.refresh();
 			this.listen();
@@ -620,48 +622,14 @@
 		 * Cancel the changes done by user for display settings
 		 */
 		cancel: function () {
-			var displaySettings = this,
-				origUILanguage = this.getUILanguage();
-
-			if ( !displaySettings.dirty ) {
-				// Nothing changed
+			if ( !this.dirty ) {
 				return;
 			}
-
 			// Reload preferences
-			mw.webfonts.preferences = $.extend( true, {}, displaySettings.savedRegistry );
-			if ( displaySettings.$webfonts ) {
-				displaySettings.$webfonts.refresh();
-			}
-
-			if ( $.i18n().locale !== origUILanguage ) {
-				// restore UI localization for display settings panel
-				$.i18n().locale = origUILanguage;
-				this.i18n();
-			}
-
-			// Clear the dirty bit
-			displaySettings.dirty = false;
-			displaySettings.disableApplyButton();
-
+			mw.webfonts.preferences = $.extend( true, {}, this.savedRegistry );
 			// Restore content and UI language
-			displaySettings.uiLanguage = displaySettings.getUILanguage();
-			displaySettings.contentLanguage = displaySettings.getContentLanguage();
-
-			// Restore the font dropdowns
-			displaySettings.prepareUIFonts();
-			displaySettings.prepareContentFonts();
-
-			// Restore the visual state of selected language button
-			displaySettings.$template.find( 'div.uls-ui-languages button.button' ).each( function () {
-				var $button = $( this );
-
-				if ( $button.attr( 'lang' ) === displaySettings.uiLanguage ) {
-					$button.addClass( 'down' );
-				} else {
-					$button.removeClass( 'down' );
-				}
-			} );
+			this.uiLanguage = this.getUILanguage();
+			this.contentLanguage = this.getContentLanguage();
 		}
 	};
 

resources/js/ext.uls.inputsettings.js

@@ -75,7 +75,6 @@
 		this.contentLanguage = this.getContentLanguage();
 		this.$imes = null;
 		this.$parent = $parent;
-		this.dirty = false;
 		this.savedRegistry = $.extend( true, {}, $.ime.preferences.registry );
 	}
 
@@ -88,11 +87,10 @@
 		 */
 		render: function () {
 			var $enabledOnly;
-
+			this.dirty = false;
 			this.$parent.$settingsPanel.empty();
 			this.$imes = $( 'body' ).data( 'ime' );
 			this.$parent.$settingsPanel.append( this.$template );
-
 			$enabledOnly = this.$template.find( '.enabled-only' );
 			// ime system is lazy loaded, make sure it is initialized
 			mw.ime.init();
@@ -106,6 +104,7 @@
 			this.prepareLanguages();
 			this.prepareToggleButton();
 			this.$template.i18n();
+			this.disableApplyButton();
 			$( 'body' ).data( 'webfonts' ).refresh();
 			this.listen();
 		},
@@ -454,8 +453,6 @@
 
 			inputSettings.$template.find( 'button.uls-input-settings-cancel' ).on( 'click', function () {
 				inputSettings.cancel();
-				// Redraw the panel according to the state
-				inputSettings.render();
 				inputSettings.close();
 			} );
 
@@ -569,12 +566,10 @@
 			if ( !this.dirty ) {
 				return;
 			}
-			this.dirty = false;
-			this.disableApplyButton();
-
 			// Reload preferences
 			$.ime.preferences.registry = $.extend( true, {}, this.savedRegistry );
-
+			this.uiLanguage = this.getInterfaceLanguage();
+			this.contentLanguage = this.getContentLanguage();
 			// Restore the state of IME
 			if ( $.ime.preferences.isEnabled() ) {
 				mw.ime.setup();

resources/js/ext.uls.languagesettings.js

@@ -173,7 +173,7 @@
 
 			// Every time we show this window, make sure the current
 			// settings panels is upto date. So just click on active menu item.
-			this.$window.find( '.input-settings-block.active' ).click();
+			this.$window.find( '.settings-menu-items > .active' ).click();
 			this.position();
 			this.visible();
 		},