WordPress.org
Get WordPress

Make WordPress Core

Ticket #14045: 14045.2.diff

File 14045.2.diff, 13.7 KB (added by lessbloat, 12 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 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}