From bd8cb111ed71671f610cadf40c4ca126b6e235e5 Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Wed, 8 Apr 2015 23:13:35 +0000 Subject: [PATCH] Press This: - When saving a draft change the text of the Save Draft button to Saving... - On success, hide the button and show Edit Post link in its place. If the user focuses the title or the editor, hide the link and show the button again. Fixes #31923. git-svn-id: https://develop.svn.wordpress.org/trunk@32092 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/press-this.css | 32 ++++++-- src/wp-admin/includes/class-wp-press-this.php | 6 +- src/wp-admin/js/press-this.js | 73 +++++++++++++++---- 3 files changed, 89 insertions(+), 22 deletions(-) diff --git a/src/wp-admin/css/press-this.css b/src/wp-admin/css/press-this.css index 46992bdf0b..108601112f 100644 --- a/src/wp-admin/css/press-this.css +++ b/src/wp-admin/css/press-this.css @@ -341,12 +341,17 @@ strong { .button-subtle:focus, .button-subtle:hover, -.button-subtle:active { +.button-subtle:active, +.edit-post-link:focus, +.edit-post-link:hover, +.edit-post-link:active { color: #00a0d2; } .button-subtle:focus, -.button-subtle:active { +.button-subtle:active, +.edit-post-link:focus, +.edit-post-link:active { outline: 0; text-decoration: underline; } @@ -1373,8 +1378,8 @@ html { background-size: 20px 20px; opacity: 0.7; filter: alpha(opacity=70); - line-height: 30px; - vertical-align: baseline; + line-height: 1; + vertical-align: middle; } @media print, @@ -1734,7 +1739,7 @@ html { .post-actions { float: right; margin: 14px 30px 14px 0; - font-size: 0; + font-size: 13px; } @media (max-width: 320px) { @@ -1743,6 +1748,23 @@ html { } } +.edit-post-link { + font-size: 13px; + display: inline-block; + text-decoration: none; + padding: 0 10px; +} + +.draft-button.is-hidden, +.draft-button .saving-draft, +.draft-button.is-saving .save-draft { + display: none; +} + +.draft-button.is-saving .saving-draft { + display: inline; +} + /* TinyMCE styles */ .editor .wp-media-buttons { float: none; diff --git a/src/wp-admin/includes/class-wp-press-this.php b/src/wp-admin/includes/class-wp-press-this.php index 6a580b5d29..cb1ba1e994 100644 --- a/src/wp-admin/includes/class-wp-press-this.php +++ b/src/wp-admin/includes/class-wp-press-this.php @@ -1430,7 +1430,11 @@ class WP_Press_This {
- + +
diff --git a/src/wp-admin/js/press-this.js b/src/wp-admin/js/press-this.js index 4edc2028ff..2c61b605d1 100644 --- a/src/wp-admin/js/press-this.js +++ b/src/wp-admin/js/press-this.js @@ -184,7 +184,10 @@ data: data }).always( function() { hideSpinner(); + clearNotices(); }).done( function( response ) { + var $link, $button, keepFocus; + if ( ! response.success ) { renderError( response.data.errorMessage ); } else if ( response.data.redirect ) { @@ -198,13 +201,33 @@ window.location.href = response.data.redirect; } } else if ( response.data.postSaved ) { - // show "success" message? + $link = $( '.edit-post-link' ); + $button = $( '.draft-button' ); + + if ( document.activeElement && document.activeElement.className.indexOf( 'draft-button' ) > -1 ) { + keepFocus = true; + } + + $button.fadeOut( 200, function() { + $button.removeClass( 'is-saving' ); + $link.fadeIn( 200 ); + + if ( keepFocus ) { + $link.focus(); + } + }); } }).fail( function() { renderError( __( 'serverError' ) ); }); } + function resetDraftButton() { + $( '.edit-post-link' ).fadeOut( 200, function() { + $( '.draft-button' ).removeClass( 'is-saving' ).fadeIn( 200 ); + }); + } + /** * Inserts the media a user has selected from the presented list inside the editor, as an image or embed, based on type * @@ -328,6 +351,10 @@ renderNotice( msg, true ); } + function clearNotices() { + $( 'div.alerts' ).empty(); + } + /** * Render notices on page load, if any already */ @@ -527,6 +554,7 @@ $titleField.on( 'focus', function() { $placeholder.addClass( 'is-hidden' ); + resetDraftButton(); }).on( 'blur', function() { if ( ! $titleField.text() && ! $titleField.html() ) { $placeholder.removeClass( 'is-hidden' ); @@ -623,13 +651,20 @@ /** * Set app events and other state monitoring related code. */ - function monitor(){ + function monitor() { $( document ).on( 'tinymce-editor-init', function( event, ed ) { editor = ed; - ed.on( 'focus', function() { + function focus() { hasSetFocus = true; - } ); + resetDraftButton(); + } + + if ( window.tinymce.Env.iOS ) { + editor.on( 'click', focus ); + } else { + editor.on( 'focus', focus ); + } }).on( 'click.press-this keypress.press-this', '.suggested-media-thumbnail', function( event ) { if ( event.type === 'click' || event.keyCode === 13 ) { insertSelectedMedia( $( this ) ); @@ -637,21 +672,27 @@ }); // Publish, Draft and Preview buttons - $( '.post-actions' ).on( 'click.press-this', function( event ) { - var $target = $( event.target ); + var $target = $( event.target ), + $button = $target.closest( 'button' ); - if ( $target.hasClass( 'draft-button' ) ) { - submitPost( 'draft' ); - } else if ( $target.hasClass( 'publish-button' ) ) { - submitPost( 'publish' ); - } else if ( $target.hasClass( 'preview-button' ) ) { - prepareFormData(); - window.opener && window.opener.focus(); + if ( $button.length ) { + if ( $button.hasClass( 'draft-button' ) ) { + $button.addClass( 'is-saving' ); + submitPost( 'draft' ); + } else if ( $button.hasClass( 'publish-button' ) ) { + submitPost( 'publish' ); + } else if ( $button.hasClass( 'preview-button' ) ) { + prepareFormData(); + window.opener && window.opener.focus(); - $( '#wp-preview' ).val( 'dopreview' ); - $( '#pressthis-form' ).attr( 'target', '_blank' ).submit().attr( 'target', '' ); - $( '#wp-preview' ).val( '' ); + $( '#wp-preview' ).val( 'dopreview' ); + $( '#pressthis-form' ).attr( 'target', '_blank' ).submit().attr( 'target', '' ); + $( '#wp-preview' ).val( '' ); + } + } else if ( $target.hasClass( 'edit-post-link' ) && window.opener ) { + window.opener.focus(); + window.self.close(); } });