<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[37737] trunk/src: Autosave: improve the notice when the sessionStorage autosave is different than the content.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/37737">37737</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/37737","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>azaozz</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2016-06-17 03:01:32 +0000 (Fri, 17 Jun 2016)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>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 <a href="https://core.trac.wordpress.org/ticket/37025">#37025</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadminincludestemplatephp">trunk/src/wp-admin/includes/template.php</a></li>
<li><a href="#trunksrcwpincludesjsautosavejs">trunk/src/wp-includes/js/autosave.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadminincludestemplatephp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/includes/template.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/includes/template.php 2016-06-17 00:02:05 UTC (rev 37736)
+++ trunk/src/wp-admin/includes/template.php 2016-06-17 03:01:32 UTC (rev 37737)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2003,14 +2003,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> function _local_storage_notice() {
</span><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div id="local-storage-notice" class="hidden notice">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div id="local-storage-notice" class="hidden notice is-dismissible">
</ins><span class="cx" style="display: block; padding: 0 10px"> <p class="local-restore">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <?php _e('The backup of this post in your browser is different from the version below.'); ?>
- <a class="restore-backup" href="#"><?php _e('Restore the backup.'); ?></a>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php _e( 'The backup of this post in your browser is different from the version below.' ); ?>
+ <button type="button" class="button restore-backup"><?php _e('Restore the backup'); ?></button>
</ins><span class="cx" style="display: block; padding: 0 10px"> </p>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <p class="undo-restore hidden">
- <?php _e('Post restored successfully.'); ?>
- <a class="undo-restore-backup" href="#"><?php _e('Undo.'); ?></a>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <p class="help">
+ <?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.' ); ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> </p>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span></span></pre></div>
<a id="trunksrcwpincludesjsautosavejs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/js/autosave.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/js/autosave.js 2016-06-17 00:02:05 UTC (rev 37736)
+++ trunk/src/wp-includes/js/autosave.js 2016-06-17 03:01:32 UTC (rev 37737)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -7,8 +7,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> ( function( $, window ) {
</span><span class="cx" style="display: block; padding: 0 10px"> function autosave() {
</span><span class="cx" style="display: block; padding: 0 10px"> var initialCompareString,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- lastTriggerSave = 0,
- $document = $(document);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ lastTriggerSave = 0,
+ $document = $(document);
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Returns the data saved in both local and remote autosave
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -19,11 +19,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> var post_name, parent_id, data,
</span><span class="cx" style="display: block; padding: 0 10px"> time = ( new Date() ).getTime(),
</span><span class="cx" style="display: block; padding: 0 10px"> cats = [],
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- editor = typeof tinymce !== 'undefined' && tinymce.get('content');
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ editor = getEditor();
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Don't run editor.save() more often than every 3 sec.
</span><span class="cx" style="display: block; padding: 0 10px"> // It is resource intensive and might slow down typing in long posts on slow devices.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( editor && ! editor.isHidden() && time - 3000 > lastTriggerSave ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( editor && editor.isDirty() && ! editor.isHidden() && time - 3000 > lastTriggerSave ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> editor.save();
</span><span class="cx" style="display: block; padding: 0 10px"> lastTriggerSave = time;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -88,9 +88,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $document.trigger( 'autosave-enable-buttons' );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ function getEditor() {
+ return typeof tinymce !== 'undefined' && tinymce.get('content');
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> // Autosave in localStorage
</span><span class="cx" style="display: block; padding: 0 10px"> function autosaveLocal() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var restorePostData, undoPostData, blog_id, post_id, hasStorage, intervalTimer,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var blog_id, post_id, hasStorage, intervalTimer,
</ins><span class="cx" style="display: block; padding: 0 10px"> lastCompareString,
</span><span class="cx" style="display: block; padding: 0 10px"> isSuspended = false;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -266,7 +270,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> intervalTimer = window.setInterval( save, 15000 );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $( 'form#post' ).on( 'submit.autosave-local', function() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var editor = typeof tinymce !== 'undefined' && tinymce.get('content'),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var editor = getEditor(),
</ins><span class="cx" style="display: block; padding: 0 10px"> post_id = $('#post_ID').val() || 0;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( editor && ! editor.isHidden() ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -310,7 +314,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> function checkPost() {
</span><span class="cx" style="display: block; padding: 0 10px"> var content, post_title, excerpt, $notice,
</span><span class="cx" style="display: block; padding: 0 10px"> postData = getSavedPostData(),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- cookie = wpCookies.get( 'wp-saving-post' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ cookie = wpCookies.get( 'wp-saving-post' ),
+ $newerAutosaveNotice = $( '#has-newer-autosave' ).parent( '.notice' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( cookie === post_id + '-saved' ) {
</span><span class="cx" style="display: block; padding: 0 10px"> wpCookies.remove( 'wp-saving-post' );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -323,11 +328,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // There is a newer autosave. Don't show two "restore" notices at the same time.
- if ( $( '#has-newer-autosave' ).length ) {
- return;
- }
-
</del><span class="cx" style="display: block; padding: 0 10px"> content = $( '#content' ).val() || '';
</span><span class="cx" style="display: block; padding: 0 10px"> post_title = $( '#title' ).val() || '';
</span><span class="cx" style="display: block; padding: 0 10px"> excerpt = $( '#excerpt' ).val() || '';
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -338,34 +338,25 @@
</span><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- restorePostData = postData;
- undoPostData = {
- content: content,
- post_title: post_title,
- excerpt: excerpt
- };
-
</del><span class="cx" style="display: block; padding: 0 10px"> $notice = $( '#local-storage-notice' )
</span><span class="cx" style="display: block; padding: 0 10px"> .insertAfter( $( '.wrap h1, .wrap h2' ).first() )
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .addClass( 'notice-warning' )
- .show();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .addClass( 'notice-warning' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $notice.on( 'click.autosave-local', function( event ) {
- var $target = $( event.target );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( $newerAutosaveNotice.length ) {
+ // If there is a "server" autosave notice, hide it.
+ // The data in the session storage is either the same or newer.
+ $newerAutosaveNotice.slideUp( 150, function() {
+ $notice.slideDown( 150 );
+ });
+ } else {
+ $notice.slideDown( 200 );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( $target.hasClass( 'restore-backup' ) ) {
- restorePost( restorePostData );
- $target.parent().hide();
- $(this).find( 'p.undo-restore' ).show();
- $notice.removeClass( 'notice-warning' ).addClass( 'notice-success' );
- } else if ( $target.hasClass( 'undo-restore-backup' ) ) {
- restorePost( undoPostData );
- $target.parent().hide();
- $(this).find( 'p.local-restore' ).show();
- $notice.removeClass( 'notice-success' ).addClass( 'notice-warning' );
- }
-
- event.preventDefault();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $notice.find( '.restore-backup' ).on( 'click.autosave-local', function() {
+ restorePost( postData );
+ $notice.fadeTo( 250, 0, function() {
+ $notice.slideUp( 150 );
+ });
</ins><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -382,16 +373,25 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $( '#excerpt' ).val( postData.excerpt || '' );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- editor = typeof tinymce !== 'undefined' && tinymce.get('content');
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ editor = getEditor();
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( editor && ! editor.isHidden() && typeof switchEditors !== 'undefined' ) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( editor.settings.wpautop && postData.content ) {
+ postData.content = switchEditors.wpautop( postData.content );
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> // Make sure there's an undo level in the editor
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- editor.undoManager.add();
- editor.setContent( postData.content ? switchEditors.wpautop( postData.content ) : '' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ editor.undoManager.transact( function() {
+ editor.setContent( postData.content || '' );
+ editor.nodeChanged();
+ });
</ins><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> // Make sure the Text editor is selected
</span><span class="cx" style="display: block; padding: 0 10px"> $( '#content-html' ).click();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $( '#content' ).val( postData.content );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $( '#content' ).focus();
+ // Using document.execCommand() will let the user undo.
+ document.execCommand( 'selectAll' );
+ document.execCommand( 'insertText', false, postData.content || '' );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> return true;
</span></span></pre>
</div>
</div>
</body>
</html>