/**

[0] Fix | Delete

* File primary-navigation.js.

[1] Fix | Delete

*

[2] Fix | Delete

* Required to open and close the mobile navigation.

[3] Fix | Delete

*/

[4] Fix | Delete

[5] Fix | Delete

/**

[6] Fix | Delete

* Toggle an attribute's value

[7] Fix | Delete

*

[8] Fix | Delete

* @param {Element} el - The element.

[9] Fix | Delete

* @param {boolean} withListeners - Whether we want to add/remove listeners or not.

[10] Fix | Delete

* @since Twenty Twenty-One 1.0

[11] Fix | Delete

*/

[12] Fix | Delete

function twentytwentyoneToggleAriaExpanded( el, withListeners ) {

[13] Fix | Delete

if ( 'true' !== el.getAttribute( 'aria-expanded' ) ) {

[14] Fix | Delete

el.setAttribute( 'aria-expanded', 'true' );

[15] Fix | Delete

twentytwentyoneSubmenuPosition( el.parentElement );

[16] Fix | Delete

if ( withListeners ) {

[17] Fix | Delete

document.addEventListener( 'click', twentytwentyoneCollapseMenuOnClickOutside );

[18] Fix | Delete

}

[19] Fix | Delete

} else {

[20] Fix | Delete

el.setAttribute( 'aria-expanded', 'false' );

[21] Fix | Delete

if ( withListeners ) {

[22] Fix | Delete

document.removeEventListener( 'click', twentytwentyoneCollapseMenuOnClickOutside );

[23] Fix | Delete

}

[24] Fix | Delete

}

[25] Fix | Delete

}

[26] Fix | Delete

[27] Fix | Delete

function twentytwentyoneCollapseMenuOnClickOutside( event ) {

[28] Fix | Delete

if ( ! document.getElementById( 'site-navigation' ).contains( event.target ) ) {

[29] Fix | Delete

document.getElementById( 'site-navigation' ).querySelectorAll( '.sub-menu-toggle' ).forEach( function( button ) {

[30] Fix | Delete

button.setAttribute( 'aria-expanded', 'false' );

[31] Fix | Delete

} );

[32] Fix | Delete

}

[33] Fix | Delete

}

[34] Fix | Delete

[35] Fix | Delete

/**

[36] Fix | Delete

* Changes the position of submenus so they always fit the screen horizontally.

[37] Fix | Delete

*

[38] Fix | Delete

* @param {Element} li - The li element.

[39] Fix | Delete

*/

[40] Fix | Delete

function twentytwentyoneSubmenuPosition( li ) {

[41] Fix | Delete

var subMenu = li.querySelector( 'ul.sub-menu' ),

[42] Fix | Delete

rect,

[43] Fix | Delete

right,

[44] Fix | Delete

left,

[45] Fix | Delete

windowWidth;

[46] Fix | Delete

[47] Fix | Delete

if ( ! subMenu ) {

[48] Fix | Delete

return;

[49] Fix | Delete

}

[50] Fix | Delete

[51] Fix | Delete

rect = subMenu.getBoundingClientRect();

[52] Fix | Delete

right = Math.round( rect.right );

[53] Fix | Delete

left = Math.round( rect.left );

[54] Fix | Delete

windowWidth = Math.round( window.innerWidth );

[55] Fix | Delete

[56] Fix | Delete

if ( right > windowWidth ) {

[57] Fix | Delete

subMenu.classList.add( 'submenu-reposition-right' );

[58] Fix | Delete

} else if ( document.body.classList.contains( 'rtl' ) && left < 0 ) {

[59] Fix | Delete

subMenu.classList.add( 'submenu-reposition-left' );

[60] Fix | Delete

}

[61] Fix | Delete

}

[62] Fix | Delete

[63] Fix | Delete

/**

[64] Fix | Delete

* Handle clicks on submenu toggles.

[65] Fix | Delete

*

[66] Fix | Delete

* @param {Element} el - The element.

[67] Fix | Delete

*/

[68] Fix | Delete

function twentytwentyoneExpandSubMenu( el ) { // jshint ignore:line

[69] Fix | Delete

// Close other expanded items.

[70] Fix | Delete

el.closest( 'nav' ).querySelectorAll( '.sub-menu-toggle' ).forEach( function( button ) {

[71] Fix | Delete

if ( button !== el ) {

[72] Fix | Delete

button.setAttribute( 'aria-expanded', 'false' );

[73] Fix | Delete

}

[74] Fix | Delete

} );

[75] Fix | Delete

[76] Fix | Delete

// Toggle aria-expanded on the button.

[77] Fix | Delete

twentytwentyoneToggleAriaExpanded( el, true );

[78] Fix | Delete

[79] Fix | Delete

// On tab-away collapse the menu.

[80] Fix | Delete

el.parentNode.querySelectorAll( 'ul > li:last-child > a' ).forEach( function( linkEl ) {

[81] Fix | Delete

linkEl.addEventListener( 'blur', function( event ) {

[82] Fix | Delete

if ( ! el.parentNode.contains( event.relatedTarget ) ) {

[83] Fix | Delete

el.setAttribute( 'aria-expanded', 'false' );

[84] Fix | Delete

}

[85] Fix | Delete

} );

[86] Fix | Delete

} );

[87] Fix | Delete

}

[88] Fix | Delete

[89] Fix | Delete

