From d912fbccfe64bb8cc9920bf0ddb4f354dfe309b6 Mon Sep 17 00:00:00 2001
From: "Amir E. Aharoni" <amir.aharoni@mail.huji.ac.il>
Date: Thu, 22 Nov 2012 08:24:03 +0200
Subject: [PATCH] (bug 39685) Disable the Apply button until there are changes

Make the button disabled initially.
Change the disabled property to false on every possible change.

For now this is only for display settings.

Change-Id: Ifea533a9606f66b5dfeb38075186ddec596330a6
---
 resources/js/ext.uls.displaysettings.js | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/resources/js/ext.uls.displaysettings.js b/resources/js/ext.uls.displaysettings.js
index 5126d092..f5611bbe 100644
--- a/resources/js/ext.uls.displaysettings.js
+++ b/resources/js/ext.uls.displaysettings.js
@@ -81,7 +81,7 @@
 		+ '<div class="row language-settings-buttons">'
 		+ '<div class="eleven columns">'
 		+ '<button class="button uls-settings-close" data-i18n="ext-uls-language-settings-cancel"></button>'
-		+ '<button id="uls-displaysettings-apply" class="active blue button" data-i18n="ext-uls-language-settings-apply"></button>'
+		+ '<button class="button active blue" id="uls-displaysettings-apply" data-i18n="ext-uls-language-settings-apply" disabled></button>'
 		+ '</div>'
 		+ '</div>'
 		+ '</div>';
@@ -173,6 +173,7 @@
 
 			function buttonHandler( button ) {
 				return function () {
+					displaySettings.enableApplyButton();
 					displaySettings.uiLanguage = button.data( 'language' ) || displaySettings.uiLanguage;
 					$( 'div.uls-ui-languages button.button' ).removeClass( 'down' );
 					button.addClass( 'down' );
@@ -237,6 +238,7 @@
 						.i18n();
 				},
 				onSelect: function ( langCode ) {
+					that.enableApplyButton();
 					that.uiLanguage = langCode;
 					that.$parent.show();
 					that.prepareUIFonts();
@@ -357,16 +359,26 @@
 			this.prepareFontSelector( 'content' );
 		},
 
+		/**
+		 * Enable the apply button.
+		 * Useful in many places when something changes.
+		 */
+		enableApplyButton: function () {
+			this.$template.find( '#uls-displaysettings-apply' ).removeAttr( 'disabled' );
+		},
+
 		/**
 		 * Register general event listeners
 		 */
 		listen: function () {
-			var that = this, $contentFontSelector, $uiFontSelector, oldFont;
+			var that = this,
+				$contentFontSelector, $uiFontSelector,
+				oldFont;
 
 			$contentFontSelector = this.$template
 				.find( '#content-font-selector' );
 			$uiFontSelector = this.$template
-				.find( 'select#ui-font-selector' );
+				.find( '#ui-font-selector' );
 
 			oldFont = $uiFontSelector.find( 'option:selected' ).val();
 
@@ -383,6 +395,8 @@
 			} );
 
 			this.$template.find( '#webfonts-enable-checkbox' ).on( 'click', function () {
+				that.enableApplyButton();
+
 				if ( this.checked ) {
 					mw.webfonts.preferences.enable();
 					$contentFontSelector.prop( 'disabled', false );
@@ -397,12 +411,14 @@
 			} );
 
 			$uiFontSelector.on( 'change', function () {
+				that.enableApplyButton();
 				var font = $( this ).find( 'option:selected' ).val();
 				mw.webfonts.preferences.setFont( that.uiLanguage, font );
 				that.$webfonts.refresh();
 			} );
 
 			$contentFontSelector.on( 'change', function () {
+				that.enableApplyButton();
 				var font = $( this ).find( 'option:selected' ).val();
 				mw.webfonts.preferences.setFont( that.contentLanguage, font );
 				that.$webfonts.refresh();