From 84ec54e07e468518a5f7918ff55b298e9f9f2946 Mon Sep 17 00:00:00 2001 From: Helen Hou-Sandi Date: Tue, 3 Mar 2015 21:13:37 +0000 Subject: [PATCH] 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. git-svn-id: https://develop.svn.wordpress.org/trunk@31604 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/includes/nav-menu.php | 10 +- src/wp-admin/js/nav-menu.js | 191 +++++++++++++++++------------ 2 files changed, 115 insertions(+), 86 deletions(-) diff --git a/src/wp-admin/includes/nav-menu.php b/src/wp-admin/includes/nav-menu.php index fe588cd461..8ba4556892 100644 --- a/src/wp-admin/includes/nav-menu.php +++ b/src/wp-admin/includes/nav-menu.php @@ -186,11 +186,11 @@ class Walker_Nav_Menu_Edit extends Walker_Nav_Menu {

diff --git a/src/wp-admin/js/nav-menu.js b/src/wp-admin/js/nav-menu.js index c4d4b92635..a119f42e91 100644 --- a/src/wp-admin/js/nav-menu.js +++ b/src/wp-admin/js/nav-menu.js @@ -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() {