WordPress.org

Make WordPress Core

Changeset 31651


Ignore:
Timestamp:
03/06/2015 10:56:17 PM (7 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:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/press-this.css

    r31607 r31651  
    12201220
    12211221.options-open.is-hidden,
    1222 .options-close.is-hidden {
     1222.options-close.is-hidden,
     1223.options-panel-back.is-hidden {
    12231224    display: none;
    12241225}
     
    17991800    border-left: 1px solid #e5e5e5;
    18001801    font-size: 14px;
    1801     /* Keeps background the full height of the screen */
     1802    /* Keeps background the full height of the screen, but only visually. Clicks go through. */
    18021803    -webkit-box-shadow: 5001px 5000px 0 5000px #fff, 5000px 5000px 0 5000px #e5e5e5;
    18031804    box-shadow: 5001px 5000px 0 5000px #fff, 5000px 5000px 0 5000px #e5e5e5;
     1805}
     1806
     1807.options-panel-back {
     1808    position: absolute;
     1809    top: 0;
     1810    right: 0;
     1811    bottom: 0;
     1812    width: 320px;
     1813    outline: 0;
    18041814}
    18051815
     
    18321842        -webkit-box-shadow: 5001px 5000px 0 5000px #fff;
    18331843        box-shadow: 5001px 5000px 0 5000px #fff;
     1844    }
     1845
     1846    .options-panel-back {
     1847        width: 100%;
    18341848    }
    18351849}
  • trunk/src/wp-admin/includes/class-wp-press-this.php

    r31637 r31651  
    792792                    ?>
    793793                </div>
    794                 <button type="button" class="button add-cat-submit"><?php _e( 'Add' ); ?></button>
     794                <button type="button" class="add-cat-submit"><?php _e( 'Add' ); ?></button>
    795795            </div>
    796796        <?php } ?>
     
    835835                    <p>
    836836                        <input type="text" id="new-tag-post_tag" name="newtag[post_tag]" class="newtag form-input-tip" size="16" autocomplete="off" value="" />
    837                         <button type="button" class="button tagadd"><?php _e( 'Add' ); ?></button>
     837                        <button type="button" class="tagadd"><?php _e( 'Add' ); ?></button>
    838838                    </p>
    839839                </div>
     
    10361036        </div>
    10371037
    1038         <div class="options-panel is-off-screen is-hidden">
     1038        <div class="options-panel-back is-hidden" tabindex="-1"></div> 
     1039        <div class="options-panel is-off-screen is-hidden" tabindex="-1">
    10391040            <div class="post-options">
    10401041
  • trunk/src/wp-admin/js/press-this.js

    r31636 r31651  
    88            saveAlert             = false,
    99            textarea              = document.createElement( 'textarea' ),
     10            sidebarIsOpen         = false,
    1011            siteConfig            = window.wpPressThisConfig || {},
    1112            data                  = window.wpPressThisData || {},
     
    1819            hasSetFocus           = false,
    1920            catsCache             = [],
     21            isOffScreen           = 'is-off-screen',
     22            isHidden              = 'is-hidden',
     23            offscreenHidden       = isOffScreen + ' ' + isHidden,
    2024            transitionEndEvent    = ( function() {
    2125                var style = document.documentElement.style;
     
    639643         */
    640644        function monitorOptionsModal() {
    641             var isOffScreen   = 'is-off-screen',
    642                 isHidden      = 'is-hidden',
    643                 $postOptions  = $( '.post-options' ),
     645            var $postOptions  = $( '.post-options' ),
    644646                $postOption   = $( '.post-option' ),
    645647                $settingModal = $( '.setting-modal' ),
     
    650652                    $targetSettingModal = $settingModal.eq( index );
    651653
    652                 event.preventDefault();
    653 
    654                 $postOptions
    655                     .addClass( isOffScreen )
     654                $postOptions.addClass( isOffScreen )
    656655                    .one( transitionEndEvent, function() {
    657656                        $( this ).addClass( isHidden );
    658657                    } );
    659658
    660                 $targetSettingModal
    661                     .removeClass( isOffScreen + ' ' + isHidden )
     659                $targetSettingModal.removeClass( offscreenHidden )
    662660                    .one( transitionEndEvent, function() {
    663661                        $( this ).find( '.modal-close' ).focus();
     
    669667                    index = $targetSettingModal.index();
    670668
    671                 event.preventDefault();
    672 
    673                 $postOptions
    674                     .removeClass( isOffScreen + ' ' + isHidden );
    675 
    676                 $targetSettingModal
    677                     .addClass( isOffScreen )
    678                     .one( transitionEndEvent, function() {
     669                $postOptions.removeClass( offscreenHidden );
     670                $targetSettingModal.addClass( isOffScreen );
     671
     672                if ( transitionEndEvent ) {
     673                    $targetSettingModal.one( transitionEndEvent, function() {
    679674                        $( this ).addClass( isHidden );
    680675                        $postOption.eq( index - 1 ).focus();
    681676                    } );
    682 
    683                 // For browser that don't support transitionend.
    684                 if ( ! transitionEndEvent ) {
     677                } else {
    685678                    setTimeout( function() {
    686679                        $targetSettingModal.addClass( isHidden );
     
    694687         * Interactive behavior for the sidebar toggle, to show the options modals
    695688         */
    696         function monitorSidebarToggle() {
    697             var $optOpen  = $( '.options-open' ),
    698                 $optClose = $( '.options-close' ),
    699                 $postOption = $( '.post-option' ),
    700                 $sidebar = $( '.options-panel' ),
    701                 $postActions = $( '.press-this-actions' ),
    702                 $scanbar = $( '#scanbar' ),
    703                 isOffScreen = 'is-off-screen',
    704                 isHidden = 'is-hidden',
    705                 ifOffHidden = isOffScreen + ' ' + isHidden;
    706 
    707             $optOpen.on( 'click', function(){
    708                 $optOpen.addClass( isHidden );
    709                 $optClose.removeClass( isHidden );
    710                 $postActions.addClass( isHidden );
    711                 $scanbar.addClass( isHidden );
    712 
    713                 $sidebar
    714                     .removeClass( ifOffHidden )
    715                     .one( 'transitionend', function() {
    716                         $postOption.eq( 0 ).focus();
    717                     } );
    718             } );
    719 
    720             $optClose.on( 'click', function(){
    721                 $optClose.addClass( isHidden );
    722                 $optOpen.removeClass( isHidden );
    723                 $postActions.removeClass( isHidden );
    724                 $scanbar.removeClass( isHidden );
    725 
    726                 $sidebar
    727                     .addClass( isOffScreen )
    728                     .one( 'transitionend', function() {
    729                         $( this ).addClass( isHidden );
    730                         // Reset to options list
    731                         $( '.post-options' ).removeClass( ifOffHidden );
    732                         $( '.setting-modal').addClass( ifOffHidden );
    733                     } );
    734             } );
     689        function openSidebar() {
     690            sidebarIsOpen = true;
     691
     692            $( '.options-open, .press-this-actions, #scanbar' ).addClass( isHidden );
     693            $( '.options-close, .options-panel-back' ).removeClass( isHidden );
     694
     695            $( '.options-panel' ).removeClass( offscreenHidden )
     696                .one( 'transitionend', function() {
     697                    $( '.post-option:first' ).focus();
     698                } );
     699        }
     700       
     701        function closeSidebar() {
     702            sidebarIsOpen = false;
     703
     704            $( '.options-close, .options-panel-back' ).addClass( isHidden );
     705            $( '.options-open, .press-this-actions, #scanbar' ).removeClass( isHidden );
     706
     707            $( '.options-panel' ).addClass( isOffScreen )
     708                .one( 'transitionend', function() {
     709                    $( this ).addClass( isHidden );
     710                    // Reset to options list
     711                    $( '.post-options' ).removeClass( offscreenHidden );
     712                    $( '.setting-modal').addClass( offscreenHidden );
     713                } );
    735714        }
    736715
     
    788767
    789768            monitorOptionsModal();
    790             monitorSidebarToggle();
    791769            monitorPlaceholder();
     770
     771            $( '.options-open' ).on( 'click.press-this', openSidebar );
     772            $( '.options-close' ).on( 'click.press-this', closeSidebar );
     773
     774            // Close the sidebar when focus moves outside of it.
     775            $( '.options-panel, .options-panel-back' ).on( 'focusout.press-this', function() {
     776                setTimeout( function() {
     777                    var node = document.activeElement,
     778                        $node = $( node );
     779
     780                    if ( sidebarIsOpen && node && ! $node.hasClass( 'options-panel-back' ) &&
     781                        ( node.nodeName === 'BODY' ||
     782                            ( ! $node.closest( '.options-panel' ).length &&
     783                            ! $node.closest( '.options-open' ).length ) ) ) {
     784
     785                        closeSidebar();
     786                    }
     787                }, 50 );
     788            });
    792789
    793790            $( '#post-formats-select input' ).on( 'change', function() {
     
    797794                    $( '#post-option-post-format' ).text( $( 'label[for="' + $this.attr( 'id' ) + '"]' ).text() || '' );
    798795                }
    799             } );
    800 
    801             // Needs more work, doesn't detect when the other JS changes the value of #tax-input-post_tag
    802             $( '#tax-input-post_tag' ).on( 'change', function() {
    803                 var val =  $( this ).val();
    804                 $( '#post-option-tags' ).text( ( val ) ? val.replace( /,([^\s])/g, ', $1' ) : '' );
    805796            } );
    806797
Note: See TracChangeset for help on using the changeset viewer.