|
@@ -3,59 +3,69 @@
|
|
*
|
|
*
|
|
* Required to open and close the mobile navigation.
|
|
* Required to open and close the mobile navigation.
|
|
*/
|
|
*/
|
|
-( function() {
|
|
|
|
-
|
|
|
|
|
|
+( function () {
|
|
/**
|
|
/**
|
|
* Menu Toggle Behaviors
|
|
* Menu Toggle Behaviors
|
|
*
|
|
*
|
|
* @param {Element} element
|
|
* @param {Element} element
|
|
*/
|
|
*/
|
|
- var navMenu = function ( id ){
|
|
|
|
- var wrapper = document.body; // this is the element to which a CSS class is added when a mobile nav menu is open
|
|
|
|
- var openButton = document.getElementById( id + '-open-menu' );
|
|
|
|
- var closeButton = document.getElementById( id + '-close-menu' );
|
|
|
|
|
|
+ var navMenu = function ( id ) {
|
|
|
|
+ var wrapper = document.body; // this is the element to which a CSS class is added when a mobile nav menu is open
|
|
|
|
+ var openButton = document.getElementById( id + '-open-menu' );
|
|
|
|
+ var closeButton = document.getElementById( id + '-close-menu' );
|
|
|
|
|
|
- if ( openButton && closeButton ){
|
|
|
|
- openButton.onclick = function() {
|
|
|
|
|
|
+ if ( openButton && closeButton ) {
|
|
|
|
+ openButton.onclick = function () {
|
|
wrapper.classList.add( id + '-navigation-open' );
|
|
wrapper.classList.add( id + '-navigation-open' );
|
|
wrapper.classList.add( 'lock-scrolling' );
|
|
wrapper.classList.add( 'lock-scrolling' );
|
|
closeButton.focus();
|
|
closeButton.focus();
|
|
- }
|
|
|
|
|
|
+ };
|
|
|
|
|
|
- closeButton.onclick = function() {
|
|
|
|
|
|
+ closeButton.onclick = function () {
|
|
wrapper.classList.remove( id + '-navigation-open' );
|
|
wrapper.classList.remove( id + '-navigation-open' );
|
|
wrapper.classList.remove( 'lock-scrolling' );
|
|
wrapper.classList.remove( 'lock-scrolling' );
|
|
openButton.focus();
|
|
openButton.focus();
|
|
- }
|
|
|
|
|
|
+ };
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
/**
|
|
* Trap keyboard navigation in the menu modal.
|
|
* Trap keyboard navigation in the menu modal.
|
|
* Adapted from TwentyTwenty
|
|
* Adapted from TwentyTwenty
|
|
*/
|
|
*/
|
|
- document.addEventListener( 'keydown', function( event ) {
|
|
|
|
- if ( ! wrapper.classList.contains( id + '-navigation-open' ) ){
|
|
|
|
|
|
+ document.addEventListener( 'keydown', function ( event ) {
|
|
|
|
+ if ( ! wrapper.classList.contains( id + '-navigation-open' ) ) {
|
|
return;
|
|
return;
|
|
- }
|
|
|
|
- var modal, elements, selectors, lastEl, firstEl, activeEl, tabKey, shiftKey, escKey;
|
|
|
|
|
|
+ }
|
|
|
|
+ var modal,
|
|
|
|
+ elements,
|
|
|
|
+ selectors,
|
|
|
|
+ lastEl,
|
|
|
|
+ firstEl,
|
|
|
|
+ activeEl,
|
|
|
|
+ tabKey,
|
|
|
|
+ shiftKey,
|
|
|
|
+ escKey;
|
|
|
|
|
|
modal = document.querySelector( '.' + id + '-navigation' );
|
|
modal = document.querySelector( '.' + id + '-navigation' );
|
|
- selectors = "input, a, button";
|
|
|
|
|
|
+ selectors = 'input, a, button';
|
|
elements = modal.querySelectorAll( selectors );
|
|
elements = modal.querySelectorAll( selectors );
|
|
elements = Array.prototype.slice.call( elements );
|
|
elements = Array.prototype.slice.call( elements );
|
|
- elements = elements.filter( function( el ) {
|
|
|
|
|
|
+ elements = elements.filter( function ( el ) {
|
|
return ! el.classList.contains( 'woocommerce-cart-link' ); // ignore this element because it's hidden on mobile
|
|
return ! el.classList.contains( 'woocommerce-cart-link' ); // ignore this element because it's hidden on mobile
|
|
- });
|
|
|
|
|
|
+ } );
|
|
tabKey = event.keyCode === 9;
|
|
tabKey = event.keyCode === 9;
|
|
shiftKey = event.shiftKey;
|
|
shiftKey = event.shiftKey;
|
|
escKey = event.keyCode === 27;
|
|
escKey = event.keyCode === 27;
|
|
activeEl = document.activeElement;
|
|
activeEl = document.activeElement;
|
|
lastEl = elements[ elements.length - 1 ];
|
|
lastEl = elements[ elements.length - 1 ];
|
|
- firstEl = elements[0];
|
|
|
|
|
|
+ firstEl = elements[ 0 ];
|
|
|
|
|
|
if ( escKey ) {
|
|
if ( escKey ) {
|
|
event.preventDefault();
|
|
event.preventDefault();
|
|
- wrapper.classList.remove( id + '-navigation-open', 'lock-scrolling' );
|
|
|
|
|
|
+ wrapper.classList.remove(
|
|
|
|
+ id + '-navigation-open',
|
|
|
|
+ 'lock-scrolling'
|
|
|
|
+ );
|
|
openButton.focus();
|
|
openButton.focus();
|
|
}
|
|
}
|
|
|
|
|
|
@@ -73,11 +83,11 @@
|
|
if ( tabKey && firstEl === lastEl ) {
|
|
if ( tabKey && firstEl === lastEl ) {
|
|
event.preventDefault();
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
- });
|
|
|
|
- }
|
|
|
|
|
|
+ } );
|
|
|
|
+ };
|
|
|
|
|
|
- window.addEventListener( 'load', function() {
|
|
|
|
|
|
+ window.addEventListener( 'load', function () {
|
|
new navMenu( 'primary' );
|
|
new navMenu( 'primary' );
|
|
new navMenu( 'woo' );
|
|
new navMenu( 'woo' );
|
|
- });
|
|
|
|
-} )();
|
|
|
|
|
|
+ } );
|
|
|
|
+} )();
|