From 29de440b0b970be9f947bcfe3f38cb0ecb7ce1b4 Mon Sep 17 00:00:00 2001 From: Jonathan Desrosiers Date: Mon, 21 Dec 2020 15:14:15 +0000 Subject: [PATCH] Twenty Twenty-One: Allow local anchor links to be used in primary navigation. This adds some JavaScript to detect when an anchor link is clicked within the primary navigation on mobile devices and closes the menu before scrolling to the location on the page. Props poena, macmanx, t-p. Merges [49854] to the 5.6 branch. Fixes #52006. git-svn-id: https://develop.svn.wordpress.org/branches/5.6@49855 602fd350-edb4-49c9-b593-d223f7449a82 --- .../assets/js/primary-navigation.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js b/src/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js index 4f3fc3caa6..ec559619a1 100644 --- a/src/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js +++ b/src/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js @@ -150,6 +150,23 @@ function twentytwentyoneExpandSubMenu( el ) { // jshint ignore:line } } ); + /** + * Close menu and scroll to anchor when an anchor link is clicked. + * Adapted from TwentyTwenty. + */ + document.addEventListener( 'click', function( event ) { + // If target onclick is with # within the href attribute + if ( event.target.hash && event.target.hash.includes( '#' ) ) { + wrapper.classList.remove( id + '-navigation-open', 'lock-scrolling' ); + twentytwentyoneToggleAriaExpanded( mobileButton ); + // Wait 550 and scroll to the anchor. + setTimeout(function () { + var anchor = document.getElementById(event.target.hash.slice(1)); + anchor.scrollIntoView(); + }, 550); + } + } ); + document.getElementById( 'site-navigation' ).querySelectorAll( '.menu-wrapper > .menu-item-has-children' ).forEach( function( li ) { li.addEventListener( 'mouseenter', function() { this.querySelector( '.sub-menu-toggle' ).setAttribute( 'aria-expanded', 'true' );