Changeset 31651

Timestamp:

03/06/2015 10:56:17 PM (10 years ago)

Author:

azaozz

Message:

PressThis:

• Close the sidebar on moving the focus outside of it (by clicking or by "tabbing").
• Fix a (weird) structural CSS problem where clicks go through the sidebar when it is open.
• Clean up the JS a bit.

Fixes #31457.

Location:

trunk/src/wp-admin

Files:

• css/press-this.css (modified) (3 diffs)
• includes/class-wp-press-this.php (modified) (3 diffs)
• js/press-this.js (modified) (8 diffs)

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

@@ -1220 +1220 @@
 
 .options-open.is-hidden,
-.options-close.is-hidden {
+.options-close.is-hidden,
+.options-panel-back.is-hidden {
     display: none;
 }
@@ -1799 +1800 @@
     border-left: 1px solid #e5e5e5;
     font-size: 14px;
-    /* Keeps background the full height of the screen */
+    /* Keeps background the full height of the screen, but only visually. Clicks go through. */
     -webkit-box-shadow: 5001px 5000px 0 5000px #fff, 5000px 5000px 0 5000px #e5e5e5;
     box-shadow: 5001px 5000px 0 5000px #fff, 5000px 5000px 0 5000px #e5e5e5;
+}
+
+.options-panel-back {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 320px;
+    outline: 0;
 }
 
@@ -1832 +1842 @@
         -webkit-box-shadow: 5001px 5000px 0 5000px #fff;
         box-shadow: 5001px 5000px 0 5000px #fff;
+    }
+
+    .options-panel-back {
+        width: 100%;
     }
 }

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

@@ -792 +792 @@
                     ?>
                 </div>
-                <button type="button" class="button add-cat-submit"><?php _e( 'Add' ); ?></button>
+                <button type="button" class="add-cat-submit"><?php _e( 'Add' ); ?></button>
             </div>
         <?php } ?>
@@ -835 +835 @@
                     <p>
                         <input type="text" id="new-tag-post_tag" name="newtag[post_tag]" class="newtag form-input-tip" size="16" autocomplete="off" value="" />
-                        <button type="button" class="button tagadd"><?php _e( 'Add' ); ?></button>
+                        <button type="button" class="tagadd"><?php _e( 'Add' ); ?></button>
                     </p>
                 </div>
@@ -1036 +1036 @@
         </div>
 
-        <div class="options-panel is-off-screen is-hidden">
+        <div class="options-panel-back is-hidden" tabindex="-1"></div>  
+        <div class="options-panel is-off-screen is-hidden" tabindex="-1">
             <div class="post-options">
 

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

@@ -8 +8 @@
             saveAlert             = false,
             textarea              = document.createElement( 'textarea' ),
+            sidebarIsOpen         = false,
             siteConfig            = window.wpPressThisConfig || {},
             data                  = window.wpPressThisData || {},
@@ -18 +19 @@
             hasSetFocus           = false,
             catsCache             = [],
