Changeset 32092

Timestamp:

04/08/2015 11:13:35 PM (12 years ago)

Author:

azaozz

Message:

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.

Location:

trunk/src/wp-admin

Files:

• css/press-this.css (modified) (4 diffs)
• includes/class-wp-press-this.php (modified) (1 diff)
• js/press-this.js (modified) (6 diffs)

trunk/src/wp-admin/css/press-this.css

@@ -342 +342 @@
 .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;
@@ -1374 +1379 @@
         opacity: 0.7;
         filter: alpha(opacity=70);
-        line-height: 30px;
-        vertical-align: baseline;
+        line-height: 1;
+        vertical-align: middle;
 }
 
@@ -1735 +1740 @@
         float: right;
         margin: 14px 30px 14px 0;
-        font-size: 0;
+        font-size: 13px;
 }
 
@@ -1742 +1747 @@
                 margin: 10px 10px 10px 0;
         }
+}
+
+.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;
 }
 

trunk/src/wp-admin/includes/class-wp-press-this.php

@@ -1431 +1431 @@
                 <div class="post-actions">
                         <span class="spinner">&nbsp;</span>
-                        <button type="button" class="button-subtle draft-button"><?php _e( 'Save Draft' ); ?></button>
+                        <button type="button" class="button-subtle draft-button" aria-live="polite">
+                                <span class="save-draft"><?php _e( 'Save Draft' ); ?></span>
+                                <span class="saving-draft"><?php _e( 'Saving...' ); ?></span>
+                        </button>
+                        <a href="<?php echo esc_url( get_edit_post_link( $post_ID ) ); ?>" class="edit-post-link" style="display: none;" target="_blank"><?php _e( 'Edit Post' ); ?></a>
                         <button type="button" class="button-subtle preview-button"><?php _e( 'Preview' ); ?></button>
                         <button type="button" class="button-primary publish-button"><?php echo ( current_user_can( 'publish_posts' ) ) ? __( 'Publish' ) : __( 'Submit for Review' ); ?></button>

trunk/src/wp-admin/js/press-this.js

@@ -185 +185 @@
                         }).always( function() {
                                 hideSpinner();
+                                clearNotices();
                         }).done( function( response ) {
+                                var $link, $button, keepFocus;
+
                                 if ( ! response.success ) {
                                         renderError( response.data.errorMessage );
@@ -199 +202 @@
                                         }
                                 } 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 );
                         });
                 }
@@ -327 +350 @@
                 function renderError( msg ) {
                         renderNotice( msg, true );
+                }
+
+                function clearNotices() {
+                        $( 'div.alerts' ).empty();
                 }
 
@@ -528 +555 @@
                         $titleField.on( 'focus', function() {
                                 $placeholder.addClass( 'is-hidden' );
+                                resetDraftButton();
                         }).on( 'blur', function() {
                                 if ( ! $titleField.text() && ! $titleField.html() ) {
@@ -624 +652 @@
                  * 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 ) {
@@ -638 +673 @@
 
                         // Publish, Draft and Preview buttons
-
                         $( '.post-actions' ).on( 'click.press-this', function( event ) {
-                                var $target = $( event.target );
-
-                                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();
-
-                                        $( '#wp-preview' ).val( 'dopreview' );
-                                        $( '#pressthis-form' ).attr( 'target', '_blank' ).submit().attr( 'target', '' );
-                                        $( '#wp-preview' ).val( '' );
+                                var $target = $( event.target ),
+                                        $button = $target.closest( 'button' );
+
+                                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( '' );
+                                        }
+                                } else if ( $target.hasClass( 'edit-post-link' ) && window.opener ) {
+                                        window.opener.focus();
+                                        window.self.close();
                                 }
                         });