Ticket #14045: 14045.1.diff

File 14045.1.diff, 13.1 KB (added by lessbloat, 3 months ago)

  • wp-admin/includes/nav-menu.php

     
    8989                <li id="menu-item-<?php echo $item_id; ?>" class="<?php echo implode(' ', $classes ); ?>"> 
    9090                        <dl class="menu-item-bar"> 
    9191                                <dt class="menu-item-handle"> 
    92                                         <span class="item-title"><?php echo esc_html( $title ); ?> <span class="is-submenu" <?php echo $submenu_text; ?>><?php _e( 'sub item' ); ?></span></span> 
     92                                        <span class="item-title"><span class="menu-item-title"><?php echo esc_html( $title ); ?></span> <span class="is-submenu" <?php echo $submenu_text; ?>><?php _e( 'sub item' ); ?></span></span> 
    9393                                        <span class="item-controls"> 
    9494                                                <span class="item-type"><?php echo esc_html( $item->type_label ); ?></span> 
    9595                                                <span class="item-order hide-if-js"> 
    … …  
    173173                                        </label> 
    174174                                </p> 
    175175 
     176                                <p class="field-move description description-wide"> 
     177                                        <label> 
     178                                                <?php _e( 'Reorganize' ); ?> 
     179                                                <a href="#" class="menus-move-up"><?php _e( 'Move up' ); ?></a> 
     180                                                <a href="#" class="menus-move-down"><?php _e( 'Move down' ); ?></a> 
     181                                                <a href="#" class="menus-move-left"><?php _e( 'Move left' ); ?></a> 
     182                                                <a href="#" class="menus-move-right"><?php _e( 'Move right' ); ?></a> 
     183                                        </label> 
     184                                </p> 
     185 
    176186                                <div class="menu-item-actions description-wide submitbox"> 
    177187                                        <?php if( 'custom' != $item->type && $original_title !== false ) : ?> 
    178188                                                <p class="link-to-original"> 

  • wp-admin/js/nav-menu.js

     
    264264                        }); 
    265265                }, 
    266266 
    267                 initAccessibility : function() { 
     267                countMenuItems : function( depth ) { 
     268                        return $( '.menu-item-depth-' + depth ).length; 
     269                }, 
     270 
     271                refreshAdvancedAccessibility : function() { 
     272 
     273                        // Hide all links by default 
     274                        $( '.menu-item-settings .field-move a' ).hide(); 
     275 
     276                        $( '.item-edit' ).each( function() { 
     277                                var $this = $(this), 
     278                                        movement = [], 
     279                                        availableMovement = '', 
     280                                        menuItem = $this.parents( 'li.menu-item' ), 
     281                                        depth = menuItem.menuItemDepth(), 
     282                                        isPrimaryMenuItem = ( 0 === depth ), 
     283                                        itemName = $this.parents( '.menu-item-handle' ).find( '.menu-item-title' ).text(), 
     284                                        position = parseInt( menuItem.index() ), 
     285                                        totalMenuItems = $('#menu-to-edit li').length, 
     286                                        hasSameDepthSibling = menuItem.nextAll( '.menu-item-depth-' + depth ).length; 
     287 
     288                                // Where can they move this menu item? 
     289                                if ( 0 !== position ) 
     290                                        menuItem.find( '.menus-move-up' ).show(); 
     291 
     292                                if ( position + 1 !== totalMenuItems && 0 !== position ) 
     293                                        menuItem.find( '.menus-move-down' ).show(); 
     294 
     295                                if ( 0 === position && 0 !== hasSameDepthSibling ) 
     296                                        menuItem.find( '.menus-move-down' ).show(); 
     297 
     298                                if ( ! isPrimaryMenuItem ) 
     299                                        menuItem.find( '.menus-move-left' ).show(); 
     300 
     301                                if ( 0 !== position ) { 
     302                                        if ( menuItem.find( '.menu-item-data-parent-id' ).val() !== menuItem.prev().find( '.menu-item-data-db-id' ).val() ) 
     303                                                menuItem.find( '.menus-move-right' ).show(); 
     304                                } 
     305 
     306                                if ( isPrimaryMenuItem ) { 
     307                                        var primaryItems = $( '.menu-item-depth-0' ), 
     308                                                itemPosition = primaryItems.index( menuItem ) + 1, 
     309                                                totalMenuItems = primaryItems.length, 
     310 
     311                                                // String together help text for primary menu items 
     312                                                title = itemName + '. ' + api.getGetOrdinal( itemPosition ) + ' of ' + totalMenuItems + ' primary items.'; 
     313                                } else { 
     314                                        var parentItem = menuItem.prevAll( '.menu-item-depth-' + parseInt( depth - 1 ) ).first(), 
     315                                                parentItemId = parentItem.find( '.menu-item-data-db-id' ).val(), 
     316                                                parentItemName = parentItem.find( '.menu-item-title' ).text(), 
     317                                                subItems = $( '.menu-item .menu-item-data-parent-id[value="' + parentItemId + '"]' ), 
     318                                                itemPosition = $(subItems.parents('.menu-item').get().reverse()).index( menuItem ) + 1; 
     319 
     320                                                // String together help text for sub menu items 
     321                                                title = itemName + '. ' + api.getGetOrdinal( itemPosition ) + ' sub item under ' + parentItemName + '.'; 
     322                                } 
     323 
     324                                $this.prop('title', title).html( title ); 
     325                        }); 
     326                }, 
     327 
     328                refreshKeyboardAccessibility : function() { 
    268329                        $( '.item-edit' ).off( 'focus' ).on( 'focus', function(){ 
    269330                                $(this).on( 'keydown', function(e){ 
    270331 
    … …  
    277338                                        // Avoid multiple keydown events 
    278339                                        $this.off('keydown'); 
    279340 
    280                                         var menuItems = $('#menu-to-edit li'); 
    281                                                 menuItemsCount = menuItems.length, 
    282                                                 thisItem = $this.parents( 'li.menu-item' ), 
    283                                                 thisItemChildren = thisItem.childMenuItems(), 
    284                                                 thisItemData = thisItem.getItemData(), 
    285                                                 thisItemDepth = parseInt( thisItem.menuItemDepth() ), 
    286                                                 thisItemPosition = parseInt( thisItem.index() ), 
    287                                                 nextItem = thisItem.next(), 
    288                                                 nextItemChildren = nextItem.childMenuItems(), 
    289                                                 nextItemDepth = parseInt( nextItem.menuItemDepth() ) + 1, 
    290                                                 prevItem = thisItem.prev(), 
    291                                                 prevItemDepth = parseInt( prevItem.menuItemDepth() ), 
    292                                                 prevItemId = prevItem.getItemData()['menu-item-db-id']; 
    293  
    294341                                        // Bail if there is only one menu item 
    295                                         if ( 1 === menuItemsCount ) 
     342                                        if ( 1 === $('#menu-to-edit li').length ) 
    296343                                                return; 
    297344 
    298345                                        // If RTL, swap left/right arrows 
    … …  
    302349 
    303350                                        switch ( arrows[e.which] ) { 
    304351                                        case 'up': 
    305                                                 var newItemPosition = thisItemPosition - 1; 
    306  
    307                                                 // Already at top 
    308                                                 if ( 0 === thisItemPosition ) 
    309                                                         break; 
    310  
    311                                                 // If a sub item is moved to top, shift it to 0 depth 
    312                                                 if ( 0 === newItemPosition && 0 !== thisItemDepth ) 
    313                                                         thisItem.moveHorizontally( 0, thisItemDepth ); 
    314  
    315                                                 // If prev item is sub item, shift to match depth 
    316                                                 if ( 0 !== prevItemDepth ) 
    317                                                         thisItem.moveHorizontally( prevItemDepth, thisItemDepth ); 
    318  
    319                                                 // Does this item have sub items? 
    320                                                 if ( thisItemChildren ) { 
    321                                                         var items = thisItem.add( thisItemChildren ); 
    322                                                         // Move the entire block 
    323                                                         items.detach().insertBefore( menuItems.eq( newItemPosition ) ); 
    324                                                 } else { 
    325                                                         thisItem.detach().insertBefore( menuItems.eq( newItemPosition ) ); 
    326                                                 } 
     352                                                api.moveMenuItem( $this, 'up' ); 
    327353                                                break; 
    328354                                        case 'down': 
    329                                                 // Does this item have sub items? 
    330                                                 if ( thisItemChildren ) { 
    331                                                         var items = thisItem.add( thisItemChildren ), 
    332                                                                 nextItem = menuItems.eq( items.length + thisItemPosition ), 
    333                                                                 nextItemChildren = 0 !== nextItem.childMenuItems().length; 
    334  
    335                                                         if ( nextItemChildren ) { 
    336                                                                 var newDepth = parseInt( nextItem.menuItemDepth() ) + 1; 
    337                                                                 thisItem.moveHorizontally( newDepth, thisItemDepth ); 
    338                                                         } 
    339  
    340                                                         // Have we reached the bottom? 
    341                                                         if ( menuItemsCount === thisItemPosition + items.length ) 
    342                                                                 break; 
    343  
    344                                                         items.detach().insertAfter( menuItems.eq( thisItemPosition + items.length ) ); 
    345                                                 } else { 
    346                                                         // If next item has sub items, shift depth 
    347                                                         if ( 0 !== nextItemChildren.length ) 
    348                                                                 thisItem.moveHorizontally( nextItemDepth, thisItemDepth ); 
    349  
    350                                                         // Have we reached the bottom 
    351                                                         if ( menuItemsCount === thisItemPosition + 1 ) 
    352                                                                 break; 
    353                                                         thisItem.detach().insertAfter( menuItems.eq( thisItemPosition + 1 ) ); 
    354                                                 } 
     355                                                api.moveMenuItem( $this, 'down' ); 
    355356                                                break; 
    356357                                        case 'left': 
    357                                                 // As far left as possible 
    358                                                 if ( 0 === thisItemDepth ) 
    359                                                         break; 
    360                                                 thisItem.shiftHorizontally( -1 ); 
     358                                                api.moveMenuItem( $this, 'left' ); 
    361359                                                break; 
    362360                                        case 'right': 
    363                                                 // Can't be sub item at top 
    364                                                 if ( 0 === thisItemPosition ) 
    365                                                         break; 
    366                                                 // Already sub item of prevItem 
    367                                                 if ( thisItemData['menu-item-parent-id'] === prevItemId ) 
    368                                                         break; 
    369                                                 thisItem.shiftHorizontally( 1 ); 
     361                                                api.moveMenuItem( $this, 'right' ); 
    370362                                                break; 
    371363                                        } 
    372                                         api.registerChange(); 
    373364                                        // Put focus back on same menu item 
    374365                                        $( '#edit-' + thisItemData['menu-item-db-id'] ).focus(); 
    375366                                        return false; 
    … …  
    379370                        }); 
    380371                }, 
    381372 
     373                getGetOrdinal : function(n) { 
     374                        var s=["th","st","nd","rd"], 
     375                                v=n%100; 
     376                        return n+(s[(v-20)%10]||s[v]||s[0]); 
     377                }, 
     378 
     379                moveMenuItem : function( $this, dir ) { 
     380 
     381                        var menuItems = $('#menu-to-edit li'); 
     382                                menuItemsCount = menuItems.length, 
     383                                thisItem = $this.parents( 'li.menu-item' ), 
     384                                thisItemChildren = thisItem.childMenuItems(), 
     385                                thisItemData = thisItem.getItemData(), 
     386                                thisItemDepth = parseInt( thisItem.menuItemDepth() ), 
     387                                thisItemPosition = parseInt( thisItem.index() ), 
     388                                nextItem = thisItem.next(), 
     389                                nextItemChildren = nextItem.childMenuItems(), 
     390                                nextItemDepth = parseInt( nextItem.menuItemDepth() ) + 1, 
     391                                prevItem = thisItem.prev(), 
     392                                prevItemDepth = parseInt( prevItem.menuItemDepth() ), 
     393                                prevItemId = prevItem.getItemData()['menu-item-db-id']; 
     394 
     395                        switch ( dir ) { 
     396                        case 'up': 
     397                                var newItemPosition = thisItemPosition - 1; 
     398 
     399                                // Already at top 
     400                                if ( 0 === thisItemPosition ) 
     401                                        break; 
     402 
     403                                // If a sub item is moved to top, shift it to 0 depth 
     404                                if ( 0 === newItemPosition && 0 !== thisItemDepth ) 
     405                                        thisItem.moveHorizontally( 0, thisItemDepth ); 
     406 
     407                                // If prev item is sub item, shift to match depth 
     408                                if ( 0 !== prevItemDepth ) 
     409                                        thisItem.moveHorizontally( prevItemDepth, thisItemDepth ); 
     410 
     411                                // Does this item have sub items? 
     412                                if ( thisItemChildren ) { 
     413                                        var items = thisItem.add( thisItemChildren ); 
     414                                        // Move the entire block 
     415                                        items.detach().insertBefore( menuItems.eq( newItemPosition ) ).updateParentMenuItemDBId(); 
     416                                } else { 
     417                                        thisItem.detach().insertBefore( menuItems.eq( newItemPosition ) ).updateParentMenuItemDBId(); 
     418                                } 
     419                                $this.focus(); 
     420                                break; 
     421                        case 'down': 
     422                                // Does this item have sub items? 
     423                                if ( thisItemChildren ) { 
     424                                        var items = thisItem.add( thisItemChildren ), 
     425                                                nextItem = menuItems.eq( items.length + thisItemPosition ), 
     426                                                nextItemChildren = 0 !== nextItem.childMenuItems().length; 
     427 
     428                                        if ( nextItemChildren ) { 
     429                                                var newDepth = parseInt( nextItem.menuItemDepth() ) + 1; 
     430                                                thisItem.moveHorizontally( newDepth, thisItemDepth ); 
     431                                        } 
     432 
     433                                        // Have we reached the bottom? 
     434                                        if ( menuItemsCount === thisItemPosition + items.length ) 
     435                                                break; 
     436 
     437                                        items.detach().insertAfter( menuItems.eq( thisItemPosition + items.length ) ).updateParentMenuItemDBId(); 
     438                                } else { 
     439                                        // If next item has sub items, shift depth 
     440                                        if ( 0 !== nextItemChildren.length ) 
     441                                                thisItem.moveHorizontally( nextItemDepth, thisItemDepth ); 
     442 
     443                                        // Have we reached the bottom 
     444                                        if ( menuItemsCount === thisItemPosition + 1 ) 
     445                                                break; 
     446                                        thisItem.detach().insertAfter( menuItems.eq( thisItemPosition + 1 ) ).updateParentMenuItemDBId(); 
     447                                } 
     448                                $this.focus(); 
     449                                break; 
     450                        case 'left': 
     451                                // As far left as possible 
     452                                if ( 0 === thisItemDepth ) 
     453                                        break; 
     454                                thisItem.shiftHorizontally( -1 ); 
     455                                $this.focus(); 
     456                                break; 
     457                        case 'right': 
     458                                // Can't be sub item at top 
     459                                if ( 0 === thisItemPosition ) 
     460                                        break; 
     461                                // Already sub item of prevItem 
     462                                if ( thisItemData['menu-item-parent-id'] === prevItemId ) 
     463                                        break; 
     464                                thisItem.shiftHorizontally( 1 ); 
     465                                $this.focus(); 
     466                                break; 
     467                        } 
     468                        api.registerChange(); 
     469                        api.refreshKeyboardAccessibility(); 
     470                        api.refreshAdvancedAccessibility(); 
     471                }, 
     472 
     473                initAccessibility : function() { 
     474                        api.refreshKeyboardAccessibility(); 
     475                        api.refreshAdvancedAccessibility(); 
     476 
     477                        // Events 
     478                        $( '.menus-move-up' ).on( 'click', function ( e ) { 
     479                                api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'up' ); 
     480                                e.preventDefault(); 
     481                        }); 
     482                        $( '.menus-move-down' ).on( 'click', function ( e ) { 
     483                                api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'down' ); 
     484                                e.preventDefault(); 
     485                        }); 
     486                        $( '.menus-move-left' ).on( 'click', function ( e ) { 
     487                                api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'left' ); 
     488                                e.preventDefault(); 
     489                        }); 
     490                        $( '.menus-move-right' ).on( 'click', function ( e ) { 
     491                                api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'right' ); 
     492                                e.preventDefault(); 
     493                        }); 
     494                }, 
     495 
    382496                messageFadeIn : function() { 
    383497                        var messages = $( '#message' ); 
    384498 
    … …  
    761875                 */ 
    762876                addMenuItemToBottom : function( menuMarkup, req ) { 
    763877                        $(menuMarkup).hideAdvancedMenuItemFields().appendTo( api.targetList ); 
    764                         api.initAccessibility(); 
     878                        api.refreshKeyboardAccessibility(); 
     879                        api.refreshAdvancedAccessibility(); 
    765880                }, 
    766881 
    767882                addMenuItemToTop : function( menuMarkup, req ) { 
    768883                        $(menuMarkup).hideAdvancedMenuItemFields().prependTo( api.targetList ); 
    769                         api.initAccessibility(); 
     884                        api.refreshKeyboardAccessibility(); 
     885                        api.refreshAdvancedAccessibility(); 
    770886                }, 
    771887 
    772888                attachUnsavedChangesListener : function() { 

  • wp-admin/css/wp-admin.css

     
    76257625        border-bottom-right-radius: 3px; 
    76267626} 
    76277627 
     7628.menu-item-settings .field-move a { 
     7629        display: none; 
     7630        margin: 0 2px; 
     7631} 
     7632 
    76287633.menu-item-edit-active .menu-item-settings { 
    76297634        display: block; 
    76307635}