WordPress.org

Make WordPress Core

Ticket #14045: 14045.1.diff

File 14045.1.diff, 13.1 KB (added by lessbloat, 7 years 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}