Autosave: use heartbeat to determine when connection is lost and disable the Save and Publish buttons. Re-enable the buttons when connection is restored. Props dh-shredder, see #23220

git-svn-id: https://develop.svn.wordpress.org/trunk@23886 602fd350-edb4-49c9-b593-d223f7449a82

wp-admin/edit-form-advanced.php

@@ -365,6 +365,9 @@ if ( isset( $post_new_file ) && current_user_can( $post_type_object->cap->create
 <?php if ( $message ) : ?>
 <div id="message" class="updated"><p><?php echo $message; ?></p></div>
 <?php endif; ?>
+<div id="lost-connection-notice" class="error hidden">
+	<p><?php _e("You have lost your connection with the server, and saving has been disabled. This message will vanish once you've reconnected."); ?></p>
+</div>
 <form name="post" action="post.php" method="post" id="post"<?php do_action('post_edit_form_tag'); ?>>
 <?php wp_nonce_field($nonce_action); ?>
 <input type="hidden" id="user-id" name="user_ID" value="<?php echo (int) $user_ID ?>" />

wp-includes/js/autosave.js

@@ -128,6 +128,15 @@ jQuery(document).ready( function($) {
 			delayed_autosave();
 		});
 	}
+
+	// When connection is lost, keep user from submitting changes.
+	$(document).on('heartbeat-connection-lost.autosave', function() {
+		autosave_disable_buttons();
+		$('#lost-connection-notice').show();
+	}).on('heartbeat-connection-restored.autosave', function() {
+		autosave_enable_buttons();
+		$('#lost-connection-notice').hide();
+	});
 });
 
 function autosave_parse_response( response ) {
@@ -218,17 +227,20 @@ function autosave_loading() {
 }
 
 function autosave_enable_buttons() {
-	// delay that a bit to avoid some rare collisions while the DOM is being updated.
-	setTimeout(function(){
-		jQuery(':button, :submit', '#submitpost').removeAttr('disabled');
-		jQuery('.spinner', '#submitpost').hide();
-	}, 500);
+	if ( ! wp.heartbeat.connectionLost ) {
+		// delay that a bit to avoid some rare collisions while the DOM is being updated.
+		setTimeout(function(){
+			var parent = jQuery('#submitpost');
+			parent.find(':button, :submit').removeAttr('disabled');
+			parent.find('.spinner').hide();
+		}, 500);
+	}
 }
 
 function autosave_disable_buttons() {
-	jQuery(':button, :submit', '#submitpost').prop('disabled', true);
+	jQuery('#submitpost').find(':button, :submit').prop('disabled', true);
 	// Re-enable 5 sec later. Just gives autosave a head start to avoid collisions.
-	setTimeout(autosave_enable_buttons, 5000);
+	setTimeout( autosave_enable_buttons, 5000 );
 }
 
 function delayed_autosave() {
@@ -245,6 +257,7 @@ autosave = function() {
 	var rich = (typeof tinymce != "undefined") && tinymce.activeEditor && !tinymce.activeEditor.isHidden(),
 		post_data, doAutoSave, ed, origStatus, successCallback;
 
+	// Disable buttons until we know the save completed.
 	autosave_disable_buttons();
 
 	post_data = wp.autosave.getPostData();

wp-includes/js/heartbeat.js

@@ -383,6 +383,8 @@ window.wp = window.wp || {};
 			if ( self.xhr && self.xhr.readyState != 4 )
 				self.xhr.abort();
 
+			// Reset the error state
+			errorstate();
 			running = false;
 			return true;
 		}