Ticket #14045: 14045.2.diff

File 14045.2.diff, 13.7 KB (added by lessbloat, 2 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 if ( is_rtl() ) { _e( 'Move Right' ); } else { _e( 'Move Left' ); } ?></a> 
     182                                                <a href="#" class="menus-move-right"><?php if ( is_rtl() ) { _e( 'Move Left' ); } else { _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

     
    262262                        }); 
    263263                }, 
    264264 
     265                countMenuItems : function( depth ) { 
     266                        return $( '.menu-item-depth-' + depth ).length; 
     267                }, 
     268 
     269                moveMenuItem : function( $this, dir ) { 
     270 
     271                        var menuItems = $('#menu-to-edit li'); 
     272                                menuItemsCount = menuItems.length, 
     273                                thisItem = $this.parents( 'li.menu-item' ), 
     274                                thisItemChildren = thisItem.childMenuItems(), 
     275                                thisItemData = thisItem.getItemData(), 
     276                                thisItemDepth = parseInt( thisItem.menuItemDepth() ), 
     277                                thisItemPosition = parseInt( thisItem.index() ), 
     278                                nextItem = thisItem.next(), 
     279                                nextItemChildren = nextItem.childMenuItems(), 
     280                                nextItemDepth = parseInt( nextItem.menuItemDepth() ) + 1, 
     281                                prevItem = thisItem.prev(), 
     282                                prevItemDepth = parseInt( prevItem.menuItemDepth() ), 
     283                                prevItemId = prevItem.getItemData()['menu-item-db-id']; 
     284 
     285                        switch ( dir ) { 
     286                        case 'up': 
     287                                var newItemPosition = thisItemPosition - 1; 
     288 
     289                                // Already at top 
     290                                if ( 0 === thisItemPosition ) 
     291                                        break; 
     292 
     293                                // If a sub item is moved to top, shift it to 0 depth 
     294                                if ( 0 === newItemPosition && 0 !== thisItemDepth ) 
     295                                        thisItem.moveHorizontally( 0, thisItemDepth ); 
     296 
     297                                // If prev item is sub item, shift to match depth 
     298                                if ( 0 !== prevItemDepth ) 
     299                                        thisItem.moveHorizontally( prevItemDepth, thisItemDepth ); 
     300 
     301                                // Does this item have sub items? 
     302                                if ( thisItemChildren ) { 
     303                                        var items = thisItem.add( thisItemChildren ); 
     304                                        // Move the entire block 
     305                                        items.detach().insertBefore( menuItems.eq( newItemPosition ) ).updateParentMenuItemDBId(); 
     306                                } else { 
     307                                        thisItem.detach().insertBefore( menuItems.eq( newItemPosition ) ).updateParentMenuItemDBId(); 
     308                                } 
     309                                $this.focus(); 
     310                                break; 
     311                        case 'down': 
     312                                // Does this item have sub items? 
     313                                if ( thisItemChildren ) { 
     314                                        var items = thisItem.add( thisItemChildren ), 
     315                                                nextItem = menuItems.eq( items.length + thisItemPosition ), 
     316                                                nextItemChildren = 0 !== nextItem.childMenuItems().length; 
     317 
     318                                        if ( nextItemChildren ) { 
     319                                                var newDepth = parseInt( nextItem.menuItemDepth() ) + 1; 
     320                                                thisItem.moveHorizontally( newDepth, thisItemDepth ); 
     321                                        } 
     322 
     323                                        // Have we reached the bottom? 
     324                                        if ( menuItemsCount === thisItemPosition + items.length ) 
     325                                                break; 
     326 
     327                                        items.detach().insertAfter( menuItems.eq( thisItemPosition + items.length ) ).updateParentMenuItemDBId(); 
     328                                } else { 
     329                                        // If next item has sub items, shift depth 
     330                                        if ( 0 !== nextItemChildren.length ) 
     331                                                thisItem.moveHorizontally( nextItemDepth, thisItemDepth ); 
     332 
     333                                        // Have we reached the bottom 
     334                                        if ( menuItemsCount === thisItemPosition + 1 ) 
     335                                                break; 
     336                                        thisItem.detach().insertAfter( menuItems.eq( thisItemPosition + 1 ) ).updateParentMenuItemDBId(); 
     337                                } 
     338                                $this.focus(); 
     339                                break; 
     340                        case 'left': 
     341                                // As far left as possible 
     342                                if ( 0 === thisItemDepth ) 
     343                                        break; 
     344                                thisItem.shiftHorizontally( -1 ); 
     345                                $this.focus(); 
     346                                break; 
     347                        case 'right': 
     348                                // Can't be sub item at top 
     349                                if ( 0 === thisItemPosition ) 
     350                                        break; 
     351                                // Already sub item of prevItem 
     352                                if ( thisItemData['menu-item-parent-id'] === prevItemId ) 
     353                                        break; 
     354                                thisItem.shiftHorizontally( 1 ); 
     355                                $this.focus(); 
     356                                break; 
     357                        } 
     358                        api.registerChange(); 
     359                        api.refreshKeyboardAccessibility(); 
     360                        api.refreshAdvancedAccessibility(); 
     361                }, 
     362 
    265363                initAccessibility : function() { 
     364                        api.refreshKeyboardAccessibility(); 
     365                        api.refreshAdvancedAccessibility(); 
     366 
     367                        // Events 
     368                        $( '.menus-move-up' ).on( 'click', function ( e ) { 
     369                                api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'up' ); 
     370                                e.preventDefault(); 
     371                        }); 
     372                        $( '.menus-move-down' ).on( 'click', function ( e ) { 
     373                                api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'down' ); 
     374                                e.preventDefault(); 
     375                        }); 
     376                        $( '.menus-move-left' ).on( 'click', function ( e ) { 
     377                                api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'left' ); 
     378                                e.preventDefault(); 
     379                        }); 
     380                        $( '.menus-move-right' ).on( 'click', function ( e ) { 
     381                                api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'right' ); 
     382                                e.preventDefault(); 
     383                        }); 
     384                }, 
     385 
     386                refreshAdvancedAccessibility : function() { 
     387 
     388                        // Hide all links by default 
     389                        $( '.menu-item-settings .field-move a' ).hide(); 
     390 
     391                        $( '.item-edit' ).each( function() { 
     392                                var $this = $(this), 
     393                                        movement = [], 
     394                                        availableMovement = '', 
     395                                        menuItem = $this.parents( 'li.menu-item' ), 
     396                                        depth = menuItem.menuItemDepth(), 
     397                                        isPrimaryMenuItem = ( 0 === depth ), 
     398                                        itemName = $this.parents( '.menu-item-handle' ).find( '.menu-item-title' ).text(), 
     399                                        position = parseInt( menuItem.index() ), 
     400                                        totalMenuItems = $('#menu-to-edit li').length, 
     401                                        hasSameDepthSibling = menuItem.nextAll( '.menu-item-depth-' + depth ).length; 
     402 
     403                                // Where can they move this menu item? 
     404                                if ( 0 !== position ) 
     405                                        menuItem.find( '.menus-move-up' ).show(); 
     406 
     407                                if ( position + 1 !== totalMenuItems && 0 !== position ) 
     408                                        menuItem.find( '.menus-move-down' ).show(); 
     409 
     410                                if ( 0 === position && 0 !== hasSameDepthSibling ) 
     411                                        menuItem.find( '.menus-move-down' ).show(); 
     412 
     413                                if ( ! isPrimaryMenuItem ) 
     414                                        menuItem.find( '.menus-move-left' ).show(); 
     415 
     416                                if ( 0 !== position ) { 
     417                                        if ( menuItem.find( '.menu-item-data-parent-id' ).val() !== menuItem.prev().find( '.menu-item-data-db-id' ).val() ) 
     418                                                menuItem.find( '.menus-move-right' ).show(); 
     419                                } 
     420 
     421                                if ( isPrimaryMenuItem ) { 
     422                                        var primaryItems = $( '.menu-item-depth-0' ), 
     423                                                itemPosition = primaryItems.index( menuItem ) + 1, 
     424                                                totalMenuItems = primaryItems.length, 
     425 
     426                                                // String together help text for primary menu items 
     427                                                title = itemName + '. ' + l10nStrings.menuFocus.replace('%d', itemPosition).replace('%d', totalMenuItems) + '.'; 
     428                                } else { 
     429                                        var parentItem = menuItem.prevAll( '.menu-item-depth-' + parseInt( depth - 1 ) ).first(), 
     430                                                parentItemId = parentItem.find( '.menu-item-data-db-id' ).val(), 
     431                                                parentItemName = parentItem.find( '.menu-item-title' ).text(), 
     432                                                subItems = $( '.menu-item .menu-item-data-parent-id[value="' + parentItemId + '"]' ), 
     433                                                itemPosition = $(subItems.parents('.menu-item').get().reverse()).index( menuItem ) + 1; 
     434 
     435                                                // String together help text for sub menu items 
     436 
     437                                                title = itemName + '. ' + l10nStrings.subMenuFocus.replace('%d', itemPosition) + parentItemName + '.'; 
     438                                } 
     439 
     440                                $this.prop('title', title).html( title ); 
     441                        }); 
     442                }, 
     443 
     444                refreshKeyboardAccessibility : function() { 
    266445                        $( '.item-edit' ).off( 'focus' ).on( 'focus', function(){ 
    267446                                $(this).on( 'keydown', function(e){ 
    268447 
    … …  
    275454                                        // Avoid multiple keydown events 
    276455                                        $this.off('keydown'); 
    277456 
    278                                         var menuItems = $('#menu-to-edit li'); 
    279                                                 menuItemsCount = menuItems.length, 
    280                                                 thisItem = $this.parents( 'li.menu-item' ), 
    281                                                 thisItemChildren = thisItem.childMenuItems(), 
    282                                                 thisItemData = thisItem.getItemData(), 
    283                                                 thisItemDepth = parseInt( thisItem.menuItemDepth() ), 
    284                                                 thisItemPosition = parseInt( thisItem.index() ), 
    285                                                 nextItem = thisItem.next(), 
    286                                                 nextItemChildren = nextItem.childMenuItems(), 
    287                                                 nextItemDepth = parseInt( nextItem.menuItemDepth() ) + 1, 
    288                                                 prevItem = thisItem.prev(), 
    289                                                 prevItemDepth = parseInt( prevItem.menuItemDepth() ), 
    290                                                 prevItemId = prevItem.getItemData()['menu-item-db-id']; 
    291  
    292457                                        // Bail if there is only one menu item 
    293                                         if ( 1 === menuItemsCount ) 
     458                                        if ( 1 === $('#menu-to-edit li').length ) 
    294459                                                return; 
    295460 
    296461                                        // If RTL, swap left/right arrows 
    … …  
    300465 
    301466                                        switch ( arrows[e.which] ) { 
    302467                                        case 'up': 
    303                                                 var newItemPosition = thisItemPosition - 1; 
    304  
    305                                                 // Already at top 
    306                                                 if ( 0 === thisItemPosition ) 
    307                                                         break; 
    308  
    309                                                 // If a sub item is moved to top, shift it to 0 depth 
    310                                                 if ( 0 === newItemPosition && 0 !== thisItemDepth ) 
    311                                                         thisItem.moveHorizontally( 0, thisItemDepth ); 
    312  
    313                                                 // If prev item is sub item, shift to match depth 
    314                                                 if ( 0 !== prevItemDepth ) 
    315                                                         thisItem.moveHorizontally( prevItemDepth, thisItemDepth ); 
    316  
    317                                                 // Does this item have sub items? 
    318                                                 if ( thisItemChildren ) { 
    319                                                         var items = thisItem.add( thisItemChildren ); 
    320                                                         // Move the entire block 
    321                                                         items.detach().insertBefore( menuItems.eq( newItemPosition ) ); 
    322                                                 } else { 
    323                                                         thisItem.detach().insertBefore( menuItems.eq( newItemPosition ) ); 
    324                                                 } 
     468                                                api.moveMenuItem( $this, 'up' ); 
    325469                                                break; 
    326470                                        case 'down': 
    327                                                 // Does this item have sub items? 
    328                                                 if ( thisItemChildren ) { 
    329                                                         var items = thisItem.add( thisItemChildren ), 
    330                                                                 nextItem = menuItems.eq( items.length + thisItemPosition ), 
    331                                                                 nextItemChildren = 0 !== nextItem.childMenuItems().length; 
    332  
    333                                                         if ( nextItemChildren ) { 
    334                                                                 var newDepth = parseInt( nextItem.menuItemDepth() ) + 1; 
    335                                                                 thisItem.moveHorizontally( newDepth, thisItemDepth ); 
    336                                                         } 
    337  
    338                                                         // Have we reached the bottom? 
    339                                                         if ( menuItemsCount === thisItemPosition + items.length ) 
    340                                                                 break; 
    341  
    342                                                         items.detach().insertAfter( menuItems.eq( thisItemPosition + items.length ) ); 
    343                                                 } else { 
    344                                                         // If next item has sub items, shift depth 
    345                                                         if ( 0 !== nextItemChildren.length ) 
    346                                                                 thisItem.moveHorizontally( nextItemDepth, thisItemDepth ); 
    347  
    348                                                         // Have we reached the bottom 
    349                                                         if ( menuItemsCount === thisItemPosition + 1 ) 
    350                                                                 break; 
    351                                                         thisItem.detach().insertAfter( menuItems.eq( thisItemPosition + 1 ) ); 
    352                                                 } 
     471                                                api.moveMenuItem( $this, 'down' ); 
    353472                                                break; 
    354473                                        case 'left': 
    355                                                 // As far left as possible 
    356                                                 if ( 0 === thisItemDepth ) 
    357                                                         break; 
    358                                                 thisItem.shiftHorizontally( -1 ); 
     474                                                api.moveMenuItem( $this, 'left' ); 
    359475                                                break; 
    360476                                        case 'right': 
    361                                                 // Can't be sub item at top 
    362                                                 if ( 0 === thisItemPosition ) 
    363                                                         break; 
    364                                                 // Already sub item of prevItem 
    365                                                 if ( thisItemData['menu-item-parent-id'] === prevItemId ) 
    366                                                         break; 
    367                                                 thisItem.shiftHorizontally( 1 ); 
     477                                                api.moveMenuItem( $this, 'right' ); 
    368478                                                break; 
    369479                                        } 
    370                                         api.registerChange(); 
    371480                                        // Put focus back on same menu item 
    372481                                        $( '#edit-' + thisItemData['menu-item-db-id'] ).focus(); 
    373482                                        return false; 
    … …  
    752861                 */ 
    753862                addMenuItemToBottom : function( menuMarkup, req ) { 
    754863                        $(menuMarkup).hideAdvancedMenuItemFields().appendTo( api.targetList ); 
    755                         api.initAccessibility(); 
     864                        api.refreshKeyboardAccessibility(); 
     865                        api.refreshAdvancedAccessibility(); 
    756866                }, 
    757867 
    758868                addMenuItemToTop : function( menuMarkup, req ) { 
    759869                        $(menuMarkup).hideAdvancedMenuItemFields().prependTo( api.targetList ); 
    760                         api.initAccessibility(); 
     870                        api.refreshKeyboardAccessibility(); 
     871                        api.refreshAdvancedAccessibility(); 
    761872                }, 
    762873 
    763874                attachUnsavedChangesListener : function() { 

  • wp-admin/nav-menus.php

     
    611611        </div><!-- /#menu-management-liquid --> 
    612612        </div><!-- /#nav-menus-frame --> 
    613613</div><!-- /.wrap--> 
    614 <script type="text/javascript">var oneThemeLocationNoMenus = <?php if ( $one_theme_location_no_menus ) echo 'true'; else echo 'false'; ?>;</script> 
     614<script type="text/javascript"> 
     615        var oneThemeLocationNoMenus = <?php if ( $one_theme_location_no_menus ) echo 'true'; else echo 'false'; ?>, 
     616                l10nStrings = { 
     617                        "menuFocus" : "<?php _e( 'Menu item %d of %d' ); ?>", 
     618                        "subMenuFocus" : "<?php _e( 'Sub item number %d under' ); ?>" 
     619                }; 
     620</script> 
    615621<?php include( './admin-footer.php' ); ?> 

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

     
    77557755        border-bottom-right-radius: 3px; 
    77567756} 
    77577757 
     7758.menu-item-settings .field-move a { 
     7759        display: none; 
     7760        margin: 0 2px; 
     7761} 
     7762 
    77587763.menu-item-edit-active .menu-item-settings { 
    77597764        display: block; 
    77607765}