Nav menus: Better JS performance on initial load of edit screen.
The accessibility helpers previously processed all items when editing a menu, which was quite slow to the point of being unresponsive for large menus. They now only process items when they are expanded or a user comes near them in some way, such as hover or focus. Also simplifies a redundant set of click event handlers down to one, which further enhances performance. props atimmer, sevenspark. fixes #25698. Built from https://develop.svn.wordpress.org/trunk@31604 git-svn-id: http://core.svn.wordpress.org/trunk@31585 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Helen Hou-Sandí
parent
b8bbd959e2
commit
5567d03278
|
|
@ -186,11 +186,11 @@ class Walker_Nav_Menu_Edit extends Walker_Nav_Menu {
|
|||
<p class="field-move hide-if-no-js description description-wide">
|
||||
<label>
|
||||
<span><?php _e( 'Move' ); ?></span>
|
||||
<a href="#" class="menus-move-up"><?php _e( 'Up one' ); ?></a>
|
||||
<a href="#" class="menus-move-down"><?php _e( 'Down one' ); ?></a>
|
||||
<a href="#" class="menus-move-left"></a>
|
||||
<a href="#" class="menus-move-right"></a>
|
||||
<a href="#" class="menus-move-top"><?php _e( 'To the top' ); ?></a>
|
||||
<a href="#" class="menus-move menus-move-up" data-dir="up"><?php _e( 'Up one' ); ?></a>
|
||||
<a href="#" class="menus-move menus-move-down" data-dir="down"><?php _e( 'Down one' ); ?></a>
|
||||
<a href="#" class="menus-move menus-move-left" data-dir="left"></a>
|
||||
<a href="#" class="menus-move menus-move-right" data-dir="right"></a>
|
||||
<a href="#" class="menus-move menus-move-top" data-dir="top"><?php _e( 'To the top' ); ?></a>
|
||||
</label>
|
||||
</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -386,106 +386,135 @@ var wpNavMenu;
|
|||
api.refreshKeyboardAccessibility();
|
||||
api.refreshAdvancedAccessibility();
|
||||
|
||||
// Events
|
||||
menu.on( 'click', '.menus-move-up', function ( e ) {
|
||||
api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'up' );
|
||||
e.preventDefault();
|
||||
});
|
||||
menu.on( 'click', '.menus-move-down', function ( e ) {
|
||||
api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'down' );
|
||||
e.preventDefault();
|
||||
});
|
||||
menu.on( 'click', '.menus-move-top', function ( e ) {
|
||||
api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'top' );
|
||||
e.preventDefault();
|
||||
});
|
||||
menu.on( 'click', '.menus-move-left', function ( e ) {
|
||||
api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'left' );
|
||||
e.preventDefault();
|
||||
});
|
||||
menu.on( 'click', '.menus-move-right', function ( e ) {
|
||||
api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'right' );
|
||||
// Refresh the accessibility when the user comes close to the item in any way
|
||||
menu.on( 'mouseenter.refreshAccessibility focus.refreshAccessibility touchstart.refreshAccessibility' , '.menu-item' , function(){
|
||||
api.refreshAdvancedAccessibilityOfItem( $( this ).find( '.item-edit' ) );
|
||||
} );
|
||||
|
||||
// We have to update on click aswell because we might hover first, change the item and then click.
|
||||
menu.on( 'click', '.item-edit', function() {
|
||||
api.refreshAdvancedAccessibilityOfItem( $( this ) );
|
||||
} );
|
||||
|
||||
// Links for moving items
|
||||
menu.on( 'click', '.menus-move', function ( e ) {
|
||||
var $this = $( this ),
|
||||
dir = $this.data( 'dir' );
|
||||
|
||||
if ( 'undefined' !== typeof dir ) {
|
||||
api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), dir );
|
||||
}
|
||||
e.preventDefault();
|
||||
});
|
||||
},
|
||||
|
||||
refreshAdvancedAccessibility : function() {
|
||||
/**
|
||||
* refreshAdvancedAccessibilityOfItem( [itemToRefresh] )
|
||||
*
|
||||
* Refreshes advanced accessibility buttons for one menu item.
|
||||
* Shows or hides buttons based on the location of the menu item.
|
||||
*
|
||||
* @param {object} itemToRefresh The menu item that might need it's advanced accessibility buttons refreshed
|
||||
*/
|
||||
refreshAdvancedAccessibilityOfItem : function( itemToRefresh ) {
|
||||
|
||||
// Hide all links by default
|
||||
$( '.menu-item-settings .field-move a' ).css( 'display', 'none' );
|
||||
// Only refresh accessibility when necessary
|
||||
if ( true !== $( itemToRefresh ).data( 'needs_accessibility_refresh' ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
$( '.item-edit' ).each( function() {
|
||||
var thisLink, thisLinkText, primaryItems, itemPosition, title,
|
||||
parentItem, parentItemId, parentItemName, subItems,
|
||||
$this = $(this),
|
||||
menuItem = $this.closest( 'li.menu-item' ).first(),
|
||||
depth = menuItem.menuItemDepth(),
|
||||
isPrimaryMenuItem = ( 0 === depth ),
|
||||
itemName = $this.closest( '.menu-item-handle' ).find( '.menu-item-title' ).text(),
|
||||
position = parseInt( menuItem.index(), 10 ),
|
||||
prevItemDepth = ( isPrimaryMenuItem ) ? depth : parseInt( depth - 1, 10 ),
|
||||
prevItemNameLeft = menuItem.prevAll('.menu-item-depth-' + prevItemDepth).first().find( '.menu-item-title' ).text(),
|
||||
prevItemNameRight = menuItem.prevAll('.menu-item-depth-' + depth).first().find( '.menu-item-title' ).text(),
|
||||
totalMenuItems = $('#menu-to-edit li').length,
|
||||
hasSameDepthSibling = menuItem.nextAll( '.menu-item-depth-' + depth ).length;
|
||||
var thisLink, thisLinkText, primaryItems, itemPosition, title,
|
||||
parentItem, parentItemId, parentItemName, subItems,
|
||||
$this = $( itemToRefresh ),
|
||||
menuItem = $this.closest( 'li.menu-item' ).first(),
|
||||
depth = menuItem.menuItemDepth(),
|
||||
isPrimaryMenuItem = ( 0 === depth ),
|
||||
itemName = $this.closest( '.menu-item-handle' ).find( '.menu-item-title' ).text(),
|
||||
position = parseInt( menuItem.index(), 10 ),
|
||||
prevItemDepth = ( isPrimaryMenuItem ) ? depth : parseInt( depth - 1, 10 ),
|
||||
prevItemNameLeft = menuItem.prevAll('.menu-item-depth-' + prevItemDepth).first().find( '.menu-item-title' ).text(),
|
||||
prevItemNameRight = menuItem.prevAll('.menu-item-depth-' + depth).first().find( '.menu-item-title' ).text(),
|
||||
totalMenuItems = $('#menu-to-edit li').length,
|
||||
hasSameDepthSibling = menuItem.nextAll( '.menu-item-depth-' + depth ).length;
|
||||
|
||||
menuItem.find( '.field-move' ).toggle( totalMenuItems > 1 );
|
||||
|
||||
// Where can they move this menu item?
|
||||
if ( 0 !== position ) {
|
||||
thisLink = menuItem.find( '.menus-move-up' );
|
||||
thisLink.prop( 'title', menus.moveUp ).css( 'display', 'inline' );
|
||||
// Where can they move this menu item?
|
||||
if ( 0 !== position ) {
|
||||
thisLink = menuItem.find( '.menus-move-up' );
|
||||
thisLink.prop( 'title', menus.moveUp ).css( 'display', 'inline' );
|
||||
}
|
||||
|
||||
if ( 0 !== position && isPrimaryMenuItem ) {
|
||||
thisLink = menuItem.find( '.menus-move-top' );
|
||||
thisLink.prop( 'title', menus.moveToTop ).css( 'display', 'inline' );
|
||||
}
|
||||
|
||||
if ( position + 1 !== totalMenuItems && 0 !== position ) {
|
||||
thisLink = menuItem.find( '.menus-move-down' );
|
||||
thisLink.prop( 'title', menus.moveDown ).css( 'display', 'inline' );
|
||||
}
|
||||
|
||||
if ( 0 === position && 0 !== hasSameDepthSibling ) {
|
||||
thisLink = menuItem.find( '.menus-move-down' );
|
||||
thisLink.prop( 'title', menus.moveDown ).css( 'display', 'inline' );
|
||||
}
|
||||
|
||||
if ( ! isPrimaryMenuItem ) {
|
||||
thisLink = menuItem.find( '.menus-move-left' ),
|
||||
thisLinkText = menus.outFrom.replace( '%s', prevItemNameLeft );
|
||||
thisLink.prop( 'title', menus.moveOutFrom.replace( '%s', prevItemNameLeft ) ).html( thisLinkText ).css( 'display', 'inline' );
|
||||
}
|
||||
|
||||
if ( 0 !== position ) {
|
||||
if ( menuItem.find( '.menu-item-data-parent-id' ).val() !== menuItem.prev().find( '.menu-item-data-db-id' ).val() ) {
|
||||
thisLink = menuItem.find( '.menus-move-right' ),
|
||||
thisLinkText = menus.under.replace( '%s', prevItemNameRight );
|
||||
thisLink.prop( 'title', menus.moveUnder.replace( '%s', prevItemNameRight ) ).html( thisLinkText ).css( 'display', 'inline' );
|
||||
}
|
||||
}
|
||||
|
||||
if ( 0 !== position && isPrimaryMenuItem ) {
|
||||
thisLink = menuItem.find( '.menus-move-top' );
|
||||
thisLink.prop( 'title', menus.moveToTop ).css( 'display', 'inline' );
|
||||
}
|
||||
if ( isPrimaryMenuItem ) {
|
||||
primaryItems = $( '.menu-item-depth-0' ),
|
||||
itemPosition = primaryItems.index( menuItem ) + 1,
|
||||
totalMenuItems = primaryItems.length,
|
||||
|
||||
if ( position + 1 !== totalMenuItems && 0 !== position ) {
|
||||
thisLink = menuItem.find( '.menus-move-down' );
|
||||
thisLink.prop( 'title', menus.moveDown ).css( 'display', 'inline' );
|
||||
}
|
||||
// String together help text for primary menu items
|
||||
title = menus.menuFocus.replace( '%1$s', itemName ).replace( '%2$d', itemPosition ).replace( '%3$d', totalMenuItems );
|
||||
} else {
|
||||
parentItem = menuItem.prevAll( '.menu-item-depth-' + parseInt( depth - 1, 10 ) ).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;
|
||||
|
||||
if ( 0 === position && 0 !== hasSameDepthSibling ) {
|
||||
thisLink = menuItem.find( '.menus-move-down' );
|
||||
thisLink.prop( 'title', menus.moveDown ).css( 'display', 'inline' );
|
||||
}
|
||||
// String together help text for sub menu items
|
||||
title = menus.subMenuFocus.replace( '%1$s', itemName ).replace( '%2$d', itemPosition ).replace( '%3$s', parentItemName );
|
||||
}
|
||||
|
||||
if ( ! isPrimaryMenuItem ) {
|
||||
thisLink = menuItem.find( '.menus-move-left' ),
|
||||
thisLinkText = menus.outFrom.replace( '%s', prevItemNameLeft );
|
||||
thisLink.prop( 'title', menus.moveOutFrom.replace( '%s', prevItemNameLeft ) ).html( thisLinkText ).css( 'display', 'inline' );
|
||||
}
|
||||
$this.prop('title', title).html( title );
|
||||
|
||||
if ( 0 !== position ) {
|
||||
if ( menuItem.find( '.menu-item-data-parent-id' ).val() !== menuItem.prev().find( '.menu-item-data-db-id' ).val() ) {
|
||||
thisLink = menuItem.find( '.menus-move-right' ),
|
||||
thisLinkText = menus.under.replace( '%s', prevItemNameRight );
|
||||
thisLink.prop( 'title', menus.moveUnder.replace( '%s', prevItemNameRight ) ).html( thisLinkText ).css( 'display', 'inline' );
|
||||
}
|
||||
}
|
||||
// Mark this item's accessibility as refreshed
|
||||
$this.data( 'needs_accessibility_refresh', false );
|
||||
},
|
||||
|
||||
if ( isPrimaryMenuItem ) {
|
||||
primaryItems = $( '.menu-item-depth-0' ),
|
||||
itemPosition = primaryItems.index( menuItem ) + 1,
|
||||
totalMenuItems = primaryItems.length,
|
||||
/**
|
||||
* refreshAdvancedAccessibility
|
||||
*
|
||||
* Hides all advanced accessibility buttons and marks them for refreshing.
|
||||
*/
|
||||
refreshAdvancedAccessibility : function() {
|
||||
|
||||
// String together help text for primary menu items
|
||||
title = menus.menuFocus.replace( '%1$s', itemName ).replace( '%2$d', itemPosition ).replace( '%3$d', totalMenuItems );
|
||||
} else {
|
||||
parentItem = menuItem.prevAll( '.menu-item-depth-' + parseInt( depth - 1, 10 ) ).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;
|
||||
// Hide all links by default
|
||||
$( '.menu-item-settings .field-move a' ).hide();
|
||||
|
||||
// String together help text for sub menu items
|
||||
title = menus.subMenuFocus.replace( '%1$s', itemName ).replace( '%2$d', itemPosition ).replace( '%3$s', parentItemName );
|
||||
}
|
||||
// Mark all menu items as unprocessed
|
||||
$( '.item-edit' ).data( 'needs_accessibility_refresh', true );
|
||||
|
||||
$this.prop('title', title).html( title );
|
||||
});
|
||||
// All open items have to be refreshed or they will show no links
|
||||
$( '.menu-item-edit-active .item-edit' ).each( function() {
|
||||
api.refreshAdvancedAccessibilityOfItem( this );
|
||||
} );
|
||||
},
|
||||
|
||||
refreshKeyboardAccessibility : function() {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -4,7 +4,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '4.2-alpha-31603';
|
||||
$wp_version = '4.2-alpha-31604';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
|
|||
Loading…
Reference in New Issue