Make WordPress Core

Ticket #25698: 25698.1.diff

File 25698.1.diff, 9.6 KB (added by atimmer, 10 years ago)
  • src/wp-admin/js/nav-menu.js

     
    377377                        api.refreshKeyboardAccessibility();
    378378                        api.refreshAdvancedAccessibility();
    379379
     380                        // Refresh the accessibility when the user comes close to the item in any way
     381                        $( '#menu-management' ).on( 'mouseenter.refreshAccessibility focus.refreshAccessibility touchstart.refreshAccessibility' , '.menu-item' , function(){
     382                                api.refreshAdvancedAccessibilityOfItem( $( this ).find( '.item-edit' ) );
     383                        });
     384
    380385                        // Events
    381                         $( '.menus-move-up' ).on( 'click', function ( e ) {
     386                        $( '#menu-management' ).on( 'click', '.menus-move-up' , function ( e ) {
    382387                                api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'up' );
    383388                                e.preventDefault();
    384389                        });
    385                         $( '.menus-move-down' ).on( 'click', function ( e ) {
     390                        $( '#menu-management' ).on( 'click', '.menus-move-down', function ( e ) {
    386391                                api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'down' );
    387392                                e.preventDefault();
    388393                        });
    389                         $( '.menus-move-top' ).on( 'click', function ( e ) {
     394                        $( '#menu-management' ).on( 'click', '.menus-move-top', function ( e ) {
    390395                                api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'top' );
    391396                                e.preventDefault();
    392397                        });
    393                         $( '.menus-move-left' ).on( 'click', function ( e ) {
     398                        $( '#menu-management' ).on( 'click', '.menus-move-left' , function ( e ) {
    394399                                api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'left' );
    395400                                e.preventDefault();
    396401                        });
    397                         $( '.menus-move-right' ).on( 'click', function ( e ) {
     402                        $( '#menu-management' ).on( 'click', '.menus-move-right', function ( e ) {
    398403                                api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'right' );
    399404                                e.preventDefault();
    400405                        });
    401406                },
    402407
    403                 refreshAdvancedAccessibility : function() {
     408                refreshAdvancedAccessibilityOfItem : function( menuItem ) {
     409                        var $this = $( menuItem );
    404410
    405                         // Hide all links by default
    406                         $( '.menu-item-settings .field-move a' ).css( 'display', 'none' );
     411                        // Only refresh accessibility when necessary
     412                        if( true !== $this.data( 'needs_accessibility_refresh' ) ) return;
    407413
    408                         $( '.item-edit' ).each( function() {
    409                                 var $this = $(this),
    410                                         movement = [],
    411                                         availableMovement = '',
    412                                         menuItem = $this.closest( 'li.menu-item' ).first(),
    413                                         depth = menuItem.menuItemDepth(),
    414                                         isPrimaryMenuItem = ( 0 === depth ),
    415                                         itemName = $this.closest( '.menu-item-handle' ).find( '.menu-item-title' ).text(),
    416                                         position = parseInt( menuItem.index() ),
    417                                         prevItemDepth = ( isPrimaryMenuItem ) ? depth : parseInt( depth - 1 ),
    418                                         prevItemNameLeft = menuItem.prevAll('.menu-item-depth-' + prevItemDepth).first().find( '.menu-item-title' ).text(),
    419                                         prevItemNameRight = menuItem.prevAll('.menu-item-depth-' + depth).first().find( '.menu-item-title' ).text(),
    420                                         totalMenuItems = $('#menu-to-edit li').length,
    421                                         hasSameDepthSibling = menuItem.nextAll( '.menu-item-depth-' + depth ).length;
     414                        var movement = [],
     415                                availableMovement = '',
     416                                menuItem = $this.closest( 'li.menu-item' ).first(),
     417                                depth = menuItem.menuItemDepth(),
     418                                isPrimaryMenuItem = ( 0 === depth ),
     419                                itemName = $this.closest( '.menu-item-handle' ).find( '.menu-item-title' ).text(),
     420                                position = parseInt( menuItem.index() ),
     421                                prevItemDepth = ( isPrimaryMenuItem ) ? depth : parseInt( depth - 1 ),
     422                                prevItemNameLeft = menuItem.prevAll('.menu-item-depth-' + prevItemDepth).first().find( '.menu-item-title' ).text(),
     423                                prevItemNameRight = menuItem.prevAll('.menu-item-depth-' + depth).first().find( '.menu-item-title' ).text(),
     424                                totalMenuItems = $('#menu-to-edit li').length,
     425                                hasSameDepthSibling = menuItem.nextAll( '.menu-item-depth-' + depth ).length;
    422426
    423                                 // Where can they move this menu item?
    424                                 if ( 0 !== position ) {
    425                                         var thisLink = menuItem.find( '.menus-move-up' );
    426                                         thisLink.prop( 'title', menus.moveUp ).css( 'display', 'inline' );
    427                                 }
     427                        // Where can they move this menu item?
     428                        if ( 0 !== position ) {
     429                                var thisLink = menuItem.find( '.menus-move-up' );
     430                                thisLink.prop( 'title', menus.moveUp ).css( 'display', 'inline' );
     431                        }
    428432
    429                                 if ( 0 !== position && isPrimaryMenuItem ) {
    430                                         var thisLink = menuItem.find( '.menus-move-top' );
    431                                         thisLink.prop( 'title', menus.moveToTop ).css( 'display', 'inline' );
    432                                 }
     433                        if ( 0 !== position && isPrimaryMenuItem ) {
     434                                var thisLink = menuItem.find( '.menus-move-top' );
     435                                thisLink.prop( 'title', menus.moveToTop ).css( 'display', 'inline' );
     436                        }
    433437
    434                                 if ( position + 1 !== totalMenuItems && 0 !== position ) {
    435                                         var thisLink = menuItem.find( '.menus-move-down' );
    436                                         thisLink.prop( 'title', menus.moveDown ).css( 'display', 'inline' );
    437                                 }
     438                        if ( position + 1 !== totalMenuItems && 0 !== position ) {
     439                                var thisLink = menuItem.find( '.menus-move-down' );
     440                                thisLink.prop( 'title', menus.moveDown ).css( 'display', 'inline' );
     441                        }
    438442
    439                                 if ( 0 === position && 0 !== hasSameDepthSibling ) {
    440                                         var thisLink = menuItem.find( '.menus-move-down' );
    441                                         thisLink.prop( 'title', menus.moveDown ).css( 'display', 'inline' );
    442                                 }
     443                        if ( 0 === position && 0 !== hasSameDepthSibling ) {
     444                                var thisLink = menuItem.find( '.menus-move-down' );
     445                                thisLink.prop( 'title', menus.moveDown ).css( 'display', 'inline' );
     446                        }
    443447
    444                                 if ( ! isPrimaryMenuItem ) {
    445                                         var thisLink = menuItem.find( '.menus-move-left' ),
    446                                                 thisLinkText = menus.outFrom.replace( '%s', prevItemNameLeft );
    447                                         thisLink.prop( 'title', menus.moveOutFrom.replace( '%s', prevItemNameLeft ) ).html( thisLinkText ).css( 'display', 'inline' );
    448                                 }
     448                        if ( ! isPrimaryMenuItem ) {
     449                                var thisLink = menuItem.find( '.menus-move-left' ),
     450                                        thisLinkText = menus.outFrom.replace( '%s', prevItemNameLeft );
     451                                thisLink.prop( 'title', menus.moveOutFrom.replace( '%s', prevItemNameLeft ) ).html( thisLinkText ).css( 'display', 'inline' );
     452                        }
    449453
    450                                 if ( 0 !== position ) {
    451                                         if ( menuItem.find( '.menu-item-data-parent-id' ).val() !== menuItem.prev().find( '.menu-item-data-db-id' ).val() ) {
    452                                                 var thisLink = menuItem.find( '.menus-move-right' ),
    453                                                         thisLinkText = menus.under.replace( '%s', prevItemNameRight );
    454                                                 thisLink.prop( 'title', menus.moveUnder.replace( '%s', prevItemNameRight ) ).html( thisLinkText ).css( 'display', 'inline' );
    455                                         }
     454                        if ( 0 !== position ) {
     455                                if ( menuItem.find( '.menu-item-data-parent-id' ).val() !== menuItem.prev().find( '.menu-item-data-db-id' ).val() ) {
     456                                        var thisLink = menuItem.find( '.menus-move-right' ),
     457                                                thisLinkText = menus.under.replace( '%s', prevItemNameRight );
     458                                        thisLink.prop( 'title', menus.moveUnder.replace( '%s', prevItemNameRight ) ).html( thisLinkText ).css( 'display', 'inline' );
    456459                                }
     460                        }
    457461
    458                                 if ( isPrimaryMenuItem ) {
    459                                         var primaryItems = $( '.menu-item-depth-0' ),
    460                                                 itemPosition = primaryItems.index( menuItem ) + 1,
    461                                                 totalMenuItems = primaryItems.length,
     462                        if ( isPrimaryMenuItem ) {
     463                                var primaryItems = $( '.menu-item-depth-0' ),
     464                                        itemPosition = primaryItems.index( menuItem ) + 1,
     465                                        totalMenuItems = primaryItems.length,
    462466
    463                                                 // String together help text for primary menu items
    464                                                 title = menus.menuFocus.replace( '%1$s', itemName ).replace( '%2$d', itemPosition ).replace( '%3$d', totalMenuItems );
    465                                 } else {
    466                                         var parentItem = menuItem.prevAll( '.menu-item-depth-' + parseInt( depth - 1 ) ).first(),
    467                                                 parentItemId = parentItem.find( '.menu-item-data-db-id' ).val(),
    468                                                 parentItemName = parentItem.find( '.menu-item-title' ).text(),
    469                                                 subItems = $( '.menu-item .menu-item-data-parent-id[value="' + parentItemId + '"]' ),
    470                                                 itemPosition = $( subItems.parents('.menu-item').get().reverse() ).index( menuItem ) + 1;
     467                                        // String together help text for primary menu items
     468                                        title = menus.menuFocus.replace( '%1$s', itemName ).replace( '%2$d', itemPosition ).replace( '%3$d', totalMenuItems );
     469                        } else {
     470                                var parentItem = menuItem.prevAll( '.menu-item-depth-' + parseInt( depth - 1 ) ).first(),
     471                                        parentItemId = parentItem.find( '.menu-item-data-db-id' ).val(),
     472                                        parentItemName = parentItem.find( '.menu-item-title' ).text(),
     473                                        subItems = $( '.menu-item .menu-item-data-parent-id[value="' + parentItemId + '"]' ),
     474                                        itemPosition = $( subItems.parents('.menu-item').get().reverse() ).index( menuItem ) + 1;
    471475
    472                                                 // String together help text for sub menu items
    473                                                 title = menus.subMenuFocus.replace( '%1$s', itemName ).replace( '%2$d', itemPosition ).replace( '%3$s', parentItemName );
    474                                 }
     476                                        // String together help text for sub menu items
     477                                        title = menus.subMenuFocus.replace( '%1$s', itemName ).replace( '%2$d', itemPosition ).replace( '%3$s', parentItemName );
     478                        }
    475479
    476                                 $this.prop('title', title).html( title );
    477                         });
     480                        $this.prop('title', title).html( title );
     481
     482                        // Mark this item's accessibility as refreshed
     483                        $this.data( 'needs_accessibility_refresh', false );
     484
    478485                },
    479486
     487                refreshAdvancedAccessibility : function() {
     488
     489                        // Hide all links by default
     490                        $( '.menu-item-settings .field-move a' ).hide();
     491
     492                        // Mark all menu items as unprocessed
     493                        $( '.item-edit' ).data( 'needs_accessibility_refresh', true );
     494
     495                        // All open items have to be refreshed or they will show no links
     496                        $( '.menu-item-edit-active .item-edit' ).each( function() {
     497                                api.refreshAdvancedAccessibilityOfItem( this );
     498                        } );
     499
     500                        return;
     501                },
     502
    480503                refreshKeyboardAccessibility : function() {
    481504                        $( '.item-edit' ).off( 'focus' ).on( 'focus', function(){
    482505                                $(this).off( 'keydown' ).on( 'keydown', function(e){