WordPress.org

Make WordPress Core

Ticket #14045: 14045.3.diff

File 14045.3.diff, 19.0 KB (added by lessbloat, 6 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( 'Move' ); ?>
     179                                                <a href="#" class="menus-move-up"><?php _e( 'Up one' ); ?></a>
     180                                                <a href="#" class="menus-move-down"><?php _e( 'Down one' ); ?></a>
     181                                                <a href="#" class="menus-move-left"></a>
     182                                                <a href="#" class="menus-move-right"></a>
     183                                                <a href="#" class="menus-move-top"><?php _e( 'To the top' ); ?></a>
     184                                        </label>
     185                                </p>
     186
    176187                                <div class="menu-item-actions description-wide submitbox">
    177188                                        <?php if( 'custom' != $item->type && $original_title !== false ) : ?>
    178189                                                <p class="link-to-original">
  • wp-admin/js/nav-menu.js

     
    4545                        if( api.menuList.length ) // If no menu, we're in the + tab.
    4646                                this.initSortables();
    4747
    48                         if( oneThemeLocationNoMenus )
     48                        if( menu.oneThemeLocationNoMenus )
    4949                                $( '#posttype-page' ).addSelectedToMenu( api.addMenuItemToBottom );
    5050
    5151                        this.initAccessibility();
     
    159159
    160160                                        return this.each(function() {
    161161                                                var t = $(this), menuItems = {},
    162                                                         checkboxes = ( oneThemeLocationNoMenus && 0 == t.find('.tabs-panel-active .categorychecklist li input:checked').length ) ? t.find('#page-all li input[type="checkbox"]') : t.find('.tabs-panel-active .categorychecklist li input:checked'),
     162                                                        checkboxes = ( menu.oneThemeLocationNoMenus && 0 == t.find('.tabs-panel-active .categorychecklist li input:checked').length ) ? t.find('#page-all li input[type="checkbox"]') : t.find('.tabs-panel-active .categorychecklist li input:checked'),
    163163                                                        re = new RegExp('menu-item\\[(\[^\\]\]*)');
    164164
    165165                                                processMethod = processMethod || api.addMenuItemToBottom;
     
    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                                break;
     310                        case 'down':
     311                                // Does this item have sub items?
     312                                if ( thisItemChildren ) {
     313                                        var items = thisItem.add( thisItemChildren ),
     314                                                nextItem = menuItems.eq( items.length + thisItemPosition ),
     315                                                nextItemChildren = 0 !== nextItem.childMenuItems().length;
     316
     317                                        if ( nextItemChildren ) {
     318                                                var newDepth = parseInt( nextItem.menuItemDepth() ) + 1;
     319                                                thisItem.moveHorizontally( newDepth, thisItemDepth );
     320                                        }
     321
     322                                        // Have we reached the bottom?
     323                                        if ( menuItemsCount === thisItemPosition + items.length )
     324                                                break;
     325
     326                                        items.detach().insertAfter( menuItems.eq( thisItemPosition + items.length ) ).updateParentMenuItemDBId();
     327                                } else {
     328                                        // If next item has sub items, shift depth
     329                                        if ( 0 !== nextItemChildren.length )
     330                                                thisItem.moveHorizontally( nextItemDepth, thisItemDepth );
     331
     332                                        // Have we reached the bottom
     333                                        if ( menuItemsCount === thisItemPosition + 1 )
     334                                                break;
     335                                        thisItem.detach().insertAfter( menuItems.eq( thisItemPosition + 1 ) ).updateParentMenuItemDBId();
     336                                }
     337                                break;
     338                        case 'top':
     339                                // Already at top
     340                                if ( 0 === thisItemPosition )
     341                                        break;
     342                                // Does this item have sub items?
     343                                if ( thisItemChildren ) {
     344                                        var items = thisItem.add( thisItemChildren );
     345                                        // Move the entire block
     346                                        items.detach().insertBefore( menuItems.eq( 0 ) ).updateParentMenuItemDBId();
     347                                } else {
     348                                        thisItem.detach().insertBefore( menuItems.eq( 0 ) ).updateParentMenuItemDBId();
     349                                }
     350                                break;
     351                        case 'left':
     352                                // As far left as possible
     353                                if ( 0 === thisItemDepth )
     354                                        break;
     355                                thisItem.shiftHorizontally( -1 );
     356                                break;
     357                        case 'right':
     358                                // Can't be sub item at top
     359                                if ( 0 === thisItemPosition )
     360                                        break;
     361                                // Already sub item of prevItem
     362                                if ( thisItemData['menu-item-parent-id'] === prevItemId )
     363                                        break;
     364                                thisItem.shiftHorizontally( 1 );
     365                                break;
     366                        }
     367                        $this.focus();
     368                        api.registerChange();
     369                        api.refreshKeyboardAccessibility();
     370                        api.refreshAdvancedAccessibility();
     371                },
     372
    265373                initAccessibility : function() {
     374                        api.refreshKeyboardAccessibility();
     375                        api.refreshAdvancedAccessibility();
     376
     377                        // Events
     378                        $( '.menus-move-up' ).on( 'click', function ( e ) {
     379                                api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'up' );
     380                                e.preventDefault();
     381                        });
     382                        $( '.menus-move-down' ).on( 'click', function ( e ) {
     383                                api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'down' );
     384                                e.preventDefault();
     385                        });
     386                        $( '.menus-move-top' ).on( 'click', function ( e ) {
     387                                api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'top' );
     388                                e.preventDefault();
     389                        });
     390                        $( '.menus-move-left' ).on( 'click', function ( e ) {
     391                                api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'left' );
     392                                e.preventDefault();
     393                        });
     394                        $( '.menus-move-right' ).on( 'click', function ( e ) {
     395                                api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'right' );
     396                                e.preventDefault();
     397                        });
     398                },
     399
     400                refreshAdvancedAccessibility : function() {
     401
     402                        // Hide all links by default
     403                        $( '.menu-item-settings .field-move a' ).hide();
     404
     405                        $( '.item-edit' ).each( function() {
     406                                var $this = $(this),
     407                                        movement = [],
     408                                        availableMovement = '',
     409                                        menuItem = $this.parents( 'li.menu-item' ).first(),
     410                                        depth = menuItem.menuItemDepth(),
     411                                        isPrimaryMenuItem = ( 0 === depth ),
     412                                        itemName = $this.parents( '.menu-item-handle' ).find( '.menu-item-title' ).text(),
     413                                        position = parseInt( menuItem.index() ),
     414                                        prevItemDepth = ( isPrimaryMenuItem ) ? depth : parseInt( depth - 1 ),
     415                                        prevItemNameLeft = menuItem.prevAll('.menu-item-depth-' + prevItemDepth).first().find( '.menu-item-title' ).text(),
     416                                        prevItemNameRight = menuItem.prevAll('.menu-item-depth-' + depth).first().find( '.menu-item-title' ).text(),
     417                                        totalMenuItems = $('#menu-to-edit li').length,
     418                                        hasSameDepthSibling = menuItem.nextAll( '.menu-item-depth-' + depth ).length;
     419
     420                                // Where can they move this menu item?
     421                                if ( 0 !== position ) {
     422                                        var thisLink = menuItem.find( '.menus-move-up' ),
     423                                                thisLinkText = thisLink.text();
     424                                        thisLink.prop('title', menus.move + ' ' + thisLinkText).show();
     425                                }
     426
     427                                if ( 0 !== position && isPrimaryMenuItem ) {
     428                                        var thisLink = menuItem.find( '.menus-move-top' ),
     429                                                thisLinkText = thisLink.text();
     430                                        thisLink.prop('title', menus.move + ' ' + thisLinkText).show();
     431                                }
     432
     433                                if ( position + 1 !== totalMenuItems && 0 !== position ) {
     434                                        var thisLink = menuItem.find( '.menus-move-down' ),
     435                                                thisLinkText = thisLink.text();
     436                                        thisLink.prop('title', menus.move + ' ' + thisLinkText).show();
     437                                }
     438
     439                                if ( 0 === position && 0 !== hasSameDepthSibling ) {
     440                                        var thisLink = menuItem.find( '.menus-move-down' ),
     441                                                thisLinkText = thisLink.text();
     442                                        thisLink.prop('title', menus.move + ' ' + thisLinkText).show();
     443                                }
     444
     445                                if ( ! isPrimaryMenuItem ) {
     446                                        var thisLink = menuItem.find( '.menus-move-left' ),
     447                                                thisLinkText = menus.outFrom + ' ' + prevItemNameLeft;
     448                                        thisLink.prop('title', menus.move + ' ' + thisLinkText).html(thisLinkText).show();
     449                                }
     450
     451                                if ( 0 !== position ) {
     452                                        if ( menuItem.find( '.menu-item-data-parent-id' ).val() !== menuItem.prev().find( '.menu-item-data-db-id' ).val() ) {
     453                                                var thisLink = menuItem.find( '.menus-move-right' ),
     454                                                        thisLinkText = menus.under + ' ' + prevItemNameRight;
     455                                                thisLink.prop('title', menus.move + ' ' + thisLinkText).html(thisLinkText).show();
     456                                        }
     457                                }
     458
     459                                if ( isPrimaryMenuItem ) {
     460                                        var primaryItems = $( '.menu-item-depth-0' ),
     461                                                itemPosition = primaryItems.index( menuItem ) + 1,
     462                                                totalMenuItems = primaryItems.length,
     463
     464                                                // String together help text for primary menu items
     465                                                title = itemName + '. ' + menus.menuFocus.replace('%d', itemPosition).replace('%d', totalMenuItems) + '.';
     466                                } else {
     467                                        var parentItem = menuItem.prevAll( '.menu-item-depth-' + parseInt( depth - 1 ) ).first(),
     468                                                parentItemId = parentItem.find( '.menu-item-data-db-id' ).val(),
     469                                                parentItemName = parentItem.find( '.menu-item-title' ).text(),
     470                                                subItems = $( '.menu-item .menu-item-data-parent-id[value="' + parentItemId + '"]' ),
     471                                                itemPosition = $(subItems.parents('.menu-item').get().reverse()).index( menuItem ) + 1;
     472
     473                                                // String together help text for sub menu items
     474
     475                                                title = itemName + '. ' + menus.subMenuFocus.replace('%d', itemPosition) + parentItemName + '.';
     476                                }
     477
     478                                $this.prop('title', title).html( title );
     479                        });
     480                },
     481
     482                refreshKeyboardAccessibility : function() {
    266483                        $( '.item-edit' ).off( 'focus' ).on( 'focus', function(){
    267                                 $(this).on( 'keydown', function(e){
     484                                $(this).off( 'keydown' ).on( 'keydown', function(e){
    268485
    269486                                        var $this = $(this);
    270487
     
    275492                                        // Avoid multiple keydown events
    276493                                        $this.off('keydown');
    277494
    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 
    292495                                        // Bail if there is only one menu item
    293                                         if ( 1 === menuItemsCount )
     496                                        if ( 1 === $('#menu-to-edit li').length )
    294497                                                return;
    295498
    296499                                        // If RTL, swap left/right arrows
     
    300503
    301504                                        switch ( arrows[e.which] ) {
    302505                                        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                                                 }
     506                                                api.moveMenuItem( $this, 'up' );
    325507                                                break;
    326508                                        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                                                 }
     509                                                api.moveMenuItem( $this, 'down' );
    353510                                                break;
    354511                                        case 'left':
    355                                                 // As far left as possible
    356                                                 if ( 0 === thisItemDepth )
    357                                                         break;
    358                                                 thisItem.shiftHorizontally( -1 );
     512                                                api.moveMenuItem( $this, 'left' );
    359513                                                break;
    360514                                        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 );
     515                                                api.moveMenuItem( $this, 'right' );
    368516                                                break;
    369517                                        }
    370                                         api.registerChange();
    371518                                        // Put focus back on same menu item
    372519                                        $( '#edit-' + thisItemData['menu-item-db-id'] ).focus();
    373520                                        return false;
    374521                                });
    375                         }).blur(function () {
    376                                 $(this).off( 'keydown' );
    377522                        });
    378523                },
    379524
     
    491636                                                ui.item[0].style.left = 'auto';
    492637                                                ui.item[0].style.right = 0;
    493638                                        }
     639
     640                                        api.refreshKeyboardAccessibility();
     641                                        api.refreshAdvancedAccessibility();
    494642                                },
    495643                                change: function(e, ui) {
    496644                                        // Make sure the placeholder is inside the menu.
     
    752900                 */
    753901                addMenuItemToBottom : function( menuMarkup, req ) {
    754902                        $(menuMarkup).hideAdvancedMenuItemFields().appendTo( api.targetList );
    755                         api.initAccessibility();
     903                        api.refreshKeyboardAccessibility();
     904                        api.refreshAdvancedAccessibility();
    756905                },
    757906
    758907                addMenuItemToTop : function( menuMarkup, req ) {
    759908                        $(menuMarkup).hideAdvancedMenuItemFields().prependTo( api.targetList );
    760                         api.initAccessibility();
     909                        api.refreshKeyboardAccessibility();
     910                        api.refreshAdvancedAccessibility();
    761911                },
    762912
    763913                attachUnsavedChangesListener : function() {
  • wp-admin/nav-menus.php

     
    353353$page_count = wp_count_posts( 'page' );
    354354$one_theme_location_no_menus = ( 1 == count( get_registered_nav_menus() ) && ! $add_new_screen && empty( $nav_menus ) && ! empty( $page_count->publish ) ) ? true : false;
    355355
     356$l10n = array(
     357        "oneThemeLocationNoMenus" => ( $one_theme_location_no_menus ) ? 'true' : 'false',
     358        "move" => __( 'Move' ),
     359        "menuFocus" => __( 'Menu item %d of %d' ),
     360        "subMenuFocus" => __( 'Sub item number %d under' ),
     361        "under" => __( 'Under' ),
     362        "outFrom" => __( 'Out from under' )
     363);
     364wp_localize_script( 'nav-menu', 'menus', $l10n );
     365
    356366// Redirect to add screen if there are no menus and this users has either zero, or more than 1 theme locations
    357367if ( 0 == $menu_count && ! $add_new_screen && ! $one_theme_location_no_menus )
    358368        wp_redirect( admin_url( 'nav-menus.php?action=edit&menu=0' ) );
     
    542552                                        <div id="post-body">
    543553                                                <div id="post-body-content">
    544554                                                        <?php if ( ! $add_new_screen ) : ?>
     555                                                        <h3><?php _e( 'Menu Structure' ); ?></h3>
    545556                                                        <?php $starter_copy = ( $one_theme_location_no_menus ) ? __( 'Edit your default menu by adding or removing items. Drag each item into the order you prefer. Click Create Menu to save your changes.' ) : __( 'Drag each item into the order you prefer. Click an item to reveal additional configuration options.' ); ?>
    546557                                                        <div class="drag-instructions post-body-plain" <?php if ( isset( $menu_items ) && 0 == count( $menu_items ) ) { ?>style="display: none;"<?php } ?>>
    547558                                                                <p><?php echo $starter_copy; ?></p>
     
    558569                                                                <p class="post-body-plain"><?php _e( 'Give your menu a name above, then click Create Menu.' ); ?></p>
    559570                                                        <?php endif; ?>
    560571                                                        <div class="menu-settings" <?php if ( $one_theme_location_no_menus ) { ?>style="display: none;"<?php } ?>>
     572                                                                <h3><?php _e( 'Menu Settings' ); ?></h3>
    561573                                                                <?php
    562574                                                                if ( ! isset( $auto_add ) ) {
    563575                                                                        $auto_add = get_option( 'nav_menu_options' );
     
    611623        </div><!-- /#menu-management-liquid -->
    612624        </div><!-- /#nav-menus-frame -->
    613625</div><!-- /.wrap-->
    614 <script type="text/javascript">var oneThemeLocationNoMenus = <?php if ( $one_theme_location_no_menus ) echo 'true'; else echo 'false'; ?>;</script>
    615626<?php include( './admin-footer.php' ); ?>
  • wp-admin/css/colors-fresh.css

     
    17891789        background: #fbfbfb;
    17901790}
    17911791
    1792 .menu-settings {
    1793         border-top: 1px solid #eeeeee;
    1794 }
    1795 
    17961792.theme-location-set {
    17971793        color: #999999;
    17981794}
  • wp-admin/css/wp-admin.css

     
    72787278        margin: .3em 0 .6em;
    72797279}
    72807280
     7281.menu-edit #post-body-content h3 {
     7282        margin: 0 0 10px;
     7283}
     7284
    72817285.menu-settings {
    72827286        margin-top: 2em;
    7283         padding-top: 16px;
    72847287        overflow: hidden;
    72857288}
    72867289
     
    77517754        border-bottom-right-radius: 3px;
    77527755}
    77537756
     7757.menu-item-settings .field-move a {
     7758        display: none;
     7759        margin: 0 2px;
     7760}
     7761
    77547762.menu-item-edit-active .menu-item-settings {
    77557763        display: block;
    77567764}