0ct0pu5/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Themes: Fix anchor link behavior on Varia/Seedlet child themes

Browse source 
As described in https://github.com/Automattic/themes/issues/3520,
certain child themes of Varia and Seedlet were not handling menu links
correctly when they were navigating to anchor IDs on the page the user
was currently on. An existing bit of logic was already implemented in
the twentytwentyone theme to address this use case, so this diff ports
it into the asset scripts for Varia and Seedlet as well.

Ported from D62296-code
This commit is contained in:
Matthew Reishus 2021-06-08 09:05:01 -05:00
parent a26e65d598
commit 07038935d7
2 changed files with 28 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
seedlet/assets/js/primary-navigation.js
View file

@ -28,6 +28,19 @@
};
}
document.addEventListener( 'click', function( event ) {
// If target onclick is <a> with # within the href attribute
if ( event.target.hash && event.target.hash.includes( '#' ) ) {
wrapper.classList.remove( id + '-navigation-open' );
wrapper.classList.remove( 'lock-scrolling' );
// Wait 550 and scroll to the anchor.
setTimeout(function () {
var anchor = document.getElementById(event.target.hash.slice(1));
anchor.scrollIntoView();
}, 550);
}
} );
/**
* Trap keyboard navigation in the menu modal.
* Adapted from TwentyTwenty

15
varia/js/primary-navigation.js
View file

@ -27,6 +27,21 @@
toggleButton.focus();
}
}
document.addEventListener( 'click', function( event ) {
// If target onclick is <a> with # within the href attribute
if ( event.target.hash && event.target.hash.includes( '#' ) ) {
wrapper.classList.remove( 'lock-scrolling' );
if (toggleInput) {
toggleInput.checked = false;
}
// Wait 550 and scroll to the anchor.
setTimeout(function () {
var anchor = document.getElementById(event.target.hash.slice(1));
anchor.scrollIntoView();
}, 550);
}
} );
}
window.addEventListener( 'load', function() {