wp-includes/js/autosave.js

   1 /* global tinymce, wpCookies, autosaveL10n, switchEditors */
   2 // Back-compat
   3 window.autosave = function() {
   4         return true;
   5 };
   6
   7 ( function( $, window ) {
   8         function autosave() {
   9                 var initialCompareString,
  10                         lastTriggerSave = 0,
  11                         $document = $(document);
  12
  13                 /**
  14                  * Returns the data saved in both local and remote autosave
  15                  *
  16                  * @return object Object containing the post data
  17                  */
  18                 function getPostData( type ) {
  19                         var post_name, parent_id, data,
  20                                 time = ( new Date() ).getTime(),
  21                                 cats = [],
  22                                 editor = getEditor();
  23
  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 ) {
  27                                 editor.save();
  28                                 lastTriggerSave = time;
  29                         }
  30
  31                         data = {
  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() || ''
  38                         };
  39
  40                         if ( type === 'local' ) {
  41                                 return data;
  42                         }
  43
  44                         $( 'input[id^="in-category-"]:checked' ).each( function() {
  45                                 cats.push( this.value );
  46                         });
  47                         data.catslist = cats.join(',');
  48
  49                         if ( post_name = $( '#post_name' ).val() ) {
  50                                 data.post_name = post_name;
  51                         }
  52
  53                         if ( parent_id = $( '#parent_id' ).val() ) {
  54                                 data.parent_id = parent_id;
  55                         }
  56
  57                         if ( $( '#comment_status' ).prop( 'checked' ) ) {
  58                                 data.comment_status = 'open';
  59                         }
  60
  61                         if ( $( '#ping_status' ).prop( 'checked' ) ) {
  62                                 data.ping_status = 'open';
  63                         }
  64
  65                         if ( $( '#auto_draft' ).val() === '1' ) {
  66                                 data.auto_draft = '1';
  67                         }
  68
  69                         return data;
  70                 }
  71
  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 || '' );
  76                         }
  77
  78                         return ( $('#title').val() || '' ) + '::' + ( $('#content').val() || '' ) + '::' + ( $('#excerpt').val() || '' );
  79                 }
  80
  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 );
  85                 }
  86
  87                 function enableButtons() {
  88                         $document.trigger( 'autosave-enable-buttons' );
  89                 }
  90
  91                 function getEditor() {
  92                         return typeof tinymce !== 'undefined' && tinymce.get('content');
  93                 }
  94
  95                 // Autosave in localStorage
  96                 function autosaveLocal() {
  97                         var blog_id, post_id, hasStorage, intervalTimer,
  98                                 lastCompareString,
  99                                 isSuspended = false;
 100
 101                         // Check if the browser supports sessionStorage and it's not disabled
 102                         function checkStorage() {
 103                                 var test = Math.random().toString(),
 104                                         result = false;
 105
 106                                 try {
 107                                         window.sessionStorage.setItem( 'wp-test', test );
 108                                         result = window.sessionStorage.getItem( 'wp-test' ) === test;
 109                                         window.sessionStorage.removeItem( 'wp-test' );
 110                                 } catch(e) {}
 111
 112                                 hasStorage = result;
 113                                 return result;
 114                         }
 115
 116                         /**
 117                          * Initialize the local storage
 118                          *
 119                          * @return mixed False if no sessionStorage in the browser or an Object containing all postData for this blog
 120                          */
 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 );
 126
 127                                         if ( stored_obj ) {
 128                                                 stored_obj = JSON.parse( stored_obj );
 129                                         } else {
 130                                                 stored_obj = {};
 131                                         }
 132                                 }
 133
 134                                 return stored_obj;
 135                         }
 136
 137                         /**
 138                          * Set the storage for this blog
 139                          *
 140                          * Confirms that the data was saved successfully.
 141                          *
 142                          * @return bool
 143                          */
 144                         function setStorage( stored_obj ) {
 145                                 var key;
 146
 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;
 151                                 }
 152
 153                                 return false;
 154                         }
 155
 156                         /**
 157                          * Get the saved post data for the current post
 158                          *
 159                          * @return mixed False if no storage or no data or the postData as an Object
 160                          */
 161                         function getSavedPostData() {
 162                                 var stored = getStorage();
 163
 164                                 if ( ! stored || ! post_id ) {
 165                                         return false;
 166                                 }
 167
 168                                 return stored[ 'post_' + post_id ] || false;
 169                         }
 170
 171                         /**
 172                          * Set (save or delete) post data in the storage.
 173                          *
 174                          * If stored_data evaluates to 'false' the storage key for the current post will be removed
 175                          *
 176                          * $param stored_data The post data to store or null/false/empty to delete the key
 177                          * @return bool
 178                          */
 179                         function setData( stored_data ) {
 180                                 var stored = getStorage();
 181
 182                                 if ( ! stored || ! post_id ) {
 183                                         return false;
 184                                 }
 185
 186                                 if ( stored_data ) {
 187                                         stored[ 'post_' + post_id ] = stored_data;
 188                                 } else if ( stored.hasOwnProperty( 'post_' + post_id ) ) {
 189                                         delete stored[ 'post_' + post_id ];
 190                                 } else {
 191                                         return false;
 192                                 }
 193
 194                                 return setStorage( stored );
 195                         }
 196
 197                         function suspend() {
 198                                 isSuspended = true;
 199                         }
 200
 201                         function resume() {
 202                                 isSuspended = false;
 203                         }
 204
 205                         /**
 206                          * Save post data for the current post
 207                          *
 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.
 210                          *
 211                          * $param data optional Object The post data for saving, minimum 'post_title' and 'content'
 212                          * @return bool
 213                          */
 214                         function save( data ) {
 215                                 var postData, compareString,
 216                                         result = false;
 217
 218                                 if ( isSuspended || ! hasStorage ) {
 219                                         return false;
 220                                 }
 221
 222                                 if ( data ) {
 223                                         postData = getSavedPostData() || {};
 224                                         $.extend( postData, data );
 225                                 } else {
 226                                         postData = getPostData('local');
 227                                 }
 228
 229                                 compareString = getCompareString( postData );
 230
 231                                 if ( typeof lastCompareString === 'undefined' ) {
 232                                         lastCompareString = initialCompareString;
 233                                 }
 234
 235                                 // If the content, title and excerpt did not change since the last save, don't save again
 236                                 if ( compareString === lastCompareString ) {
 237                                         return false;
 238                                 }
 239
 240                                 postData.save_time = ( new Date() ).getTime();
 241                                 postData.status = $( '#post_status' ).val() || '';
 242                                 result = setData( postData );
 243
 244                                 if ( result ) {
 245                                         lastCompareString = compareString;
 246                                 }
 247
 248                                 return result;
 249                         }
 250
 251                         // Run on DOM ready
 252                         function run() {
 253                                 post_id = $('#post_ID').val() || 0;
 254
 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() {
 262                                                         checkPost();
 263                                                 }, 1500 );
 264                                         });
 265                                 } else {
 266                                         checkPost();
 267                                 }
 268
 269                                 // Save every 15 sec.
 270                                 intervalTimer = window.setInterval( save, 15000 );
 271
 272                                 $( 'form#post' ).on( 'submit.autosave-local', function() {
 273                                         var editor = getEditor(),
 274                                                 post_id = $('#post_ID').val() || 0;
 275
 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() {
 279                                                         save({
 280                                                                 post_title: $( '#title' ).val() || '',
 281                                                                 content: $( '#content' ).val() || '',
 282                                                                 excerpt: $( '#excerpt' ).val() || ''
 283                                                         });
 284                                                 });
 285                                         } else {
 286                                                 save({
 287                                                         post_title: $( '#title' ).val() || '',
 288                                                         content: $( '#content' ).val() || '',
 289                                                         excerpt: $( '#excerpt' ).val() || ''
 290                                                 });
 291                                         }
 292
 293                                         var secure = ( 'https:' === window.location.protocol );
 294                                         wpCookies.set( 'wp-saving-post', post_id + '-check', 24 * 60 * 60, false, false, secure );
 295                                 });
 296                         }
 297
 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, '');
 302                                 }
 303
 304                                 return ( removeSpaces( str1 || '' ) === removeSpaces( str2 || '' ) );
 305                         }
 306
 307                         /**
 308                          * Check if the saved data for the current post (if any) is different than the loaded post data on the screen
 309                          *
 310                          * Shows a standard message letting the user restore the post data if different.
 311                          *
 312                          * @return void
 313                          */
 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' );
 320
 321                                 if ( cookie === post_id + '-saved' ) {
 322                                         wpCookies.remove( 'wp-saving-post' );
 323                                         // The post was saved properly, remove old data and bail
 324                                         setData( false );
 325                                         return;
 326                                 }
 327
 328                                 if ( ! postData ) {
 329                                         return;
 330                                 }
 331
 332                                 content = $( '#content' ).val() || '';
 333                                 post_title = $( '#title' ).val() || '';
 334                                 excerpt = $( '#excerpt' ).val() || '';
 335
 336                                 if ( compare( content, postData.content ) && compare( post_title, postData.post_title ) &&
 337                                         compare( excerpt, postData.excerpt ) ) {
 338
 339                                         return;
 340                                 }
 341
 342                                 /*
 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.
 345                                  */
 346                                 if ( ! $headerEnd.length ) {
 347                                         $headerEnd = $( '.wrap h1, .wrap h2' ).first();
 348                                 }
 349
 350                                 $notice = $( '#local-storage-notice' )
 351                                         .insertAfter( $headerEnd )
 352                                         .addClass( 'notice-warning' );
 353
 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 );
 359                                         });
 360                                 } else {
 361                                         $notice.slideDown( 200 );
 362                                 }
 363
 364                                 $notice.find( '.restore-backup' ).on( 'click.autosave-local', function() {
 365                                         restorePost( postData );
 366                                         $notice.fadeTo( 250, 0, function() {
 367                                                 $notice.slideUp( 150 );
 368                                         });
 369                                 });
 370                         }
 371
 372                         // Restore the current title, content and excerpt from postData.
 373                         function restorePost( postData ) {
 374                                 var editor;
 375
 376                                 if ( postData ) {
 377                                         // Set the last saved data
 378                                         lastCompareString = getCompareString( postData );
 379
 380                                         if ( $( '#title' ).val() !== postData.post_title ) {
 381                                                 $( '#title' ).focus().val( postData.post_title || '' );
 382                                         }
 383
 384                                         $( '#excerpt' ).val( postData.excerpt || '' );
 385                                         editor = getEditor();
 386
 387                                         if ( editor && ! editor.isHidden() && typeof switchEditors !== 'undefined' ) {
 388                                                 if ( editor.settings.wpautop && postData.content ) {
 389                                                         postData.content = switchEditors.wpautop( postData.content );
 390                                                 }
 391
 392                                                 // Make sure there's an undo level in the editor
 393                                                 editor.undoManager.transact( function() {
 394                                                         editor.setContent( postData.content || '' );
 395                                                         editor.nodeChanged();
 396                                                 });
 397                                         } else {
 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 || '' );
 404                                         }
 405
 406                                         return true;
 407                                 }
 408
 409                                 return false;
 410                         }
 411
 412                         blog_id = typeof window.autosaveL10n !== 'undefined' && window.autosaveL10n.blog_id;
 413
 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 );
 419                         }
 420
 421                         return {
 422                                 hasStorage: hasStorage,
 423                                 getSavedPostData: getSavedPostData,
 424                                 save: save,
 425                                 suspend: suspend,
 426                                 resume: resume
 427                         };
 428                 }
 429
 430                 // Autosave on the server
 431                 function autosaveServer() {
 432                         var _blockSave, _blockSaveTimer, previousCompareString, lastCompareString,
 433                                 nextRun = 0,
 434                                 isSuspended = false;
 435
 436                         // Block saving for the next 10 sec.
 437                         function tempBlockSave() {
 438                                 _blockSave = true;
 439                                 window.clearTimeout( _blockSaveTimer );
 440
 441                                 _blockSaveTimer = window.setTimeout( function() {
 442                                         _blockSave = false;
 443                                 }, 10000 );
 444                         }
 445
 446                         function suspend() {
 447                                 isSuspended = true;
 448                         }
 449
 450                         function resume() {
 451                                 isSuspended = false;
 452                         }
 453
 454                         // Runs on heartbeat-response
 455                         function response( data ) {
 456                                 _schedule();
 457                                 _blockSave = false;
 458                                 lastCompareString = previousCompareString;
 459                                 previousCompareString = '';
 460
 461                                 $document.trigger( 'after-autosave', [data] );
 462                                 enableButtons();
 463
 464                                 if ( data.success ) {
 465                                         // No longer an auto-draft
 466                                         $( '#auto_draft' ).val('');
 467                                 }
 468                         }
 469
 470                         /**
 471                          * Save immediately
 472                          *
 473                          * Resets the timing and tells heartbeat to connect now
 474                          *
 475                          * @return void
 476                          */
 477                         function triggerSave() {
 478                                 nextRun = 0;
 479                                 wp.heartbeat.connectNow();
 480                         }
 481
 482                         /**
 483                          * Checks if the post content in the textarea has changed since page load.
 484                          *
 485                          * This also happens when TinyMCE is active and editor.save() is triggered by
 486                          * wp.autosave.getPostData().
 487                          *
 488                          * @return bool
 489                          */
 490                         function postChanged() {
 491                                 return getCompareString() !== initialCompareString;
 492                         }
 493
 494                         // Runs on 'heartbeat-send'
 495                         function save() {
 496                                 var postData, compareString;
 497
 498                                 // window.autosave() used for back-compat
 499                                 if ( isSuspended || _blockSave || ! window.autosave() ) {
 500                                         return false;
 501                                 }
 502
 503                                 if ( ( new Date() ).getTime() < nextRun ) {
 504                                         return false;
 505                                 }
 506
 507                                 postData = getPostData();
 508                                 compareString = getCompareString( postData );
 509
 510                                 // First check
 511                                 if ( typeof lastCompareString === 'undefined' ) {
 512                                         lastCompareString = initialCompareString;
 513                                 }
 514
 515                                 // No change
 516                                 if ( compareString === lastCompareString ) {
 517                                         return false;
 518                                 }
 519
 520                                 previousCompareString = compareString;
 521                                 tempBlockSave();
 522                                 disableButtons();
 523
 524                                 $document.trigger( 'wpcountwords', [ postData.content ] )
 525                                         .trigger( 'before-autosave', [ postData ] );
 526
 527                                 postData._wpnonce = $( '#_wpnonce' ).val() || '';
 528
 529                                 return postData;
 530                         }
 531
 532                         function _schedule() {
 533                                 nextRun = ( new Date() ).getTime() + ( autosaveL10n.autosaveInterval * 1000 ) || 60000;
 534                         }
 535
 536                         $document.on( 'heartbeat-send.autosave', function( event, data ) {
 537                                 var autosaveData = save();
 538
 539                                 if ( autosaveData ) {
 540                                         data.wp_autosave = autosaveData;
 541                                 }
 542                         }).on( 'heartbeat-tick.autosave', function( event, data ) {
 543                                 if ( data.wp_autosave ) {
 544                                         response( data.wp_autosave );
 545                                 }
 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');
 550
 551                                         if ( ! wp.autosave.local.hasStorage ) {
 552                                                 $notice.find('.hide-if-no-sessionstorage').hide();
 553                                         }
 554
 555                                         $notice.show();
 556                                         disableButtons();
 557                                 }
 558                         }).on( 'heartbeat-connection-restored.autosave', function() {
 559                                 $('#lost-connection-notice').hide();
 560                                 enableButtons();
 561                         }).ready( function() {
 562                                 _schedule();
 563                         });
 564
 565                         return {
 566                                 tempBlockSave: tempBlockSave,
 567                                 triggerSave: triggerSave,
 568                                 postChanged: postChanged,
 569                                 suspend: suspend,
 570                                 resume: resume
 571                         };
 572                 }
 573
 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() {
 581                                         editor.save();
 582                                         initialCompareString = getCompareString();
 583                                 }, 1000 );
 584                         }
 585                 }).ready( function() {
 586                         // Set the initial compare string in case TinyMCE is not used or not loaded first
 587                         initialCompareString = getCompareString();
 588                 });
 589
 590                 return {
 591                         getPostData: getPostData,
 592                         getCompareString: getCompareString,
 593                         disableButtons: disableButtons,
 594                         enableButtons: enableButtons,
 595                         local: autosaveLocal(),
 596                         server: autosaveServer()
 597                 };
 598         }
 599
 600         window.wp = window.wp || {};
 601         window.wp.autosave = autosave();
 602
 603 }( jQuery, window ));