Changeset 27540

Timestamp:

03/14/2014 07:15:04 PM (10 years ago)

Author:

ocean90

Message:

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.

Location:

trunk/src/wp-admin/js

Files:

• customize-controls.js (modified) (3 diffs)
• customize-widgets.js (modified) (6 diffs)

trunk/src/wp-admin/js/customize-controls.js

@@ -953 +953 @@
                         action: 'customize_save',
                         nonce:  this.nonce.save
-                    }),
-                    request = $.post( api.settings.url.ajax, query );
-
-                api.trigger( 'save', request );
-
-                body.addClass('saving');
-
-                request.always( function() {
-                    body.removeClass('saving');
-                });
-
-                request.done( function( response ) {
-                    // Check if the user is logged out.
-                    if ( '0' === response ) {
-                        self.preview.iframe.hide();
-                        self.login().done( function() {
-                            self.save();
-                            self.preview.iframe.show();
-                        });
-                        return;
-                    }
-
-                    // Check for cheaters.
-                    if ( '-1' === response ) {
-                        self.cheatin();
-                        return;
-                    }
-
-                    api.trigger( 'saved' );
-                });
+                    } ),
+                    processing = api.state( 'processing' ),
+                    submitWhenDoneProcessing,
+                    submit;
+
+                body.addClass( 'saving' );
+
+                submit = function () {
+                    var request = $.post( api.settings.url.ajax, query );
+
+                    api.trigger( 'save', request );
+
+                    request.always( function () {
+                        body.removeClass( 'saving' );
+                    } );
+
+                    request.done( function( response ) {
+                        // Check if the user is logged out.
+                        if ( '0' === response ) {
+                            self.preview.iframe.hide();
+                            self.login().done( function() {
+                                self.save();
+                                self.preview.iframe.show();
+                            } );
+                            return;
+                        }
+
+                        // Check for cheaters.
+                        if ( '-1' === response ) {
+                            self.cheatin();
+                            return;
+                        }
+
+                        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 +1036 @@
         (function() {
             var state = new api.Values(),
-                saved = state.create('saved'),
-                activated = state.create('activated');
+                saved = state.create( 'saved' ),
+                activated = state.create( 'activated' ),
+                processing = state.create( 'processing' );
 
             state.bind( 'change', function() {
@@ -1041 +1061 @@
             saved( true );
             activated( api.settings.theme.active );
+            processing( 0 );
 
             api.bind( 'change', function() {

trunk/src/wp-admin/js/customize-widgets.js

@@ -915 +915 @@
                 widget_content,
                 save_btn,
-                trigger_save;
+                update_widget_debounced;
 
             widget_content = control.container.find( '.widget-content' );
@@ -929 +929 @@
             } );
 
-            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();
@@ -944 +944 @@
             // Handle widgets that support live previews
             widget_content.on( 'change input propertychange', ':input', function ( e ) {
-                if ( e.type === 'change' || ( this.checkValidity && this.checkValidity() ) ) {
-                    trigger_save();
+                if ( e.type === 'change' ) {
+                    control.updateWidget();
+                } else if ( this.checkValidity && this.checkValidity() ) {
+                    update_widget_debounced();
                 }
             } );
@@ -1098 +1100 @@
                 active_input_selection_start = null,
                 active_input_selection_end = null,
-                params = {},
+                params,
                 data,
                 inputs,
+                processing,
                 jqxhr;
 
@@ -1130 +1133 @@
             control.container.addClass( 'widget-form-loading' );
             control.container.addClass( 'previewer-loading' );
+            processing = wp.customize.state( 'processing' );
+            processing( processing() + 1 );
 
             params = {};
@@ -1253 +1258 @@
                     $( this ).removeData( 'state' + update_number );
                 } );
+
+                processing( processing() - 1 );
             } );
         },