Changeset 32092

Timestamp:

04/08/2015 11:13:35 PM (10 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();
                 }
             });