Ticket #14045: 14045.1.diff

wp-admin/includes/nav-menu.php

@@ -89 +89 @@
                 <li id="menu-item-<?php echo $item_id; ?>" class="<?php echo implode(' ', $classes ); ?>">
                         <dl class="menu-item-bar">
                                 <dt class="menu-item-handle">
-                                        <span class="item-title"><?php echo esc_html( $title ); ?> <span class="is-submenu" <?php echo $submenu_text; ?>><?php _e( 'sub item' ); ?></span></span>
+                                        <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>
                                         <span class="item-controls">
                                                 <span class="item-type"><?php echo esc_html( $item->type_label ); ?></span>
                                                 <span class="item-order hide-if-js">
@@ -173 +173 @@
                                         </label>
                                 </p>
 
+                                <p class="field-move description description-wide">
+                                        <label>
+                                                <?php _e( 'Reorganize' ); ?>
+                                                <a href="#" class="menus-move-up"><?php _e( 'Move up' ); ?></a>
+                                                <a href="#" class="menus-move-down"><?php _e( 'Move down' ); ?></a>
+                                                <a href="#" class="menus-move-left"><?php _e( 'Move left' ); ?></a>
+                                                <a href="#" class="menus-move-right"><?php _e( 'Move right' ); ?></a>
+                                        </label>
+                                </p>
+
                                 <div class="menu-item-actions description-wide submitbox">
                                         <?php if( 'custom' != $item->type && $original_title !== false ) : ?>
                                                 <p class="link-to-original">

wp-admin/js/nav-menu.js

@@ -264 +264 @@
                         });
                 },
 
