WordPress.org

Make WordPress Core

Changeset 37737


Ignore:
Timestamp:
06/17/2016 03:01:32 AM (4 years ago)
Author:
azaozz
Message:

Autosave: improve the notice when the sessionStorage autosave is different than the content.

  • Make it higher priority than the server autosave.
  • Change it so the editors undo and redo can be used.
  • Replace the restore link with a button.
  • Add better explanation/help.

See #37025.

Location:
trunk/src
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/includes/template.php

    r37573 r37737  
    20042004function _local_storage_notice() {
    20052005    ?>
    2006     <div id="local-storage-notice" class="hidden notice">
     2006    <div id="local-storage-notice" class="hidden notice is-dismissible">
    20072007    <p class="local-restore">
    2008         <?php _e('The backup of this post in your browser is different from the version below.'); ?>
    2009         <a class="restore-backup" href="#"><?php _e('Restore the backup.'); ?></a>
     2008        <?php _e( 'The backup of this post in your browser is different from the version below.' ); ?>
     2009        <button type="button" class="button restore-backup"><?php _e('Restore the backup'); ?></button>
    20102010    </p>
    2011     <p class="undo-restore hidden">
    2012         <?php _e('Post restored successfully.'); ?>
    2013         <a class="undo-restore-backup" href="#"><?php _e('Undo.'); ?></a>
     2011    <p class="help">
     2012        <?php _e( 'This will replace the current editor content with the last backup version. You can use undo and redo in the editor to get the old content back or to return to the restored version.' ); ?>
    20142013    </p>
    20152014    </div>
  • trunk/src/wp-includes/js/autosave.js

    r36134 r37737  
    88    function autosave() {
    99        var initialCompareString,
    10         lastTriggerSave = 0,
    11         $document = $(document);
     10            lastTriggerSave = 0,
     11            $document = $(document);
    1212
    1313        /**
     
    2020                time = ( new Date() ).getTime(),
    2121                cats = [],
    22                 editor = typeof tinymce !== 'undefined' && tinymce.get('content');
     22                editor = getEditor();
    2323
    2424            // Don't run editor.save() more often than every 3 sec.
    2525            // It is resource intensive and might slow down typing in long posts on slow devices.
    26             if ( editor && ! editor.isHidden() && time - 3000 > lastTriggerSave ) {
     26            if ( editor && editor.isDirty() && ! editor.isHidden() && time - 3000 > lastTriggerSave ) {
    2727                editor.save();
    2828                lastTriggerSave = time;
     
    8989        }
    9090
     91        function getEditor() {
     92            return typeof tinymce !== 'undefined' && tinymce.get('content');
     93        }
     94
    9195        // Autosave in localStorage
    9296        function autosaveLocal() {
    93             var restorePostData, undoPostData, blog_id, post_id, hasStorage, intervalTimer,
     97            var blog_id, post_id, hasStorage, intervalTimer,
    9498                lastCompareString,
    9599                isSuspended = false;
     
    267271
    268272                $( 'form#post' ).on( 'submit.autosave-local', function() {
    269                     var editor = typeof tinymce !== 'undefined' && tinymce.get('content'),
     273                    var editor = getEditor(),
    270274                        post_id = $('#post_ID').val() || 0;
    271275
     
    311315                var content, post_title, excerpt, $notice,
    312316                    postData = getSavedPostData(),
    313                     cookie = wpCookies.get( 'wp-saving-post' );
     317                    cookie = wpCookies.get( 'wp-saving-post' ),
     318                    $newerAutosaveNotice = $( '#has-newer-autosave' ).parent( '.notice' );
    314319
    315320                if ( cookie === post_id + '-saved' ) {
     
    324329                }
    325330
    326                 // There is a newer autosave. Don't show two "restore" notices at the same time.
    327                 if ( $( '#has-newer-autosave' ).length ) {
    328                     return;
    329                 }
    330 
    331331                content = $( '#content' ).val() || '';
    332332                post_title = $( '#title' ).val() || '';
     
    339339                }
    340340
    341                 restorePostData = postData;
    342                 undoPostData = {
    343                     content: content,
    344                     post_title: post_title,
    345                     excerpt: excerpt
    346                 };
    347 
    348341                $notice = $( '#local-storage-notice' )
    349342                    .insertAfter( $( '.wrap h1, .wrap h2' ).first() )
    350                     .addClass( 'notice-warning' )
    351                     .show();
    352 
    353                 $notice.on( 'click.autosave-local', function( event ) {
    354                     var $target = $( event.target );
    355 
    356                     if ( $target.hasClass( 'restore-backup' ) ) {
    357                         restorePost( restorePostData );
    358                         $target.parent().hide();
    359                         $(this).find( 'p.undo-restore' ).show();
    360                         $notice.removeClass( 'notice-warning' ).addClass( 'notice-success' );
    361                     } else if ( $target.hasClass( 'undo-restore-backup' ) ) {
    362                         restorePost( undoPostData );
    363                         $target.parent().hide();
    364                         $(this).find( 'p.local-restore' ).show();
    365                         $notice.removeClass( 'notice-success' ).addClass( 'notice-warning' );
    366                     }
    367 
    368                     event.preventDefault();
     343                    .addClass( 'notice-warning' );
     344
     345                if ( $newerAutosaveNotice.length ) {
     346                    // If there is a "server" autosave notice, hide it.
     347                    // The data in the session storage is either the same or newer.
     348                    $newerAutosaveNotice.slideUp( 150, function() {
     349                        $notice.slideDown( 150 );
     350                    });
     351                } else {
     352                    $notice.slideDown( 200 );
     353                }
     354
     355                $notice.find( '.restore-backup' ).on( 'click.autosave-local', function() {
     356                    restorePost( postData );
     357                    $notice.fadeTo( 250, 0, function() {
     358                        $notice.slideUp( 150 );
     359                    });
    369360                });
    370361            }
     
    383374
    384375                    $( '#excerpt' ).val( postData.excerpt || '' );
    385                     editor = typeof tinymce !== 'undefined' && tinymce.get('content');
     376                    editor = getEditor();
    386377
    387378                    if ( editor && ! editor.isHidden() && typeof switchEditors !== 'undefined' ) {
     379                        if ( editor.settings.wpautop && postData.content ) {
     380                            postData.content = switchEditors.wpautop( postData.content );
     381                        }
     382
    388383                        // Make sure there's an undo level in the editor
    389                         editor.undoManager.add();
    390                         editor.setContent( postData.content ? switchEditors.wpautop( postData.content ) : '' );
     384                        editor.undoManager.transact( function() {
     385                            editor.setContent( postData.content || '' );
     386                            editor.nodeChanged();
     387                        });
    391388                    } else {
    392389                        // Make sure the Text editor is selected
    393390                        $( '#content-html' ).click();
    394                         $( '#content' ).val( postData.content );
     391                        $( '#content' ).focus();
     392                        // Using document.execCommand() will let the user undo.
     393                        document.execCommand( 'selectAll' );
     394                        document.execCommand( 'insertText', false, postData.content || '' );
    395395                    }
    396396
Note: See TracChangeset for help on using the changeset viewer.