( function() {

[90] Fix | Delete

/**

[91] Fix | Delete

* Menu Toggle Behaviors

[92] Fix | Delete

*

[93] Fix | Delete

* @param {string} id - The ID.

[94] Fix | Delete

*/

[95] Fix | Delete

var navMenu = function( id ) {

[96] Fix | Delete

var wrapper = document.body, // this is the element to which a CSS class is added when a mobile nav menu is open

[97] Fix | Delete

mobileButton = document.getElementById( id + '-mobile-menu' );

[98] Fix | Delete

[99] Fix | Delete

if ( mobileButton ) {

[100] Fix | Delete

mobileButton.onclick = function() {

[101] Fix | Delete

wrapper.classList.toggle( id + '-navigation-open' );

[102] Fix | Delete

wrapper.classList.toggle( 'lock-scrolling' );

[103] Fix | Delete

twentytwentyoneToggleAriaExpanded( mobileButton );

[104] Fix | Delete

mobileButton.focus();

[105] Fix | Delete

};

[106] Fix | Delete

}

[107] Fix | Delete

/**

[108] Fix | Delete

* Trap keyboard navigation in the menu modal.

[109] Fix | Delete

* Adapted from TwentyTwenty

[110] Fix | Delete

*/

[111] Fix | Delete

document.addEventListener( 'keydown', function( event ) {

[112] Fix | Delete

var modal, elements, selectors, lastEl, firstEl, activeEl, tabKey, shiftKey, escKey;

[113] Fix | Delete

if ( ! wrapper.classList.contains( id + '-navigation-open' ) ) {

[114] Fix | Delete

return;

[115] Fix | Delete

}

[116] Fix | Delete

[117] Fix | Delete

modal = document.querySelector( '.' + id + '-navigation' );

[118] Fix | Delete

selectors = 'input, a, button';

[119] Fix | Delete

elements = modal.querySelectorAll( selectors );

[120] Fix | Delete

elements = Array.prototype.slice.call( elements );

[121] Fix | Delete

tabKey = event.keyCode === 9;

[122] Fix | Delete

shiftKey = event.shiftKey;

[123] Fix | Delete

escKey = event.keyCode === 27;

[124] Fix | Delete

activeEl = document.activeElement; // eslint-disable-line @wordpress/no-global-active-element

[125] Fix | Delete

lastEl = elements[ elements.length - 1 ];

[126] Fix | Delete

firstEl = elements[0];

[127] Fix | Delete

[128] Fix | Delete

if ( escKey ) {

[129] Fix | Delete

event.preventDefault();

[130] Fix | Delete

wrapper.classList.remove( id + '-navigation-open', 'lock-scrolling' );

[131] Fix | Delete

twentytwentyoneToggleAriaExpanded( mobileButton );

[132] Fix | Delete

mobileButton.focus();

[133] Fix | Delete

}

[134] Fix | Delete

[135] Fix | Delete

if ( ! shiftKey && tabKey && lastEl === activeEl ) {

[136] Fix | Delete

event.preventDefault();

[137] Fix | Delete

firstEl.focus();

[138] Fix | Delete

}

[139] Fix | Delete

[140] Fix | Delete

if ( shiftKey && tabKey && firstEl === activeEl ) {

[141] Fix | Delete

event.preventDefault();

[142] Fix | Delete

lastEl.focus();

[143] Fix | Delete

}

[144] Fix | Delete

[145] Fix | Delete

// If there are no elements in the menu, don't move the focus

[146] Fix | Delete

if ( tabKey && firstEl === lastEl ) {

[147] Fix | Delete

event.preventDefault();

[148] Fix | Delete

}

[149] Fix | Delete

} );

[150] Fix | Delete

[151] Fix | Delete

/**

[152] Fix | Delete

* Close menu and scroll to anchor when an anchor link is clicked.

[153] Fix | Delete

* Adapted from TwentyTwenty.

[154] Fix | Delete

*/

[155] Fix | Delete

document.addEventListener( 'click', function( event ) {

[156] Fix | Delete

// If target onclick is <a> with # within the href attribute

[157] Fix | Delete

if ( event.target.hash && event.target.hash.includes( '#' ) ) {

[158] Fix | Delete

wrapper.classList.remove( id + '-navigation-open', 'lock-scrolling' );

[159] Fix | Delete

twentytwentyoneToggleAriaExpanded( mobileButton );

[160] Fix | Delete

// Wait 550 and scroll to the anchor.

[161] Fix | Delete

setTimeout(function () {

[162] Fix | Delete

var anchor = document.getElementById(event.target.hash.slice(1));

[163] Fix | Delete

anchor.scrollIntoView();

[164] Fix | Delete

}, 550);

[165] Fix | Delete

}

[166] Fix | Delete

} );

[167] Fix | Delete

[168] Fix | Delete

document.getElementById( 'site-navigation' ).querySelectorAll( '.menu-wrapper > .menu-item-has-children' ).forEach( function( li ) {

[169] Fix | Delete

li.addEventListener( 'mouseenter', function() {

[170] Fix | Delete

this.querySelector( '.sub-menu-toggle' ).setAttribute( 'aria-expanded', 'true' );

[171] Fix | Delete

twentytwentyoneSubmenuPosition( li );

[172] Fix | Delete

} );

[173] Fix | Delete

li.addEventListener( 'mouseleave', function() {

[174] Fix | Delete

this.querySelector( '.sub-menu-toggle' ).setAttribute( 'aria-expanded', 'false' );

[175] Fix | Delete

} );

[176] Fix | Delete

} );

[177] Fix | Delete

};

[178] Fix | Delete

[179] Fix | Delete

window.addEventListener( 'load', function() {

[180] Fix | Delete

new navMenu( 'primary' );

[181] Fix | Delete

} );

[182] Fix | Delete

}() );

[183] Fix | Delete

[184] Fix | Delete