WordPress.org

Make WordPress Core

Ticket #25698: 25698.2.diff

File 25698.2.diff, 9.7 KB (added by atimmer, 7 years ago)
  • src/wp-admin/js/nav-menu.js

     
    382382                        api.refreshKeyboardAccessibility();
    383383                        api.refreshAdvancedAccessibility();
    384384
     385                        // Refresh the accessibility when the user comes close to the item in any way
     386                        $( '#menu-management' ).on( 'mouseenter.refreshAccessibility focus.refreshAccessibility touchstart.refreshAccessibility' , '.menu-item' , function(){
     387                                api.refreshAdvancedAccessibilityOfItem( $( this ).find( '.item-edit' ) );
     388                        });
     389
    385390                        // Events
    386                         $( '.menus-move-up' ).on( 'click', function ( e ) {
     391                        $( '#menu-management' ).on( 'click', '.menus-move-up', function ( e ) {
    387392                                api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'up' );
    388393                                e.preventDefault();
    389394                        });
    390                         $( '.menus-move-down' ).on( 'click', function ( e ) {
     395                        $( '#menu-management' ).on( 'click', '.menus-move-down', function ( e ) {
    391396                                api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'down' );
    392397                                e.preventDefault();
    393398                        });
    394                         $( '.menus-move-top' ).on( 'click', function ( e ) {
     399                        $( '#menu-management' ).on( 'click', '.menus-move-top', function ( e ) {
    395400                                api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'top' );
    396401                                e.preventDefault();
    397402                        });
    398                         $( '.menus-move-left' ).on( 'click', function ( e ) {
     403                        $( '#menu-management' ).on( 'click', '.menus-move-left', function ( e ) {
    399404                                api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'left' );
    400405                                e.preventDefault();
    401406                        });
    402                         $( '.menus-move-right' ).on( 'click', function ( e ) {
     407                        $( '#menu-management' ).on( 'click', '.menus-move-right', function ( e ) {
    403408                                api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'right' );
    404409                                e.preventDefault();
    405410                        });
    406411                },
    407412
    408                 refreshAdvancedAccessibility : function() {
     413                refreshAdvancedAccessibilityOfItem : function( itemToRefresh ) {
    409414
    410                         // Hide all links by default
    411                         $( '.menu-item-settings .field-move a' ).css( 'display', 'none' );
     415                        // Only refresh accessibility when necessary
     416                        if ( true !== $( itemToRefresh ).data( 'needs_accessibility_refresh' ) ) {
     417                                return;
     418                        }
    412419
    413                         $( '.item-edit' ).each( function() {
    414                                 var thisLink, thisLinkText, primaryItems, itemPosition, title,
    415                                         parentItem, parentItemId, parentItemName, subItems,
    416                                         $this = $(this),
    417                                         menuItem = $this.closest( 'li.menu-item' ).first(),
    418                                         depth = menuItem.menuItemDepth(),
    419                                         isPrimaryMenuItem = ( 0 === depth ),
    420                                         itemName = $this.closest( '.menu-item-handle' ).find( '.menu-item-title' ).text(),
    421                                         position = parseInt( menuItem.index(), 10 ),
    422                                         prevItemDepth = ( isPrimaryMenuItem ) ? depth : parseInt( depth - 1, 10 ),
    423                                         prevItemNameLeft = menuItem.prevAll('.menu-item-depth-' + prevItemDepth).first().find( '.menu-item-title' ).text(),
    424                                         prevItemNameRight = menuItem.prevAll('.menu-item-depth-' + depth).first().find( '.menu-item-title' ).text(),
    425                                         totalMenuItems = $('#menu-to-edit li').length,
    426                                         hasSameDepthSibling = menuItem.nextAll( '.menu-item-depth-' + depth ).length;
     420                        var thisLink, thisLinkText, primaryItems, itemPosition, title,
     421                                parentItem, parentItemId, parentItemName, subItems,
     422                                $this = $( itemToRefresh ),
     423                                menuItem = $this.closest( 'li.menu-item' ).first(),
     424                                depth = menuItem.menuItemDepth(),
     425                                isPrimaryMenuItem = ( 0 === depth ),
     426                                itemName = $this.closest( '.menu-item-handle' ).find( '.menu-item-title' ).text(),
     427                                position = parseInt( menuItem.index(), 10 ),
     428                                prevItemDepth = ( isPrimaryMenuItem ) ? depth : parseInt( depth - 1, 10 ),
     429                                prevItemNameLeft = menuItem.prevAll('.menu-item-depth-' + prevItemDepth).first().find( '.menu-item-title' ).text(),
     430                                prevItemNameRight = menuItem.prevAll('.menu-item-depth-' + depth).first().find( '.menu-item-title' ).text(),
     431                                totalMenuItems = $('#menu-to-edit li').length,
     432                                hasSameDepthSibling = menuItem.nextAll( '.menu-item-depth-' + depth ).length;
    427433
    428                                 // Where can they move this menu item?
    429                                 if ( 0 !== position ) {
    430                                         thisLink = menuItem.find( '.menus-move-up' );
    431                                         thisLink.prop( 'title', menus.moveUp ).css( 'display', 'inline' );
    432                                 }
     434                        // Where can they move this menu item?
     435                        if ( 0 !== position ) {
     436                                thisLink = menuItem.find( '.menus-move-up' );
     437                                thisLink.prop( 'title', menus.moveUp ).css( 'display', 'inline' );
     438                        }
    433439
    434                                 if ( 0 !== position && isPrimaryMenuItem ) {
    435                                         thisLink = menuItem.find( '.menus-move-top' );
    436                                         thisLink.prop( 'title', menus.moveToTop ).css( 'display', 'inline' );
    437                                 }
     440                        if ( 0 !== position && isPrimaryMenuItem ) {
     441                                thisLink = menuItem.find( '.menus-move-top' );
     442                                thisLink.prop( 'title', menus.moveToTop ).css( 'display', 'inline' );
     443                        }
    438444
    439                                 if ( position + 1 !== totalMenuItems && 0 !== position ) {
    440                                         thisLink = menuItem.find( '.menus-move-down' );
    441                                         thisLink.prop( 'title', menus.moveDown ).css( 'display', 'inline' );
    442                                 }
     445                        if ( position + 1 !== totalMenuItems && 0 !== position ) {
     446                                thisLink = menuItem.find( '.menus-move-down' );
     447                                thisLink.prop( 'title', menus.moveDown ).css( 'display', 'inline' );
     448                        }
    443449
    444                                 if ( 0 === position && 0 !== hasSameDepthSibling ) {
    445                                         thisLink = menuItem.find( '.menus-move-down' );
    446                                         thisLink.prop( 'title', menus.moveDown ).css( 'display', 'inline' );
    447                                 }
     450                        if ( 0 === position && 0 !== hasSameDepthSibling ) {
     451                                thisLink = menuItem.find( '.menus-move-down' );
     452                                thisLink.prop( 'title', menus.moveDown ).css( 'display', 'inline' );
     453                        }
    448454
    449                                 if ( ! isPrimaryMenuItem ) {
    450                                         thisLink = menuItem.find( '.menus-move-left' ),
    451                                         thisLinkText = menus.outFrom.replace( '%s', prevItemNameLeft );
    452                                         thisLink.prop( 'title', menus.moveOutFrom.replace( '%s', prevItemNameLeft ) ).html( thisLinkText ).css( 'display', 'inline' );
    453                                 }
     455                        if ( ! isPrimaryMenuItem ) {
     456                                thisLink = menuItem.find( '.menus-move-left' ),
     457                                thisLinkText = menus.outFrom.replace( '%s', prevItemNameLeft );
     458                                thisLink.prop( 'title', menus.moveOutFrom.replace( '%s', prevItemNameLeft ) ).html( thisLinkText ).css( 'display', 'inline' );
     459                        }
    454460
    455                                 if ( 0 !== position ) {
    456                                         if ( menuItem.find( '.menu-item-data-parent-id' ).val() !== menuItem.prev().find( '.menu-item-data-db-id' ).val() ) {
    457                                                 thisLink = menuItem.find( '.menus-move-right' ),
    458                                                 thisLinkText = menus.under.replace( '%s', prevItemNameRight );
    459                                                 thisLink.prop( 'title', menus.moveUnder.replace( '%s', prevItemNameRight ) ).html( thisLinkText ).css( 'display', 'inline' );
    460                                         }
     461                        if ( 0 !== position ) {
     462                                if ( menuItem.find( '.menu-item-data-parent-id' ).val() !== menuItem.prev().find( '.menu-item-data-db-id' ).val() ) {
     463                                        thisLink = menuItem.find( '.menus-move-right' ),
     464                                        thisLinkText = menus.under.replace( '%s', prevItemNameRight );
     465                                        thisLink.prop( 'title', menus.moveUnder.replace( '%s', prevItemNameRight ) ).html( thisLinkText ).css( 'display', 'inline' );
    461466                                }
     467                        }
    462468
    463                                 if ( isPrimaryMenuItem ) {
    464                                         primaryItems = $( '.menu-item-depth-0' ),
    465                                         itemPosition = primaryItems.index( menuItem ) + 1,
    466                                         totalMenuItems = primaryItems.length,
     469                        if ( isPrimaryMenuItem ) {
     470                                primaryItems = $( '.menu-item-depth-0' ),
     471                                itemPosition = primaryItems.index( menuItem ) + 1,
     472                                totalMenuItems = primaryItems.length,
    467473
    468                                         // String together help text for primary menu items
    469                                         title = menus.menuFocus.replace( '%1$s', itemName ).replace( '%2$d', itemPosition ).replace( '%3$d', totalMenuItems );
    470                                 } else {
    471                                         parentItem = menuItem.prevAll( '.menu-item-depth-' + parseInt( depth - 1, 10 ) ).first(),
    472                                         parentItemId = parentItem.find( '.menu-item-data-db-id' ).val(),
    473                                         parentItemName = parentItem.find( '.menu-item-title' ).text(),
    474                                         subItems = $( '.menu-item .menu-item-data-parent-id[value="' + parentItemId + '"]' ),
    475                                         itemPosition = $( subItems.parents('.menu-item').get().reverse() ).index( menuItem ) + 1;
     474                                // String together help text for primary menu items
     475                                title = menus.menuFocus.replace( '%1$s', itemName ).replace( '%2$d', itemPosition ).replace( '%3$d', totalMenuItems );
     476                        } else {
     477                                parentItem = menuItem.prevAll( '.menu-item-depth-' + parseInt( depth - 1, 10 ) ).first(),
     478                                parentItemId = parentItem.find( '.menu-item-data-db-id' ).val(),
     479                                parentItemName = parentItem.find( '.menu-item-title' ).text(),
     480                                subItems = $( '.menu-item .menu-item-data-parent-id[value="' + parentItemId + '"]' ),
     481                                itemPosition = $( subItems.parents('.menu-item').get().reverse() ).index( menuItem ) + 1;
    476482
    477                                         // String together help text for sub menu items
    478                                         title = menus.subMenuFocus.replace( '%1$s', itemName ).replace( '%2$d', itemPosition ).replace( '%3$s', parentItemName );
    479                                 }
     483                                // String together help text for sub menu items
     484                                title = menus.subMenuFocus.replace( '%1$s', itemName ).replace( '%2$d', itemPosition ).replace( '%3$s', parentItemName );
     485                        }
    480486
    481                                 $this.prop('title', title).html( title );
    482                         });
     487                        $this.prop( 'title', title ).html( title );
     488
     489                        // Mark this item's accessibility as refreshed
     490                        $this.data( 'needs_accessibility_refresh', false );
     491
    483492                },
    484493
     494                refreshAdvancedAccessibility : function() {
     495
     496                        // Hide all links by default
     497                        $( '.menu-item-settings .field-move a' ).hide();
     498
     499                        // Mark all menu items as unprocessed
     500                        $( '.item-edit' ).data( 'needs_accessibility_refresh', true );
     501
     502                        // All open items have to be refreshed or they will show no links
     503                        $( '.menu-item-edit-active .item-edit' ).each( function() {
     504                                api.refreshAdvancedAccessibilityOfItem( this );
     505                        } );
     506
     507                        return;
     508                },
     509
    485510                refreshKeyboardAccessibility : function() {
    486511                        $( '.item-edit' ).off( 'focus' ).on( 'focus', function(){
    487512                                $(this).off( 'keydown' ).on( 'keydown', function(e){