Customizer: Introduce a processing state.

The processing state will prevent a save when it doesn't return 0.
Widget Customizer will use the state to prevent a save while a widget is updating, which is an asynchronous process.

props westonruter.
fixes #27390.
Built from https://develop.svn.wordpress.org/trunk@27540


git-svn-id: http://core.svn.wordpress.org/trunk@27383 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/js/customize-controls.js

@@ -953,12 +953,17 @@
 						action: 'customize_save',
 						nonce:  this.nonce.save
 					} ),
-					request = $.post( api.settings.url.ajax, query );
+					processing = api.state( 'processing' ),
-
+					submitWhenDoneProcessing,
-				api.trigger( 'save', request );
+					submit;
 
 				body.addClass( 'saving' );
 
+				submit = function () {
+					var request = $.post( api.settings.url.ajax, query );
+
+					api.trigger( 'save', request );
+
 					request.always( function () {
 						body.removeClass( 'saving' );
 					} );
@@ -982,6 +987,20 @@
 
 						api.trigger( 'saved' );
 					} );
+				};
+
+				if ( 0 === processing() ) {
+					submit();
+				} else {
+					submitWhenDoneProcessing = function () {
+						if ( 0 === processing() ) {
+							api.state.unbind( 'change', submitWhenDoneProcessing );
+							submit();
+						}
+					};
+					api.state.bind( 'change', submitWhenDoneProcessing );
+				}
+
 			}
 		});
 
@@ -1017,7 +1036,8 @@
 		(function() {
 			var state = new api.Values(),
 				saved = state.create( 'saved' ),
-				activated = state.create('activated');
+				activated = state.create( 'activated' ),
+				processing = state.create( 'processing' );
 
 			state.bind( 'change', function() {
 				var save = $('#save'),
@@ -1040,6 +1060,7 @@
 			// Set default states.
 			saved( true );
 			activated( api.settings.theme.active );
+			processing( 0 );
 
 			api.bind( 'change', function() {
 				state('saved').set( false );

wp-admin/js/customize-widgets.js

@@ -914,7 +914,7 @@ var WidgetCustomizer = ( function ($) {
 			var control = this,
 				widget_content,
 				save_btn,
-				trigger_save;
+				update_widget_debounced;
 
 			widget_content = control.container.find( '.widget-content' );
 
@@ -928,7 +928,7 @@ var WidgetCustomizer = ( function ($) {
 				control.updateWidget();
 			} );
 
-			trigger_save = _.debounce( function () {
+			update_widget_debounced = _.debounce( function () {
 				// @todo For compatibility with other plugins, should we trigger a click event? What about form submit event?
 				control.updateWidget();
 			}, 250 );
@@ -943,8 +943,10 @@ var WidgetCustomizer = ( function ($) {
 
 			// Handle widgets that support live previews
 			widget_content.on( 'change input propertychange', ':input', function ( e ) {
-				if ( e.type === 'change' || ( this.checkValidity && this.checkValidity() ) ) {
+				if ( e.type === 'change' ) {
-					trigger_save();
+					control.updateWidget();
+				} else if ( this.checkValidity && this.checkValidity() ) {
+					update_widget_debounced();
 				}
 			} );
 
@@ -1097,9 +1099,10 @@ var WidgetCustomizer = ( function ($) {
 				element_id_to_refocus = null,
 				active_input_selection_start = null,
 				active_input_selection_end = null,
-				params = {},
+				params,
 				data,
 				inputs,
+				processing,
 				jqxhr;
 
 			args = $.extend( {
@@ -1129,6 +1132,8 @@ var WidgetCustomizer = ( function ($) {
 
 			control.container.addClass( 'widget-form-loading' );
 			control.container.addClass( 'previewer-loading' );
+			processing = wp.customize.state( 'processing' );
+			processing( processing() + 1 );
 
 			params = {};
 			params.action = self.update_widget_ajax_action;
@@ -1252,6 +1257,8 @@ var WidgetCustomizer = ( function ($) {
 				inputs.each( function () {
 					$( this ).removeData( 'state' + update_number );
 				} );
+
+				processing( processing() - 1 );
 			} );
 		},