-                initAccessibility : function() {
+                countMenuItems : function( depth ) {
+                        return $( '.menu-item-depth-' + depth ).length;
+                },
+
+                refreshAdvancedAccessibility : function() {
+
+                        // Hide all links by default
+                        $( '.menu-item-settings .field-move a' ).hide();
+
+                        $( '.item-edit' ).each( function() {
+                                var $this = $(this),
+                                        movement = [],
+                                        availableMovement = '',
+                                        menuItem = $this.parents( 'li.menu-item' ),
+                                        depth = menuItem.menuItemDepth(),
+                                        isPrimaryMenuItem = ( 0 === depth ),
+                                        itemName = $this.parents( '.menu-item-handle' ).find( '.menu-item-title' ).text(),
+                                        position = parseInt( menuItem.index() ),
+                                        totalMenuItems = $('#menu-to-edit li').length,
+                                        hasSameDepthSibling = menuItem.nextAll( '.menu-item-depth-' + depth ).length;
+
+                                // Where can they move this menu item?
+                                if ( 0 !== position )
+                                        menuItem.find( '.menus-move-up' ).show();
+
+                                if ( position + 1 !== totalMenuItems && 0 !== position )
+                                        menuItem.find( '.menus-move-down' ).show();
+
+                                if ( 0 === position && 0 !== hasSameDepthSibling )
+                                        menuItem.find( '.menus-move-down' ).show();
+
+                                if ( ! isPrimaryMenuItem )
+                                        menuItem.find( '.menus-move-left' ).show();
+
+                                if ( 0 !== position ) {
+                                        if ( menuItem.find( '.menu-item-data-parent-id' ).val() !== menuItem.prev().find( '.menu-item-data-db-id' ).val() )
+                                                menuItem.find( '.menus-move-right' ).show();
+                                }
+
+                                if ( isPrimaryMenuItem ) {
+                                        var primaryItems = $( '.menu-item-depth-0' ),
+                                                itemPosition = primaryItems.index( menuItem ) + 1,
+                                                totalMenuItems = primaryItems.length,
+
+                                                // String together help text for primary menu items
+                                                title = itemName + '. ' + api.getGetOrdinal( itemPosition ) + ' of ' + totalMenuItems + ' primary items.';
+                                } else {
+                                        var parentItem = menuItem.prevAll( '.menu-item-depth-' + parseInt( depth - 1 ) ).first(),
+                                                parentItemId = parentItem.find( '.menu-item-data-db-id' ).val(),
+                                                parentItemName = parentItem.find( '.menu-item-title' ).text(),
+                                                subItems = $( '.menu-item .menu-item-data-parent-id[value="' + parentItemId + '"]' ),
+                                                itemPosition = $(subItems.parents('.menu-item').get().reverse()).index( menuItem ) + 1;
+
+                                                // String together help text for sub menu items
+                                                title = itemName + '. ' + api.getGetOrdinal( itemPosition ) + ' sub item under ' + parentItemName + '.';
+                                }
+
+                                $this.prop('title', title).html( title );
+                        });
+                },
+
+                refreshKeyboardAccessibility : function() {
                         $( '.item-edit' ).off( 'focus' ).on( 'focus', function(){
                                 $(this).on( 'keydown', function(e){
 
@@ -277 +338 @@
                                         // Avoid multiple keydown events
                                         $this.off('keydown');
 
-                                        var menuItems = $('#menu-to-edit li');
-                                                menuItemsCount = menuItems.length,
-                                                thisItem = $this.parents( 'li.menu-item' ),
-                                                thisItemChildren = thisItem.childMenuItems(),
-                                                thisItemData = thisItem.getItemData(),
-                                                thisItemDepth = parseInt( thisItem.menuItemDepth() ),
-                                                thisItemPosition = parseInt( thisItem.index() ),
-                                                nextItem = thisItem.next(),
-                                                nextItemChildren = nextItem.childMenuItems(),
-                                                nextItemDepth = parseInt( nextItem.menuItemDepth() ) + 1,
-                                                prevItem = thisItem.prev(),
-                                                prevItemDepth = parseInt( prevItem.menuItemDepth() ),
-                                                prevItemId = prevItem.getItemData()['menu-item-db-id'];
-
                                         // Bail if there is only one menu item
-                                        if ( 1 === menuItemsCount )
+                                        if ( 1 === $('#menu-to-edit li').length )
                                                 return;
 
                                         // If RTL, swap left/right arrows
@@ -302 +349 @@
 
                                         switch ( arrows[e.which] ) {
                                         case 'up':
-                                                var newItemPosition = thisItemPosition - 1;
-
-                                                // Already at top
-                                                if ( 0 === thisItemPosition )
-                                                        break;
-
-                                                // If a sub item is moved to top, shift it to 0 depth
-                                                if ( 0 === newItemPosition && 0 !== thisItemDepth )
-                                                        thisItem.moveHorizontally( 0, thisItemDepth );
-
-                                                // If prev item is sub item, shift to match depth
-                                                if ( 0 !== prevItemDepth )
-                                                        thisItem.moveHorizontally( prevItemDepth, thisItemDepth );
-
-                                                // Does this item have sub items?
-                                                if ( thisItemChildren ) {
-                                                        var items = thisItem.add( thisItemChildren );
-                                                        // Move the entire block
-                                                        items.detach().insertBefore( menuItems.eq( newItemPosition ) );
-                                                } else {
-                                                        thisItem.detach().insertBefore( menuItems.eq( newItemPosition ) );
-                                                }
+                                                api.moveMenuItem( $this, 'up' );
                                                 break;
                                         case 'down':
-                                                // Does this item have sub items?
-                                                if ( thisItemChildren ) {
-                                                        var items = thisItem.add( thisItemChildren ),
-                                                                nextItem = menuItems.eq( items.length + thisItemPosition ),
-                                                                nextItemChildren = 0 !== nextItem.childMenuItems().length;
-
-                                                        if ( nextItemChildren ) {
-                                                                var newDepth = parseInt( nextItem.menuItemDepth() ) + 1;
-                                                                thisItem.moveHorizontally( newDepth, thisItemDepth );
-                                                        }
-
-                                                        // Have we reached the bottom?
-                                                        if ( menuItemsCount === thisItemPosition + items.length )
-                                                                break;
-
-                                                        items.detach().insertAfter( menuItems.eq( thisItemPosition + items.length ) );
-                                                } else {
-                                                        // If next item has sub items, shift depth
-                                                        if ( 0 !== nextItemChildren.length )
-                                                                thisItem.moveHorizontally( nextItemDepth, thisItemDepth );
-
-                                                        // Have we reached the bottom
-                                                        if ( menuItemsCount === thisItemPosition + 1 )
-                                                                break;
-                                                        thisItem.detach().insertAfter( menuItems.eq( thisItemPosition + 1 ) );
-                                                }
+                                                api.moveMenuItem( $this, 'down' );
                                                 break;
                                         case 'left':
-                                                // As far left as possible
-                                                if ( 0 === thisItemDepth )
-                                                        break;
-                                                thisItem.shiftHorizontally( -1 );
+                                                api.moveMenuItem( $this, 'left' );
                                                 break;
                                         case 'right':
-                                                // Can't be sub item at top
-                                                if ( 0 === thisItemPosition )
-                                                        break;
-                                                // Already sub item of prevItem
-                                                if ( thisItemData['menu-item-parent-id'] === prevItemId )
-                                                        break;
-                                                thisItem.shiftHorizontally( 1 );
+                                                api.moveMenuItem( $this, 'right' );
                                                 break;
                                         }
-                                        api.registerChange();
                                         // Put focus back on same menu item
                                         $( '#edit-' + thisItemData['menu-item-db-id'] ).focus();
                                         return false;
@@ -379 +370 @@
                         });
                 },
 
+                getGetOrdinal : function(n) {
+                        var s=["th","st","nd","rd"],
+                                v=n%100;
+                        return n+(s[(v-20)%10]||s[v]||s[0]);
+                },
+
+                moveMenuItem : function( $this, dir ) {
+
+                        var menuItems = $('#menu-to-edit li');
+                                menuItemsCount = menuItems.length,
+                                thisItem = $this.parents( 'li.menu-item' ),
+                                thisItemChildren = thisItem.childMenuItems(),
+                                thisItemData = thisItem.getItemData(),
+                                thisItemDepth = parseInt( thisItem.menuItemDepth() ),
+                                thisItemPosition = parseInt( thisItem.index() ),
+                                nextItem = thisItem.next(),
+                                nextItemChildren = nextItem.childMenuItems(),
+                                nextItemDepth = parseInt( nextItem.menuItemDepth() ) + 1,
+                                prevItem = thisItem.prev(),
+                                prevItemDepth = parseInt( prevItem.menuItemDepth() ),
+                                prevItemId = prevItem.getItemData()['menu-item-db-id'];
+
+                        switch ( dir ) {
+                        case 'up':
+                                var newItemPosition = thisItemPosition - 1;
+
+                                // Already at top
+                                if ( 0 === thisItemPosition )
+                                        break;
+
+                                // If a sub item is moved to top, shift it to 0 depth
+                                if ( 0 === newItemPosition && 0 !== thisItemDepth )
+                                        thisItem.moveHorizontally( 0, thisItemDepth );
+
+                                // If prev item is sub item, shift to match depth
+                                if ( 0 !== prevItemDepth )
+                                        thisItem.moveHorizontally( prevItemDepth, thisItemDepth );
+
+                                // Does this item have sub items?
+                                if ( thisItemChildren ) {
+                                        var items = thisItem.add( thisItemChildren );
+                                        // Move the entire block
+                                        items.detach().insertBefore( menuItems.eq( newItemPosition ) ).updateParentMenuItemDBId();
+                                } else {
+                                        thisItem.detach().insertBefore( menuItems.eq( newItemPosition ) ).updateParentMenuItemDBId();
+                                }
+                                $this.focus();
+                                break;
+                        case 'down':
+                                // Does this item have sub items?
+                                if ( thisItemChildren ) {
+                                        var items = thisItem.add( thisItemChildren ),
+                                                nextItem = menuItems.eq( items.length + thisItemPosition ),
+                                                nextItemChildren = 0 !== nextItem.childMenuItems().length;
+
+                                        if ( nextItemChildren ) {
+                                                var newDepth = parseInt( nextItem.menuItemDepth() ) + 1;
+                                                thisItem.moveHorizontally( newDepth, thisItemDepth );
+                                        }
+
+                                        // Have we reached the bottom?
+                                        if ( menuItemsCount === thisItemPosition + items.length )
+                                                break;
+
+                                        items.detach().insertAfter( menuItems.eq( thisItemPosition + items.length ) ).updateParentMenuItemDBId();
+                                } else {
+                                        // If next item has sub items, shift depth
+                                        if ( 0 !== nextItemChildren.length )
+                                                thisItem.moveHorizontally( nextItemDepth, thisItemDepth );
+
+                                        // Have we reached the bottom
+                                        if ( menuItemsCount === thisItemPosition + 1 )
+                                                break;
+                                        thisItem.detach().insertAfter( menuItems.eq( thisItemPosition + 1 ) ).updateParentMenuItemDBId();
+                                }
+                                $this.focus();
+                                break;
+                        case 'left':
+                                // As far left as possible
+                                if ( 0 === thisItemDepth )
+                                        break;
+                                thisItem.shiftHorizontally( -1 );
+                                $this.focus();
+                                break;
+                        case 'right':
+                                // Can't be sub item at top
+                                if ( 0 === thisItemPosition )
+                                        break;
+                                // Already sub item of prevItem
+                                if ( thisItemData['menu-item-parent-id'] === prevItemId )
+                                        break;
+                                thisItem.shiftHorizontally( 1 );
+                                $this.focus();
+                                break;
+                        }
+                        api.registerChange();
+                        api.refreshKeyboardAccessibility();
+                        api.refreshAdvancedAccessibility();
+                },
+
+                initAccessibility : function() {
+                        api.refreshKeyboardAccessibility();
+                        api.refreshAdvancedAccessibility();
+
+                        // Events
+                        $( '.menus-move-up' ).on( 'click', function ( e ) {
+                                api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'up' );
+                                e.preventDefault();
+                        });
+                        $( '.menus-move-down' ).on( 'click', function ( e ) {
+                                api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'down' );
+                                e.preventDefault();
+                        });
+                        $( '.menus-move-left' ).on( 'click', function ( e ) {
+                                api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'left' );
+                                e.preventDefault();
+                        });
+                        $( '.menus-move-right' ).on( 'click', function ( e ) {
+                                api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'right' );
+                                e.preventDefault();
+                        });
+                },
+
                 messageFadeIn : function() {
                         var messages = $( '#message' );
 
@@ -761 +875 @@
                  */
                 addMenuItemToBottom : function( menuMarkup, req ) {
                         $(menuMarkup).hideAdvancedMenuItemFields().appendTo( api.targetList );
-                        api.initAccessibility();
+                        api.refreshKeyboardAccessibility();
+                        api.refreshAdvancedAccessibility();
                 },
 
                 addMenuItemToTop : function( menuMarkup, req ) {
                         $(menuMarkup).hideAdvancedMenuItemFields().prependTo( api.targetList );
-                        api.initAccessibility();
+                        api.refreshKeyboardAccessibility();
+                        api.refreshAdvancedAccessibility();
                 },
 
                 attachUnsavedChangesListener : function() {

wp-admin/css/wp-admin.css

@@ -7625 +7625 @@
         border-bottom-right-radius: 3px;
 }
 
+.menu-item-settings .field-move a {
+        display: none;
+        margin: 0 2px;
+}
+
 .menu-item-edit-active .menu-item-settings {
         display: block;
 }