WordPress.org

Make WordPress Core

Ticket #31457: 31457.2.patch

File 31457.2.patch, 8.4 KB (added by azaozz, 7 years ago)
  • src/wp-admin/css/press-this.css

     
    12191219}
    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}
    12251226
     
    17981799        width: 320px;
    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;
    18041805}
    18051806
     1807.options-panel-back {
     1808        position: absolute;
     1809        top: 0;
     1810        right: 0;
     1811        bottom: 0;
     1812        width: 320px;
     1813        outline: 0;
     1814}
     1815
    18061816@media (max-width: 900px) {
    18071817        .options-panel {
    18081818                background: #fff;
  • src/wp-admin/includes/class-wp-press-this.php

     
    779779                                        ) );
    780780                                        ?>
    781781                                </div>
    782                                 <button type="button" class="button add-cat-submit"><?php _e( 'Add' ); ?></button>
     782                                <button type="button" class="add-cat-submit"><?php _e( 'Add' ); ?></button>
    783783                        </div>
    784784                <?php } ?>
    785785                <div class="categories-search-wrapper">
     
    822822                                        <label class="screen-reader-text" for="new-tag-post_tag"><?php _e( 'Tags' ); ?></label>
    823823                                        <p>
    824824                                                <input type="text" id="new-tag-post_tag" name="newtag[post_tag]" class="newtag form-input-tip" size="16" autocomplete="off" value="" />
    825                                                 <button type="button" class="button tagadd"><?php _e( 'Add' ); ?></button>
     825                                                <button type="button" class="tagadd"><?php _e( 'Add' ); ?></button>
    826826                                        </p>
    827827                                </div>
    828828                                <p class="howto">
     
    10231023                        </div>
    10241024                </div>
    10251025
    1026                 <div class="options-panel is-off-screen is-hidden">
     1026                <div class="options-panel-back is-hidden" tabindex="-1"></div>
     1027                <div class="options-panel is-off-screen is-hidden" tabindex="-1">
    10271028                        <div class="post-options">
    10281029
    10291030                                <?php if ( $supports_formats ) : ?>
  • src/wp-admin/js/press-this.js

     
    77                var editor,
    88                        saveAlert             = false,
    99                        textarea              = document.createElement( 'textarea' ),
     10                        sidebarIsOpen         = false,
    1011                        siteConfig            = window.wpPressThisConfig || {},
    1112                        data                  = window.wpPressThisData || {},
    1213                        smallestWidth         = 128,
     
    1718                        suggestedContentStr   = getSuggestedContent( data ),
    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;
    2226
     
    638642                 * Interactive navigation behavior for the options modal (post format, tags, categories)
    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' ),
    646648                                $modalClose   = $( '.modal-close' );
     
    649651                                var index = $( this ).index(),
    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();
    664662                                        } );
     
    668666                                var $targetSettingModal = $( this ).parent(),
    669667                                        index = $targetSettingModal.index();
    670668
    671                                 event.preventDefault();
     669                                $postOptions.removeClass( offscreenHidden );
     670                                $targetSettingModal.addClass( isOffScreen );
    672671
    673                                 $postOptions
    674                                         .removeClass( isOffScreen + ' ' + isHidden );
    675 
    676                                 $targetSettingModal
    677                                         .addClass( isOffScreen )
    678                                         .one( transitionEndEvent, function() {
     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 );
    687680                                                $postOption.eq( index - 1 ).focus();
     
    693686                /**
    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;
     689                function openSidebar() {
     690                        sidebarIsOpen = true;
    706691
    707                         $optOpen.on( 'click', function(){
    708                                 $optOpen.addClass( isHidden );
    709                                 $optClose.removeClass( isHidden );
    710                                 $postActions.addClass( isHidden );
    711                                 $scanbar.addClass( isHidden );
     692                        $( '.options-open, .press-this-actions, #scanbar' ).addClass( isHidden );
     693                        $( '.options-close, .options-panel-back' ).removeClass( isHidden );
    712694
    713                                 $sidebar
    714                                         .removeClass( ifOffHidden )
    715                                         .one( 'transitionend', function() {
    716                                                 $postOption.eq( 0 ).focus();
    717                                         } );
    718                         } );
     695                        $( '.options-panel' ).removeClass( offscreenHidden )
     696                                .one( 'transitionend', function() {
     697                                        $( '.post-option:first' ).focus();
     698                                } );
     699                }
     700               
     701                function closeSidebar() {
     702                        sidebarIsOpen = false;
    719703
    720                         $optClose.on( 'click', function(){
    721                                 $optClose.addClass( isHidden );
    722                                 $optOpen.removeClass( isHidden );
    723                                 $postActions.removeClass( isHidden );
    724                                 $scanbar.removeClass( isHidden );
     704                        $( '.options-close, .options-panel-back' ).addClass( isHidden );
     705                        $( '.options-open, .press-this-actions, #scanbar' ).removeClass( isHidden );
    725706
    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                         } );
     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
    737716                /**
     
    787766                        } );
    788767
    789768                        monitorOptionsModal();
    790                         monitorSidebarToggle();
    791769                        monitorPlaceholder();
    792770
     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                        });
     789
    793790                        $( '#post-formats-select input' ).on( 'change', function() {
    794791                                var $this = $( this );
    795792
     
    798795                                }
    799796                        } );
    800797
    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' ) : '' );
    805                         } );
    806 
    807798                        $( window ).on( 'beforeunload.press-this', function() {
    808799                                if ( saveAlert || ( editor && editor.isDirty() ) ) {
    809800                                        return __( 'saveAlert' );