1 /* global tinymce, wpCookies, autosaveL10n, switchEditors */
3 window.autosave = function() {
7 ( function( $, window ) {
9 var initialCompareString,
11 $document = $(document);
14 * Returns the data saved in both local and remote autosave
16 * @return object Object containing the post data
18 function getPostData( type ) {
19 var post_name, parent_id, data,
20 time = ( new Date() ).getTime(),
24 // Don't run editor.save() more often than every 3 sec.
25 // It is resource intensive and might slow down typing in long posts on slow devices.
26 if ( editor && editor.isDirty() && ! editor.isHidden() && time - 3000 > lastTriggerSave ) {
28 lastTriggerSave = time;
32 post_id: $( '#post_ID' ).val() || 0,
33 post_type: $( '#post_type' ).val() || '',
34 post_author: $( '#post_author' ).val() || '',
35 post_title: $( '#title' ).val() || '',
36 content: $( '#content' ).val() || '',
37 excerpt: $( '#excerpt' ).val() || ''
40 if ( type === 'local' ) {
44 $( 'input[id^="in-category-"]:checked' ).each( function() {
45 cats.push( this.value );
47 data.catslist = cats.join(',');
49 if ( post_name = $( '#post_name' ).val() ) {
50 data.post_name = post_name;
53 if ( parent_id = $( '#parent_id' ).val() ) {
54 data.parent_id = parent_id;
57 if ( $( '#comment_status' ).prop( 'checked' ) ) {
58 data.comment_status = 'open';
61 if ( $( '#ping_status' ).prop( 'checked' ) ) {
62 data.ping_status = 'open';
65 if ( $( '#auto_draft' ).val() === '1' ) {
66 data.auto_draft = '1';
72 // Concatenate title, content and excerpt. Used to track changes when auto-saving.
73 function getCompareString( postData ) {
74 if ( typeof postData === 'object' ) {
75 return ( postData.post_title || '' ) + '::' + ( postData.content || '' ) + '::' + ( postData.excerpt || '' );
78 return ( $('#title').val() || '' ) + '::' + ( $('#content').val() || '' ) + '::' + ( $('#excerpt').val() || '' );
81 function disableButtons() {
82 $document.trigger('autosave-disable-buttons');
83 // Re-enable 5 sec later. Just gives autosave a head start to avoid collisions.
84 setTimeout( enableButtons, 5000 );
87 function enableButtons() {
88 $document.trigger( 'autosave-enable-buttons' );
91 function getEditor() {
92 return typeof tinymce !== 'undefined' && tinymce.get('content');
95 // Autosave in localStorage
96 function autosaveLocal() {
97 var blog_id, post_id, hasStorage, intervalTimer,
101 // Check if the browser supports sessionStorage and it's not disabled
102 function checkStorage() {
103 var test = Math.random().toString(),
107 window.sessionStorage.setItem( 'wp-test', test );
108 result = window.sessionStorage.getItem( 'wp-test' ) === test;
109 window.sessionStorage.removeItem( 'wp-test' );
117 * Initialize the local storage
119 * @return mixed False if no sessionStorage in the browser or an Object containing all postData for this blog
121 function getStorage() {
122 var stored_obj = false;
123 // Separate local storage containers for each blog_id
124 if ( hasStorage && blog_id ) {
125 stored_obj = sessionStorage.getItem( 'wp-autosave-' + blog_id );
128 stored_obj = JSON.parse( stored_obj );
138 * Set the storage for this blog
140 * Confirms that the data was saved successfully.
144 function setStorage( stored_obj ) {
147 if ( hasStorage && blog_id ) {
148 key = 'wp-autosave-' + blog_id;
149 sessionStorage.setItem( key, JSON.stringify( stored_obj ) );
150 return sessionStorage.getItem( key ) !== null;
157 * Get the saved post data for the current post
159 * @return mixed False if no storage or no data or the postData as an Object
161 function getSavedPostData() {
162 var stored = getStorage();
164 if ( ! stored || ! post_id ) {
168 return stored[ 'post_' + post_id ] || false;
172 * Set (save or delete) post data in the storage.
174 * If stored_data evaluates to 'false' the storage key for the current post will be removed
176 * $param stored_data The post data to store or null/false/empty to delete the key
179 function setData( stored_data ) {
180 var stored = getStorage();
182 if ( ! stored || ! post_id ) {
187 stored[ 'post_' + post_id ] = stored_data;
188 } else if ( stored.hasOwnProperty( 'post_' + post_id ) ) {
189 delete stored[ 'post_' + post_id ];
194 return setStorage( stored );
206 * Save post data for the current post
208 * Runs on a 15 sec. interval, saves when there are differences in the post title or content.
209 * When the optional data is provided, updates the last saved post data.
211 * $param data optional Object The post data for saving, minimum 'post_title' and 'content'
214 function save( data ) {
215 var postData, compareString,
218 if ( isSuspended || ! hasStorage ) {
223 postData = getSavedPostData() || {};
224 $.extend( postData, data );
226 postData = getPostData('local');
229 compareString = getCompareString( postData );
231 if ( typeof lastCompareString === 'undefined' ) {
232 lastCompareString = initialCompareString;
235 // If the content, title and excerpt did not change since the last save, don't save again
236 if ( compareString === lastCompareString ) {
240 postData.save_time = ( new Date() ).getTime();
241 postData.status = $( '#post_status' ).val() || '';
242 result = setData( postData );
245 lastCompareString = compareString;
253 post_id = $('#post_ID').val() || 0;
255 // Check if the local post data is different than the loaded post data.
256 if ( $( '#wp-content-wrap' ).hasClass( 'tmce-active' ) ) {
257 // If TinyMCE loads first, check the post 1.5 sec. after it is ready.
258 // By this time the content has been loaded in the editor and 'saved' to the textarea.
259 // This prevents false positives.
260 $document.on( 'tinymce-editor-init.autosave', function() {
261 window.setTimeout( function() {
269 // Save every 15 sec.
270 intervalTimer = window.setInterval( save, 15000 );
272 $( 'form#post' ).on( 'submit.autosave-local', function() {
273 var editor = getEditor(),
274 post_id = $('#post_ID').val() || 0;
276 if ( editor && ! editor.isHidden() ) {
277 // Last onSubmit event in the editor, needs to run after the content has been moved to the textarea.
278 editor.on( 'submit', function() {
280 post_title: $( '#title' ).val() || '',
281 content: $( '#content' ).val() || '',
282 excerpt: $( '#excerpt' ).val() || ''
287 post_title: $( '#title' ).val() || '',
288 content: $( '#content' ).val() || '',
289 excerpt: $( '#excerpt' ).val() || ''
293 var secure = ( 'https:' === window.location.protocol );
294 wpCookies.set( 'wp-saving-post', post_id + '-check', 24 * 60 * 60, false, false, secure );
298 // Strip whitespace and compare two strings
299 function compare( str1, str2 ) {
300 function removeSpaces( string ) {
301 return string.toString().replace(/[\x20\t\r\n\f]+/g, '');
304 return ( removeSpaces( str1 || '' ) === removeSpaces( str2 || '' ) );
308 * Check if the saved data for the current post (if any) is different than the loaded post data on the screen
310 * Shows a standard message letting the user restore the post data if different.
314 function checkPost() {
315 var content, post_title, excerpt, $notice,
316 postData = getSavedPostData(),
317 cookie = wpCookies.get( 'wp-saving-post' ),
318 $newerAutosaveNotice = $( '#has-newer-autosave' ).parent( '.notice' ),
319 $headerEnd = $( '.wp-header-end' );
321 if ( cookie === post_id + '-saved' ) {
322 wpCookies.remove( 'wp-saving-post' );
323 // The post was saved properly, remove old data and bail
332 content = $( '#content' ).val() || '';
333 post_title = $( '#title' ).val() || '';
334 excerpt = $( '#excerpt' ).val() || '';
336 if ( compare( content, postData.content ) && compare( post_title, postData.post_title ) &&
337 compare( excerpt, postData.excerpt ) ) {
343 * If '.wp-header-end' is found, append the notices after it otherwise
344 * after the first h1 or h2 heading found within the main content.
346 if ( ! $headerEnd.length ) {
347 $headerEnd = $( '.wrap h1, .wrap h2' ).first();
350 $notice = $( '#local-storage-notice' )
351 .insertAfter( $headerEnd )
352 .addClass( 'notice-warning' );
354 if ( $newerAutosaveNotice.length ) {
355 // If there is a "server" autosave notice, hide it.
356 // The data in the session storage is either the same or newer.
357 $newerAutosaveNotice.slideUp( 150, function() {
358 $notice.slideDown( 150 );
361 $notice.slideDown( 200 );
364 $notice.find( '.restore-backup' ).on( 'click.autosave-local', function() {
365 restorePost( postData );
366 $notice.fadeTo( 250, 0, function() {
367 $notice.slideUp( 150 );
372 // Restore the current title, content and excerpt from postData.
373 function restorePost( postData ) {
377 // Set the last saved data
378 lastCompareString = getCompareString( postData );
380 if ( $( '#title' ).val() !== postData.post_title ) {
381 $( '#title' ).focus().val( postData.post_title || '' );
384 $( '#excerpt' ).val( postData.excerpt || '' );
385 editor = getEditor();
387 if ( editor && ! editor.isHidden() && typeof switchEditors !== 'undefined' ) {
388 if ( editor.settings.wpautop && postData.content ) {
389 postData.content = switchEditors.wpautop( postData.content );
392 // Make sure there's an undo level in the editor
393 editor.undoManager.transact( function() {
394 editor.setContent( postData.content || '' );
395 editor.nodeChanged();
398 // Make sure the Text editor is selected
399 $( '#content-html' ).click();
400 $( '#content' ).focus();
401 // Using document.execCommand() will let the user undo.
402 document.execCommand( 'selectAll' );
403 document.execCommand( 'insertText', false, postData.content || '' );
412 blog_id = typeof window.autosaveL10n !== 'undefined' && window.autosaveL10n.blog_id;
414 // Check if the browser supports sessionStorage and it's not disabled,
415 // then initialize and run checkPost().
416 // Don't run if the post type supports neither 'editor' (textarea#content) nor 'excerpt'.
417 if ( checkStorage() && blog_id && ( $('#content').length || $('#excerpt').length ) ) {
418 $document.ready( run );
422 hasStorage: hasStorage,
423 getSavedPostData: getSavedPostData,
430 // Autosave on the server
431 function autosaveServer() {
432 var _blockSave, _blockSaveTimer, previousCompareString, lastCompareString,
436 // Block saving for the next 10 sec.
437 function tempBlockSave() {
439 window.clearTimeout( _blockSaveTimer );
441 _blockSaveTimer = window.setTimeout( function() {
454 // Runs on heartbeat-response
455 function response( data ) {
458 lastCompareString = previousCompareString;
459 previousCompareString = '';
461 $document.trigger( 'after-autosave', [data] );
464 if ( data.success ) {
465 // No longer an auto-draft
466 $( '#auto_draft' ).val('');
473 * Resets the timing and tells heartbeat to connect now
477 function triggerSave() {
479 wp.heartbeat.connectNow();
483 * Checks if the post content in the textarea has changed since page load.
485 * This also happens when TinyMCE is active and editor.save() is triggered by
486 * wp.autosave.getPostData().
490 function postChanged() {
491 return getCompareString() !== initialCompareString;
494 // Runs on 'heartbeat-send'
496 var postData, compareString;
498 // window.autosave() used for back-compat
499 if ( isSuspended || _blockSave || ! window.autosave() ) {
503 if ( ( new Date() ).getTime() < nextRun ) {
507 postData = getPostData();
508 compareString = getCompareString( postData );
511 if ( typeof lastCompareString === 'undefined' ) {
512 lastCompareString = initialCompareString;
516 if ( compareString === lastCompareString ) {
520 previousCompareString = compareString;
524 $document.trigger( 'wpcountwords', [ postData.content ] )
525 .trigger( 'before-autosave', [ postData ] );
527 postData._wpnonce = $( '#_wpnonce' ).val() || '';
532 function _schedule() {
533 nextRun = ( new Date() ).getTime() + ( autosaveL10n.autosaveInterval * 1000 ) || 60000;
536 $document.on( 'heartbeat-send.autosave', function( event, data ) {
537 var autosaveData = save();
539 if ( autosaveData ) {
540 data.wp_autosave = autosaveData;
542 }).on( 'heartbeat-tick.autosave', function( event, data ) {
543 if ( data.wp_autosave ) {
544 response( data.wp_autosave );
546 }).on( 'heartbeat-connection-lost.autosave', function( event, error, status ) {
547 // When connection is lost, keep user from submitting changes.
548 if ( 'timeout' === error || 603 === status ) {
549 var $notice = $('#lost-connection-notice');
551 if ( ! wp.autosave.local.hasStorage ) {
552 $notice.find('.hide-if-no-sessionstorage').hide();
558 }).on( 'heartbeat-connection-restored.autosave', function() {
559 $('#lost-connection-notice').hide();
561 }).ready( function() {
566 tempBlockSave: tempBlockSave,
567 triggerSave: triggerSave,
568 postChanged: postChanged,
574 // Wait for TinyMCE to initialize plus 1 sec. for any external css to finish loading,
575 // then 'save' to the textarea before setting initialCompareString.
576 // This avoids any insignificant differences between the initial textarea content and the content
577 // extracted from the editor.
578 $document.on( 'tinymce-editor-init.autosave', function( event, editor ) {
579 if ( editor.id === 'content' ) {
580 window.setTimeout( function() {
582 initialCompareString = getCompareString();
585 }).ready( function() {
586 // Set the initial compare string in case TinyMCE is not used or not loaded first
587 initialCompareString = getCompareString();
591 getPostData: getPostData,
592 getCompareString: getCompareString,
593 disableButtons: disableButtons,
594 enableButtons: enableButtons,
595 local: autosaveLocal(),
596 server: autosaveServer()
600 window.wp = window.wp || {};
601 window.wp.autosave = autosave();
603 }( jQuery, window ));