From bfe9cce7f2a57008adac197e6cd2578754c9f349 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Wed, 15 Jul 2015 20:04:41 +0000 Subject: [PATCH] Customizer: Defer updating nav menu item `tabIndex` attributes until pane is reflowed. Introduces `pane-contents-reflowed` Customizer event. Props valendesigns, westonruter. Fixes #32943. git-svn-id: https://develop.svn.wordpress.org/trunk@33283 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/js/customize-controls.js | 1 + src/wp-admin/js/customize-nav-menus.js | 19 ++++++++++++------- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js index 5ebd830f8d..070b96c6ff 100644 --- a/src/wp-admin/js/customize-controls.js +++ b/src/wp-admin/js/customize-controls.js @@ -3234,6 +3234,7 @@ if ( wasReflowed && activeElement ) { activeElement.focus(); } + api.trigger( 'pane-contents-reflowed' ); }, api ); api.bind( 'ready', api.reflowPaneContents ); api.reflowPaneContents = _.debounce( api.reflowPaneContents, 100 ); diff --git a/src/wp-admin/js/customize-nav-menus.js b/src/wp-admin/js/customize-nav-menus.js index fefac723c6..59fa9d4814 100644 --- a/src/wp-admin/js/customize-nav-menus.js +++ b/src/wp-admin/js/customize-nav-menus.js @@ -673,6 +673,18 @@ }); section.refreshAssignedLocations(); + + api.bind( 'pane-contents-reflowed', function() { + // Skip menus that have been removed. + if ( ! section.container.parent().length ) { + return; + } + section.container.find( '.menu-item .menu-item-reorder-nav button' ).prop( 'tabIndex', 0 ); + section.container.find( '.menu-item.move-up-disabled .menus-move-up' ).prop( 'tabIndex', -1 ); + section.container.find( '.menu-item.move-down-disabled .menus-move-down' ).prop( 'tabIndex', -1 ); + section.container.find( '.menu-item.move-left-disabled .menus-move-left' ).prop( 'tabIndex', -1 ); + section.container.find( '.menu-item.move-right-disabled .menus-move-right' ).prop( 'tabIndex', -1 ); + } ); }, populateControls: function() { @@ -2031,7 +2043,6 @@ */ reflowMenuItems: function() { var menuControl = this, - menuSection = api.section( 'nav_menu[' + String( menuControl.params.menu_id ) + ']' ), menuItemControls = menuControl.getMenuItemControls(), reflowRecursively; @@ -2098,12 +2109,6 @@ currentAbsolutePosition: 0 } ); - menuSection.container.find( '.menu-item .menu-item-reorder-nav button' ).prop( 'tabIndex', 0 ); - menuSection.container.find( '.menu-item.move-up-disabled .menus-move-up' ).prop( 'tabIndex', -1 ); - menuSection.container.find( '.menu-item.move-down-disabled .menus-move-down' ).prop( 'tabIndex', -1 ); - menuSection.container.find( '.menu-item.move-left-disabled .menus-move-left' ).prop( 'tabIndex', -1 ); - menuSection.container.find( '.menu-item.move-right-disabled .menus-move-right' ).prop( 'tabIndex', -1 ); - menuControl.container.find( '.reorder-toggle' ).toggle( menuItemControls.length > 1 ); },