You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

604 lines
16 KiB

  1. /* global tinymce, wpCookies, autosaveL10n, switchEditors */
  2. // Back-compat
  3. window.autosave = function() {
  4. return true;
  5. };
  6. ( function( $, window ) {
  7. function autosave() {
  8. var initialCompareString,
  9. lastTriggerSave = 0,
  10. $document = $(document);
  11. /**
  12. * Returns the data saved in both local and remote autosave
  13. *
  14. * @return object Object containing the post data
  15. */
  16. function getPostData( type ) {
  17. var post_name, parent_id, data,
  18. time = ( new Date() ).getTime(),
  19. cats = [],
  20. editor = getEditor();
  21. // Don't run editor.save() more often than every 3 sec.
  22. // It is resource intensive and might slow down typing in long posts on slow devices.
  23. if ( editor && editor.isDirty() && ! editor.isHidden() && time - 3000 > lastTriggerSave ) {
  24. editor.save();
  25. lastTriggerSave = time;
  26. }
  27. data = {
  28. post_id: $( '#post_ID' ).val() || 0,
  29. post_type: $( '#post_type' ).val() || '',
  30. post_author: $( '#post_author' ).val() || '',
  31. post_title: $( '#title' ).val() || '',
  32. content: $( '#content' ).val() || '',
  33. excerpt: $( '#excerpt' ).val() || ''
  34. };
  35. if ( type === 'local' ) {
  36. return data;
  37. }
  38. $( 'input[id^="in-category-"]:checked' ).each( function() {
  39. cats.push( this.value );
  40. });
  41. data.catslist = cats.join(',');
  42. if ( post_name = $( '#post_name' ).val() ) {
  43. data.post_name = post_name;
  44. }
  45. if ( parent_id = $( '#parent_id' ).val() ) {
  46. data.parent_id = parent_id;
  47. }
  48. if ( $( '#comment_status' ).prop( 'checked' ) ) {
  49. data.comment_status = 'open';
  50. }
  51. if ( $( '#ping_status' ).prop( 'checked' ) ) {
  52. data.ping_status = 'open';
  53. }
  54. if ( $( '#auto_draft' ).val() === '1' ) {
  55. data.auto_draft = '1';
  56. }
  57. return data;
  58. }
  59. // Concatenate title, content and excerpt. Used to track changes when auto-saving.
  60. function getCompareString( postData ) {
  61. if ( typeof postData === 'object' ) {
  62. return ( postData.post_title || '' ) + '::' + ( postData.content || '' ) + '::' + ( postData.excerpt || '' );
  63. }
  64. return ( $('#title').val() || '' ) + '::' + ( $('#content').val() || '' ) + '::' + ( $('#excerpt').val() || '' );
  65. }
  66. function disableButtons() {
  67. $document.trigger('autosave-disable-buttons');
  68. // Re-enable 5 sec later. Just gives autosave a head start to avoid collisions.
  69. setTimeout( enableButtons, 5000 );
  70. }
  71. function enableButtons() {
  72. $document.trigger( 'autosave-enable-buttons' );
  73. }
  74. function getEditor() {
  75. return typeof tinymce !== 'undefined' && tinymce.get('content');
  76. }
  77. // Autosave in localStorage
  78. function autosaveLocal() {
  79. var blog_id, post_id, hasStorage, intervalTimer,
  80. lastCompareString,
  81. isSuspended = false;
  82. // Check if the browser supports sessionStorage and it's not disabled
  83. function checkStorage() {
  84. var test = Math.random().toString(),
  85. result = false;
  86. try {
  87. window.sessionStorage.setItem( 'wp-test', test );
  88. result = window.sessionStorage.getItem( 'wp-test' ) === test;
  89. window.sessionStorage.removeItem( 'wp-test' );
  90. } catch(e) {}
  91. hasStorage = result;
  92. return result;
  93. }
  94. /**
  95. * Initialize the local storage
  96. *
  97. * @return mixed False if no sessionStorage in the browser or an Object containing all postData for this blog
  98. */
  99. function getStorage() {
  100. var stored_obj = false;
  101. // Separate local storage containers for each blog_id
  102. if ( hasStorage && blog_id ) {
  103. stored_obj = sessionStorage.getItem( 'wp-autosave-' + blog_id );
  104. if ( stored_obj ) {
  105. stored_obj = JSON.parse( stored_obj );
  106. } else {
  107. stored_obj = {};
  108. }
  109. }
  110. return stored_obj;
  111. }
  112. /**
  113. * Set the storage for this blog
  114. *
  115. * Confirms that the data was saved successfully.
  116. *
  117. * @return bool
  118. */
  119. function setStorage( stored_obj ) {
  120. var key;
  121. if ( hasStorage && blog_id ) {
  122. key = 'wp-autosave-' + blog_id;
  123. sessionStorage.setItem( key, JSON.stringify( stored_obj ) );
  124. return sessionStorage.getItem( key ) !== null;
  125. }
  126. return false;
  127. }
  128. /**
  129. * Get the saved post data for the current post
  130. *
  131. * @return mixed False if no storage or no data or the postData as an Object
  132. */
  133. function getSavedPostData() {
  134. var stored = getStorage();
  135. if ( ! stored || ! post_id ) {
  136. return false;
  137. }
  138. return stored[ 'post_' + post_id ] || false;
  139. }
  140. /**
  141. * Set (save or delete) post data in the storage.
  142. *
  143. * If stored_data evaluates to 'false' the storage key for the current post will be removed
  144. *
  145. * $param stored_data The post data to store or null/false/empty to delete the key
  146. * @return bool
  147. */
  148. function setData( stored_data ) {
  149. var stored = getStorage();
  150. if ( ! stored || ! post_id ) {
  151. return false;
  152. }
  153. if ( stored_data ) {
  154. stored[ 'post_' + post_id ] = stored_data;
  155. } else if ( stored.hasOwnProperty( 'post_' + post_id ) ) {
  156. delete stored[ 'post_' + post_id ];
  157. } else {
  158. return false;
  159. }
  160. return setStorage( stored );
  161. }
  162. function suspend() {
  163. isSuspended = true;
  164. }
  165. function resume() {
  166. isSuspended = false;
  167. }
  168. /**
  169. * Save post data for the current post
  170. *
  171. * Runs on a 15 sec. interval, saves when there are differences in the post title or content.
  172. * When the optional data is provided, updates the last saved post data.
  173. *
  174. * $param data optional Object The post data for saving, minimum 'post_title' and 'content'
  175. * @return bool
  176. */
  177. function save( data ) {
  178. var postData, compareString,
  179. result = false;
  180. if ( isSuspended || ! hasStorage ) {
  181. return false;
  182. }
  183. if ( data ) {
  184. postData = getSavedPostData() || {};
  185. $.extend( postData, data );
  186. } else {
  187. postData = getPostData('local');
  188. }
  189. compareString = getCompareString( postData );
  190. if ( typeof lastCompareString === 'undefined' ) {
  191. lastCompareString = initialCompareString;
  192. }
  193. // If the content, title and excerpt did not change since the last save, don't save again
  194. if ( compareString === lastCompareString ) {
  195. return false;
  196. }
  197. postData.save_time = ( new Date() ).getTime();
  198. postData.status = $( '#post_status' ).val() || '';
  199. result = setData( postData );
  200. if ( result ) {
  201. lastCompareString = compareString;
  202. }
  203. return result;
  204. }
  205. // Run on DOM ready
  206. function run() {
  207. post_id = $('#post_ID').val() || 0;
  208. // Check if the local post data is different than the loaded post data.
  209. if ( $( '#wp-content-wrap' ).hasClass( 'tmce-active' ) ) {
  210. // If TinyMCE loads first, check the post 1.5 sec. after it is ready.
  211. // By this time the content has been loaded in the editor and 'saved' to the textarea.
  212. // This prevents false positives.
  213. $document.on( 'tinymce-editor-init.autosave', function() {
  214. window.setTimeout( function() {
  215. checkPost();
  216. }, 1500 );
  217. });
  218. } else {
  219. checkPost();
  220. }
  221. // Save every 15 sec.
  222. intervalTimer = window.setInterval( save, 15000 );
  223. $( 'form#post' ).on( 'submit.autosave-local', function() {
  224. var editor = getEditor(),
  225. post_id = $('#post_ID').val() || 0;
  226. if ( editor && ! editor.isHidden() ) {
  227. // Last onSubmit event in the editor, needs to run after the content has been moved to the textarea.
  228. editor.on( 'submit', function() {
  229. save({
  230. post_title: $( '#title' ).val() || '',
  231. content: $( '#content' ).val() || '',
  232. excerpt: $( '#excerpt' ).val() || ''
  233. });
  234. });
  235. } else {
  236. save({
  237. post_title: $( '#title' ).val() || '',
  238. content: $( '#content' ).val() || '',
  239. excerpt: $( '#excerpt' ).val() || ''
  240. });
  241. }
  242. var secure = ( 'https:' === window.location.protocol );
  243. wpCookies.set( 'wp-saving-post', post_id + '-check', 24 * 60 * 60, false, false, secure );
  244. });
  245. }
  246. // Strip whitespace and compare two strings
  247. function compare( str1, str2 ) {
  248. function removeSpaces( string ) {
  249. return string.toString().replace(/[\x20\t\r\n\f]+/g, '');
  250. }
  251. return ( removeSpaces( str1 || '' ) === removeSpaces( str2 || '' ) );
  252. }
  253. /**
  254. * Check if the saved data for the current post (if any) is different than the loaded post data on the screen
  255. *
  256. * Shows a standard message letting the user restore the post data if different.
  257. *
  258. * @return void
  259. */
  260. function checkPost() {
  261. var content, post_title, excerpt, $notice,
  262. postData = getSavedPostData(),
  263. cookie = wpCookies.get( 'wp-saving-post' ),
  264. $newerAutosaveNotice = $( '#has-newer-autosave' ).parent( '.notice' ),
  265. $headerEnd = $( '.wp-header-end' );
  266. if ( cookie === post_id + '-saved' ) {
  267. wpCookies.remove( 'wp-saving-post' );
  268. // The post was saved properly, remove old data and bail
  269. setData( false );
  270. return;
  271. }
  272. if ( ! postData ) {
  273. return;
  274. }
  275. content = $( '#content' ).val() || '';
  276. post_title = $( '#title' ).val() || '';
  277. excerpt = $( '#excerpt' ).val() || '';
  278. if ( compare( content, postData.content ) && compare( post_title, postData.post_title ) &&
  279. compare( excerpt, postData.excerpt ) ) {
  280. return;
  281. }
  282. /*
  283. * If '.wp-header-end' is found, append the notices after it otherwise
  284. * after the first h1 or h2 heading found within the main content.
  285. */
  286. if ( ! $headerEnd.length ) {
  287. $headerEnd = $( '.wrap h1, .wrap h2' ).first();
  288. }
  289. $notice = $( '#local-storage-notice' )
  290. .insertAfter( $headerEnd )
  291. .addClass( 'notice-warning' );
  292. if ( $newerAutosaveNotice.length ) {
  293. // If there is a "server" autosave notice, hide it.
  294. // The data in the session storage is either the same or newer.
  295. $newerAutosaveNotice.slideUp( 150, function() {
  296. $notice.slideDown( 150 );
  297. });
  298. } else {
  299. $notice.slideDown( 200 );
  300. }
  301. $notice.find( '.restore-backup' ).on( 'click.autosave-local', function() {
  302. restorePost( postData );
  303. $notice.fadeTo( 250, 0, function() {
  304. $notice.slideUp( 150 );
  305. });
  306. });
  307. }
  308. // Restore the current title, content and excerpt from postData.
  309. function restorePost( postData ) {
  310. var editor;
  311. if ( postData ) {
  312. // Set the last saved data
  313. lastCompareString = getCompareString( postData );
  314. if ( $( '#title' ).val() !== postData.post_title ) {
  315. $( '#title' ).focus().val( postData.post_title || '' );
  316. }
  317. $( '#excerpt' ).val( postData.excerpt || '' );
  318. editor = getEditor();
  319. if ( editor && ! editor.isHidden() && typeof switchEditors !== 'undefined' ) {
  320. if ( editor.settings.wpautop && postData.content ) {
  321. postData.content = switchEditors.wpautop( postData.content );
  322. }
  323. // Make sure there's an undo level in the editor
  324. editor.undoManager.transact( function() {
  325. editor.setContent( postData.content || '' );
  326. editor.nodeChanged();
  327. });
  328. } else {
  329. // Make sure the Text editor is selected
  330. $( '#content-html' ).click();
  331. $( '#content' ).focus();
  332. // Using document.execCommand() will let the user undo.
  333. document.execCommand( 'selectAll' );
  334. document.execCommand( 'insertText', false, postData.content || '' );
  335. }
  336. return true;
  337. }
  338. return false;
  339. }
  340. blog_id = typeof window.autosaveL10n !== 'undefined' && window.autosaveL10n.blog_id;
  341. // Check if the browser supports sessionStorage and it's not disabled,
  342. // then initialize and run checkPost().
  343. // Don't run if the post type supports neither 'editor' (textarea#content) nor 'excerpt'.
  344. if ( checkStorage() && blog_id && ( $('#content').length || $('#excerpt').length ) ) {
  345. $document.ready( run );
  346. }
  347. return {
  348. hasStorage: hasStorage,
  349. getSavedPostData: getSavedPostData,
  350. save: save,
  351. suspend: suspend,
  352. resume: resume
  353. };
  354. }
  355. // Autosave on the server
  356. function autosaveServer() {
  357. var _blockSave, _blockSaveTimer, previousCompareString, lastCompareString,
  358. nextRun = 0,
  359. isSuspended = false;
  360. // Block saving for the next 10 sec.
  361. function tempBlockSave() {
  362. _blockSave = true;
  363. window.clearTimeout( _blockSaveTimer );
  364. _blockSaveTimer = window.setTimeout( function() {
  365. _blockSave = false;
  366. }, 10000 );
  367. }
  368. function suspend() {
  369. isSuspended = true;
  370. }
  371. function resume() {
  372. isSuspended = false;
  373. }
  374. // Runs on heartbeat-response
  375. function response( data ) {
  376. _schedule();
  377. _blockSave = false;
  378. lastCompareString = previousCompareString;
  379. previousCompareString = '';
  380. $document.trigger( 'after-autosave', [data] );
  381. enableButtons();
  382. if ( data.success ) {
  383. // No longer an auto-draft
  384. $( '#auto_draft' ).val('');
  385. }
  386. }
  387. /**
  388. * Save immediately
  389. *
  390. * Resets the timing and tells heartbeat to connect now
  391. *
  392. * @return void
  393. */
  394. function triggerSave() {
  395. nextRun = 0;
  396. wp.heartbeat.connectNow();
  397. }
  398. /**
  399. * Checks if the post content in the textarea has changed since page load.
  400. *
  401. * This also happens when TinyMCE is active and editor.save() is triggered by
  402. * wp.autosave.getPostData().
  403. *
  404. * @return bool
  405. */
  406. function postChanged() {
  407. return getCompareString() !== initialCompareString;
  408. }
  409. // Runs on 'heartbeat-send'
  410. function save() {
  411. var postData, compareString;
  412. // window.autosave() used for back-compat
  413. if ( isSuspended || _blockSave || ! window.autosave() ) {
  414. return false;
  415. }
  416. if ( ( new Date() ).getTime() < nextRun ) {
  417. return false;
  418. }
  419. postData = getPostData();
  420. compareString = getCompareString( postData );
  421. // First check
  422. if ( typeof lastCompareString === 'undefined' ) {
  423. lastCompareString = initialCompareString;
  424. }
  425. // No change
  426. if ( compareString === lastCompareString ) {
  427. return false;
  428. }
  429. previousCompareString = compareString;
  430. tempBlockSave();
  431. disableButtons();
  432. $document.trigger( 'wpcountwords', [ postData.content ] )
  433. .trigger( 'before-autosave', [ postData ] );
  434. postData._wpnonce = $( '#_wpnonce' ).val() || '';
  435. return postData;
  436. }
  437. function _schedule() {
  438. nextRun = ( new Date() ).getTime() + ( autosaveL10n.autosaveInterval * 1000 ) || 60000;
  439. }
  440. $document.on( 'heartbeat-send.autosave', function( event, data ) {
  441. var autosaveData = save();
  442. if ( autosaveData ) {
  443. data.wp_autosave = autosaveData;
  444. }
  445. }).on( 'heartbeat-tick.autosave', function( event, data ) {
  446. if ( data.wp_autosave ) {
  447. response( data.wp_autosave );
  448. }
  449. }).on( 'heartbeat-connection-lost.autosave', function( event, error, status ) {
  450. // When connection is lost, keep user from submitting changes.
  451. if ( 'timeout' === error || 603 === status ) {
  452. var $notice = $('#lost-connection-notice');
  453. if ( ! wp.autosave.local.hasStorage ) {
  454. $notice.find('.hide-if-no-sessionstorage').hide();
  455. }
  456. $notice.show();
  457. disableButtons();
  458. }
  459. }).on( 'heartbeat-connection-restored.autosave', function() {
  460. $('#lost-connection-notice').hide();
  461. enableButtons();
  462. }).ready( function() {
  463. _schedule();
  464. });
  465. return {
  466. tempBlockSave: tempBlockSave,
  467. triggerSave: triggerSave,
  468. postChanged: postChanged,
  469. suspend: suspend,
  470. resume: resume
  471. };
  472. }
  473. // Wait for TinyMCE to initialize plus 1 sec. for any external css to finish loading,
  474. // then 'save' to the textarea before setting initialCompareString.
  475. // This avoids any insignificant differences between the initial textarea content and the content
  476. // extracted from the editor.
  477. $document.on( 'tinymce-editor-init.autosave', function( event, editor ) {
  478. if ( editor.id === 'content' ) {
  479. window.setTimeout( function() {
  480. editor.save();
  481. initialCompareString = getCompareString();
  482. }, 1000 );
  483. }
  484. }).ready( function() {
  485. // Set the initial compare string in case TinyMCE is not used or not loaded first
  486. initialCompareString = getCompareString();
  487. });
  488. return {
  489. getPostData: getPostData,
  490. getCompareString: getCompareString,
  491. disableButtons: disableButtons,
  492. enableButtons: enableButtons,
  493. local: autosaveLocal(),
  494. server: autosaveServer()
  495. };
  496. }
  497. window.wp = window.wp || {};
  498. window.wp.autosave = autosave();
  499. }( jQuery, window ));