+            isOffScreen           = 'is-off-screen',
+            isHidden              = 'is-hidden',
+            offscreenHidden       = isOffScreen + ' ' + isHidden,
             transitionEndEvent    = ( function() {
                 var style = document.documentElement.style;
@@ -639 +643 @@
          */
         function monitorOptionsModal() {
-            var isOffScreen   = 'is-off-screen',
-                isHidden      = 'is-hidden',
-                $postOptions  = $( '.post-options' ),
+            var $postOptions  = $( '.post-options' ),
                 $postOption   = $( '.post-option' ),
                 $settingModal = $( '.setting-modal' ),
@@ -650 +652 @@
                     $targetSettingModal = $settingModal.eq( index );
 
-                event.preventDefault();
-
-                $postOptions
-                    .addClass( isOffScreen )
+                $postOptions.addClass( isOffScreen )
                     .one( transitionEndEvent, function() {
                         $( this ).addClass( isHidden );
                     } );
 
-                $targetSettingModal
-                    .removeClass( isOffScreen + ' ' + isHidden )
+                $targetSettingModal.removeClass( offscreenHidden )
                     .one( transitionEndEvent, function() {
                         $( this ).find( '.modal-close' ).focus();
@@ -669 +667 @@
                     index = $targetSettingModal.index();
 
-                event.preventDefault();
-
-                $postOptions
-                    .removeClass( isOffScreen + ' ' + isHidden );
-
-                $targetSettingModal
-                    .addClass( isOffScreen )
-                    .one( transitionEndEvent, function() {
+                $postOptions.removeClass( offscreenHidden );
+                $targetSettingModal.addClass( isOffScreen );
+
+                if ( transitionEndEvent ) {
+                    $targetSettingModal.one( transitionEndEvent, function() {
                         $( this ).addClass( isHidden );
                         $postOption.eq( index - 1 ).focus();
                     } );
-
-                // For browser that don't support transitionend.
-                if ( ! transitionEndEvent ) {
+                } else {
                     setTimeout( function() {
                         $targetSettingModal.addClass( isHidden );
@@ -694 +687 @@
          * Interactive behavior for the sidebar toggle, to show the options modals
          */
-        function monitorSidebarToggle() {
-            var $optOpen  = $( '.options-open' ),
-                $optClose = $( '.options-close' ),
-                $postOption = $( '.post-option' ),
-                $sidebar = $( '.options-panel' ),
-                $postActions = $( '.press-this-actions' ),
-                $scanbar = $( '#scanbar' ),
-                isOffScreen = 'is-off-screen',
-                isHidden = 'is-hidden',
-                ifOffHidden = isOffScreen + ' ' + isHidden;
-
-            $optOpen.on( 'click', function(){
-                $optOpen.addClass( isHidden );
-                $optClose.removeClass( isHidden );
-                $postActions.addClass( isHidden );
-                $scanbar.addClass( isHidden );
-
-                $sidebar
-                    .removeClass( ifOffHidden )
-                    .one( 'transitionend', function() {
-                        $postOption.eq( 0 ).focus();
-                    } );
-            } );
-
-            $optClose.on( 'click', function(){
-                $optClose.addClass( isHidden );
-                $optOpen.removeClass( isHidden );
-                $postActions.removeClass( isHidden );
-                $scanbar.removeClass( isHidden );
-
-                $sidebar
-                    .addClass( isOffScreen )
-                    .one( 'transitionend', function() {
-                        $( this ).addClass( isHidden );
-                        // Reset to options list
-                        $( '.post-options' ).removeClass( ifOffHidden );
-                        $( '.setting-modal').addClass( ifOffHidden );
-                    } );
-            } );
+        function openSidebar() {
+            sidebarIsOpen = true;
+
+            $( '.options-open, .press-this-actions, #scanbar' ).addClass( isHidden );
+            $( '.options-close, .options-panel-back' ).removeClass( isHidden );
+
+            $( '.options-panel' ).removeClass( offscreenHidden )
+                .one( 'transitionend', function() {
+                    $( '.post-option:first' ).focus();
+                } );
+        }
+        
+        function closeSidebar() {
+            sidebarIsOpen = false;
+
+            $( '.options-close, .options-panel-back' ).addClass( isHidden );
+            $( '.options-open, .press-this-actions, #scanbar' ).removeClass( isHidden );
+
+            $( '.options-panel' ).addClass( isOffScreen )
+                .one( 'transitionend', function() {
+                    $( this ).addClass( isHidden );
+                    // Reset to options list
+                    $( '.post-options' ).removeClass( offscreenHidden );
+                    $( '.setting-modal').addClass( offscreenHidden );
+                } );
         }
 
@@ -788 +767 @@
 
             monitorOptionsModal();
-            monitorSidebarToggle();
             monitorPlaceholder();
+
+            $( '.options-open' ).on( 'click.press-this', openSidebar );
+            $( '.options-close' ).on( 'click.press-this', closeSidebar );
+
+            // Close the sidebar when focus moves outside of it.
+            $( '.options-panel, .options-panel-back' ).on( 'focusout.press-this', function() {
+                setTimeout( function() {
+                    var node = document.activeElement,
+                        $node = $( node );
+
+                    if ( sidebarIsOpen && node && ! $node.hasClass( 'options-panel-back' ) &&
+                        ( node.nodeName === 'BODY' ||
+                            ( ! $node.closest( '.options-panel' ).length &&
+                            ! $node.closest( '.options-open' ).length ) ) ) {
+
+                        closeSidebar();
+                    }
+                }, 50 );
+            });
 
             $( '#post-formats-select input' ).on( 'change', function() {
@@ -797 +794 @@
                     $( '#post-option-post-format' ).text( $( 'label[for="' + $this.attr( 'id' ) + '"]' ).text() || '' );
                 }
-            } );
-
-            // Needs more work, doesn't detect when the other JS changes the value of #tax-input-post_tag
-            $( '#tax-input-post_tag' ).on( 'change', function() {
-                var val =  $( this ).val();
-                $( '#post-option-tags' ).text( ( val ) ? val.replace( /,([^\s])/g, ', $1' ) : '' );
             } );