07038935d7
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
51 lines
No EOL
1.3 KiB
JavaScript
51 lines
No EOL
1.3 KiB
JavaScript
/**
|
|
* File primary-navigation.js.
|
|
*
|
|
* This files only gets added to themes that support the mobile nav on side
|
|
*/
|
|
( function() {
|
|
|
|
/**
|
|
* Menu Toggle Behaviors
|
|
*
|
|
* @param {Element} element
|
|
*/
|
|
var navMenu = function ( buttonId, inputId ) {
|
|
var wrapper = document.body;
|
|
|
|
var toggleButton = document.getElementById( buttonId );
|
|
var toggleInput = document.getElementById( inputId );
|
|
|
|
if ( toggleButton ) {
|
|
toggleButton.onclick = function() {
|
|
if ( true == toggleInput.checked ) {
|
|
wrapper.classList.remove( 'lock-scrolling' );
|
|
} else {
|
|
wrapper.classList.add( 'lock-scrolling' );
|
|
}
|
|
|
|
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() {
|
|
navMenu( 'toggle-menu', 'toggle' );
|
|
navMenu( 'toggle-cart', 'woocommerce-toggle' );
|
|
} );
|
|
} )(); |