1/** 2 * File fronend.js 3 * 4 * Handles toggling the navigation menu for small screens and enables tab 5 * support for dropdown menus. 6 * 7 * @package Astra 8 */ 9 10/** 11 * Get all of an element's parent elements up the DOM tree 12 * 13 * @param {Node} elem The element. 14 * @param {String} selector Selector to match against [optional]. 15 * @return {Array} The parent elements. 16 */ 17var astraGetParents = function ( elem, selector ) { 18 19 // Setup parents array. 20 var parents = []; 21 22 // Get matching parent elements. 23 for ( ; elem && elem !== document; elem = elem.parentNode ) { 24 25 // Add matching parents to array. 26 if ( selector ) { 27 if ( elem.matches( selector ) ) { 28 parents.push( elem ); 29 } 30 } else { 31 parents.push( elem ); 32 } 33 } 34 return parents; 35}; 36 37 38/** 39 * Toggle Class funtion 40 * 41 * @param {Node} elem The element. 42 * @param {String} selector Selector to match against [optional]. 43 * @return {Array} The parent elements. 44 */ 45var astraToggleClass = function ( el, className ) { 46 if ( el.classList.contains( className ) ) { 47 el.classList.remove( className ); 48 } else { 49 el.classList.add( className ); 50 } 51}; 52 53 54/** 55 * Trigget custom JS Event. 56 * 57 * @since 1.4.6 58 * 59 * @link https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent 60 * @param {Node} el Dom Node element on which the event is to be triggered. 61 * @param {Node} typeArg A DOMString representing the name of the event. 62 * @param {String} A CustomEventInit dictionary, having the following fields: 63 * "detail", optional and defaulting to null, of type any, that is an event-dependent value associated with the event. 64 */ 65var astraTriggerEvent = function astraTriggerEvent( el, typeArg ) { 66 var customEventInit = 67 arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; 68 69 var event = new CustomEvent(typeArg, customEventInit); 70 el.dispatchEvent(event); 71}; 72 73/** 74 * Scroll to ID/Top with smooth scroll behavior. 75 * 76 * @since x.x.x 77 * 78 * @param {Event} e Event which is been fired. 79 * @param {String} top offset from top. 80 */ 81astraSmoothScroll = function astraSmoothScroll( e, top ) { 82 e.preventDefault(); 83 window.scrollTo({ 84 top: top, 85 left: 0, 86 behavior: 'smooth' 87 }); 88}; 89 90/** 91 * Scroll to Top trigger visibility adjustments. 92 * 93 * @since x.x.x 94 * 95 * @param {Node} masthead Page header. 96 * @param {Node} astScrollTop Scroll to Top selector. 97 */ 98astScrollToTopHandler = function ( masthead, astScrollTop ) { 99 100 var content = getComputedStyle(astScrollTop).content, 101 device = astScrollTop.dataset.onDevices; 102 content = content.replace( /[^0-9]/g, '' ); 103 104 if( 'both' == device || ( 'desktop' == device && '769' == content ) || ( 'mobile' == device && '' == content ) ) { 105 // Get current window / document scroll. 106 var scrollTop = window.pageYOffset || document.body.scrollTop; 107 // If masthead found. 108 if( masthead && masthead.length ) { 109 if (scrollTop > masthead.offsetHeight + 100) { 110 astScrollTop.style.display = "block"; 111 } else { 112 astScrollTop.style.display = "none"; 113 } 114 } else { 115 // If there is no masthead set default start scroll 116 if ( window.pageYOffset > 300 ) { 117 astScrollTop.style.display = "block"; 118 } else { 119 astScrollTop.style.display = "none"; 120 } 121 } 122 } else { 123 astScrollTop.style.display = "none"; 124 } 125}; 126 127( function() { 128 129 var menu_toggle_all = document.querySelectorAll( '#masthead .main-header-menu-toggle' ), 130 main_header_masthead = document.getElementById('masthead'), 131 menu_click_listeners_nav = {}, 132 mobileHeaderType = '', 133 body = document.body, 134 mobileHeader = ''; 135 136 if ( undefined !== main_header_masthead && null !== main_header_masthead ) { 137 138 mobileHeader = main_header_masthead.querySelector("#ast-mobile-header"); 139 } 140 141 if ( '' !== mobileHeader && null !== mobileHeader ) { 142 143 mobileHeaderType = mobileHeader.dataset.type; 144 } 145 146 document.addEventListener( 'astMobileHeaderTypeChange', updateHeaderType, false ); 147 148 /** 149 * Updates the header type. 150 */ 151 function updateHeaderType( e ) { 152 mobileHeaderType = e.detail.type; 153 var popupTrigger = document.querySelectorAll( '.menu-toggle' ); 154 155 if( 'dropdown' === mobileHeaderType ) { 156 157 document.getElementById( 'ast-mobile-popup' ).classList.remove( 'active', 'show' ); 158 updateTrigger('updateHeader'); 159 } 160 161 if ( 'off-canvas' === mobileHeaderType ) { 162 popupTrigger.forEach(function (trigger) { 163 if (trigger && trigger.classList.contains('toggled')) { 164 trigger.click(); 165 } 166 }); 167 } 168 169 init(mobileHeaderType); 170 } 171 172 function syncToggledClass() { 173 const buttons = document.querySelectorAll('.menu-toggle'); 174 const allToggled = Array.from(buttons).every(button => button.classList.contains('toggled')); 175 176 buttons.forEach(button => { 177 if (allToggled) { 178 button.classList.remove('toggled'); 179 button.setAttribute('aria-expanded', 'false'); 180 } else { 181 button.classList.add('toggled'); 182 button.setAttribute('aria-expanded', 'true'); 183 } 184 }); 185 } 186 187 document.addEventListener('click', function (e) { 188 const button = e.target.closest('.menu-toggle'); 189 if (button && mobileHeaderType === 'dropdown') { 190 if (typeof astraAddon === 'undefined') { 191 button.classList.toggle('toggled'); 192 syncToggledClass(); 193 } 194 const isToggled = button.classList.contains('toggled'); 195 button.setAttribute('aria-expanded', isToggled ? 'true' : 'false'); 196 } 197 }); 198 199 200 /** 201 * Opens the Popup when trigger is clicked. 202 */ 203 popupTriggerClick = function ( event ) { 204 205 var triggerType = event.currentTarget.trigger_type; 206 var popupWrap = document.getElementById( 'ast-mobile-popup' ); 207 208 if ( ! body.classList.contains( 'ast-popup-nav-open' ) ) { 209 body.classList.add( 'ast-popup-nav-open' ); 210 } 211 212 if ( ! body.classList.contains( 'ast-main-header-nav-open' ) && 'mobile' !== triggerType ) { 213 body.classList.add( 'ast-main-header-nav-open' ); 214 } 215 216 if ( ! document.documentElement.classList.contains( 'ast-off-canvas-active' ) ) { 217 document.documentElement.classList.add( 'ast-off-canvas-active' ); 218 } 219 220 if ( 'desktop' === triggerType ) { 221 222 popupWrap.querySelector( '.ast-mobile-popup-content' ).style.display = 'none'; 223 popupWrap.querySelector( '.ast-desktop-popup-content' ).style.display = 'block'; 224 } 225 if ( 'mobile' === triggerType ) { 226 227 popupWrap.querySelector( '.ast-desktop-popup-content' ).style.display = 'none'; 228 popupWrap.querySelector( '.ast-mobile-popup-content' ).style.display = 'block'; 229 } 230 if (event && event.currentTarget && event.currentTarget.style) { 231 event.currentTarget.style.display = 'none'; 232 } 233 234 popupWrap.classList.add( 'active', 'show' ); 235 236 const menuToggleClose = document.getElementById( 'menu-toggle-close' ); 237 menuToggleClose?.focus(); 238 } 239 240 /** 241 * Closes the Trigger when Popup is Closed. 242 */ 243 function updateTrigger(currentElement) { 244 mobileHeader = main_header_masthead.querySelector( "#ast-mobile-header" ); 245 var parent_li_sibling = ''; 246 247 if( undefined !== mobileHeader && null !== mobileHeader && 'dropdown' === mobileHeader.dataset.type && 'updateHeader' !== currentElement ) { 248 return; 249 } 250 if ( undefined !== currentElement && 'updateHeader' !== currentElement ) { 251 252 parent_li_sibling = currentElement.closest( '.ast-mobile-popup-inner' ).querySelectorAll('.menu-item-has-children'); 253 254 } else { 255 var popup = document.querySelector( '#ast-mobile-popup' ); 256 parent_li_sibling = popup.querySelectorAll('.menu-item-has-children'); 257 258 } 259 260 parent_li_sibling.forEach((li_sibling) => { 261 li_sibling.classList.remove('ast-submenu-expanded'); 262 263 const all_sub_menu = Array.from(li_sibling.querySelectorAll('.sub-menu')); 264 all_sub_menu.forEach((sub_menu) => { 265 if (!sub_menu.hasAttribute('data-initial-display')) { 266 sub_menu.setAttribute('data-initial-display', window.getComputedStyle(sub_menu).display); 267 } 268 269 if (sub_menu.getAttribute('data-initial-display') === 'block') { 270 sub_menu.style.display = 'block'; 271 } else { 272 sub_menu.style.display = 'none'; 273 } 274 }); 275 }); 276 277 var popupTrigger = document.querySelectorAll( '.menu-toggle' ); 278 279 document.body.classList.remove( 'ast-main-header-nav-open', 'ast-popup-nav-open' ); 280 document.documentElement.classList.remove( 'ast-off-canvas-active' ); 281 282 for ( var item = 0; item < popupTrigger.length; item++ ) { 283 284 popupTrigger[item].classList.remove( 'toggled' ); 285 popupTrigger[item].setAttribute('aria-expanded', 'false'); 286 287 popupTrigger[item].style.display = 'flex'; 288 } 289 } 290
291 /** 292 * Main Init Function. 293 */ 294 function init( mobileHeaderType ) { 295 296 var popupTriggerMobile = document.querySelectorAll( '#ast-mobile-header .menu-toggle' ); 297 var popupTriggerDesktop = document.querySelectorAll( '#ast-desktop-header .menu-toggle' ); 298 299 if ( undefined === mobileHeaderType && null !== main_header_masthead ) { 300 301 mobileHeader = main_header_masthead.querySelector("#ast-mobile-header"); 302 if( mobileHeader ) { 303 mobileHeaderType = mobileHeader.dataset.type; 304 } else { 305 var desktopHeader = main_header_masthead.querySelector("#ast-desktop-header"); 306 if ( desktopHeader ) { 307 308 mobileHeaderType = desktopHeader.dataset.toggleType; 309 } else { 310 return; 311 } 312 } 313 } 314 315 if ( 'off-canvas' === mobileHeaderType ) { 316 var popupClose = document.getElementById( 'menu-toggle-close' ), 317 popupInner = document.querySelector( '.ast-mobile-popup-inner' ); 318 319 if ( undefined === popupInner || null === popupInner ) { 320 return; // if toggel button component is not loaded. 321 } 322 popupLinks = popupInner.getElementsByTagName( 'a' ); 323 324 // --- Focus Trap Implementation Start --- 325 document.removeEventListener( 'keydown', astraOffcanvasTrapTabKey ); 326 327 function astraOffcanvasTrapTabKey( e ) { 328 let popup = document.getElementById( 'ast-mobile-popup' ); 329 if ( ! popup || ! popup.classList.contains( 'active' ) || e.key !== 'Tab' ) { 330 return; 331 } 332 let focusableElements = popupInner.querySelectorAll( 333 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' 334 ); 335 focusableElements = Array.prototype.filter.call( focusableElements, function ( element ) { 336 return ( 337 element.offsetWidth > 0 && element.offsetHeight > 0 && window.getComputedStyle( element ).visibility !== 'hidden' 338 ); 339 } ); 340 if ( focusableElements.length === 0 ) return; 341 let firstElement = focusableElements[ 0 ]; 342 let lastElement = focusableElements[ focusableElements.length - 1 ]; 343 if ( e.shiftKey && document.activeElement === firstElement ) { 344 e.preventDefault(); 345 lastElement.focus(); 346 } else if ( ! e.shiftKey && document.activeElement === lastElement ) { 347 e.preventDefault(); 348 firstElement.focus(); 349 } 350 } 351 document.addEventListener( 'keydown', astraOffcanvasTrapTabKey ); 352 353 // Remove focus trap when menu is closed 354 function removeAstraOffcanvasTrap() { 355 document.removeEventListener( 'keydown', astraOffcanvasTrapTabKey ); 356 } 357 if ( popupClose ) { 358 popupClose.addEventListener( 'click', removeAstraOffcanvasTrap ); 359 } 360 document.addEventListener( 'keyup', function ( event ) { 361 if ( event.key === 'Escape' ) { 362 removeAstraOffcanvasTrap(); 363 } 364 } ); 365 document.addEventListener( 'click', function ( event ) { 366 let target = event.target; 367 let modal = document.querySelector( '.ast-mobile-popup-drawer.active .ast-mobile-popup-overlay' ); 368 if ( target === modal ) { 369 removeAstraOffcanvasTrap(); 370 } 371 } ); 372 373 for ( var item = 0; item < popupTriggerMobile.length; item++ ) { 374 popupTriggerMobile[ item ].removeEventListener( 'click', astraNavMenuToggle, false ); 375 // Open the Popup when click on trigger 376 popupTriggerMobile[ item ].removeEventListener( 'click', popupTriggerClick ); 377 popupTriggerMobile[ item ].addEventListener( 'click', function(event) { 378 event.currentTarget.setAttribute('aria-expanded', 'true'); 379 popupTriggerClick(event); 380 const menu = document.querySelector('.ast-mobile-popup-drawer.active'); 381 if (!menu) { 382 removeAstraOffcanvasTrap(); 383 } 384 }, false ); 385 popupTriggerMobile[ item ].trigger_type = 'mobile'; 386 } 387 for ( var item = 0; item < popupTriggerDesktop.length; item++ ) { 388 popupTriggerDesktop[ item ].removeEventListener( 'click', astraNavMenuToggle, false ); 389 // Open the Popup when click on trigger 390 popupTriggerDesktop[ item ].removeEventListener( 'click', popupTriggerClick ); 391 popupTriggerDesktop[ item ].addEventListener( 'click', function(event) { 392 event.currentTarget.setAttribute('aria-expanded', 'true'); 393 popupTriggerClick(event); 394 }, false ); 395 popupTriggerDesktop[ item ].trigger_type = 'desktop'; 396 } 397 398 // Getting menu toggle button element. 399 const menuToggleButton = document.querySelector( '.ast-button-wrap .menu-toggle' ); 400 401 //Close Popup on CLose Button Click. 402 popupClose.addEventListener( 'click', function ( e ) { 403 document.getElementById( 'ast-mobile-popup' ).classList.remove( 'active', 'show' ); 404 updateTrigger( this ); 405 // Don't focus if we're in an iframe (e.g., Beaver Builder editor) 406 if ( window.self === window.top ) { 407 menuToggleButton?.focus(); 408 } 409 } ); 410 411 // Close Popup if esc is pressed. 412 document.addEventListener( 'keyup', function ( event ) { 413 if ( event.key === 'Escape' ) { 414 event.preventDefault(); 415 document.getElementById( 'ast-mobile-popup' ).classList.remove( 'active', 'show' ); 416 updateTrigger(); 417 menuToggleButton?.focus(); 418 } 419 } ); 420 421 // Close Popup on outside click. 422 document.addEventListener( 'click', function ( event ) { 423 var target = event.target; 424 var modal = document.querySelector( '.ast-mobile-popup-drawer.active .ast-mobile-popup-overlay' ); 425 if ( target === modal ) { 426 document.getElementById( 'ast-mobile-popup' ).classList.remove( 'active', 'show' ); 427 updateTrigger(); 428 menuToggleButton?.focus(); 429 } 430 } ); 431 432 // Close Popup on # link click inside Popup. 433 for ( let link = 0, len = popupLinks.length; link < len; link++ ) { 434 if ( 435 null !== popupLinks[ link ].getAttribute( 'href' ) && 436 ( popupLinks[ link ].getAttribute( 'href' ).startsWith( '#' ) || 437 -1 !== popupLinks[ link ].getAttribute( 'href' ).search( '#' ) ) && 438 ( ! popupLinks[ link ].parentElement.classList.contains( 'menu-item-has-children' ) || 439 ( popupLinks[ link ].parentElement.classList.contains( 'menu-item-has-children' ) && 440 document.querySelector( 'header.site-header' ).classList.contains( 'ast-builder
440-menu-toggle-icon' ) ) ) 441 ) { 442 popupLinks[ link ].addEventListener( 'click', triggerToggleClose, true ); 443 popupLinks[ link ].headerType = 'off-canvas'; 444 } 445 } 446 447 AstraToggleSetup(); 448 } else if ( 'dropdown' === mobileHeaderType ) { 449 450 var mobileDropdownContent = document.querySelectorAll( '.ast-mobile-header-content' ) || false, 451 desktopDropdownContent = document.querySelector( '.ast-desktop-header-content' ) || false; 452 453 // Close Popup on # link click inside Popup. 454 if ( mobileDropdownContent.length > 0 ) { 455 for ( let index = 0; index < mobileDropdownContent.length; index++ ) { 456 var mobileLinks = mobileDropdownContent[ index ].getElementsByTagName( 'a' ); 457 for ( link = 0, len = mobileLinks.length; link < len; link++ ) { 458 // Check if the link is not inside the tabs container 459 const isNotInsideTabsContainer = mobileLinks[ link ].closest( '.wp-block-uagb-tabs' ) === null; 460 461 if ( 462 null !== mobileLinks[ link ].getAttribute( 'href' ) && 463 ( mobileLinks[ link ].getAttribute( 'href' ).startsWith( '#' ) || 464 -1 !== mobileLinks[ link ].getAttribute( 'href' ).search( '#' ) ) && 465 ( ! mobileLinks[ link ].parentElement.classList.contains( 'menu-item-has-children' ) || 466 ( mobileLinks[ link ].parentElement.classList.contains( 'menu-item-has-children' ) && 467 document.querySelector( 'header.site-header' ).classList.contains( 'ast-builder-menu-toggle-icon' ) ) ) && 468 isNotInsideTabsContainer 469 ) { 470 mobileLinks[ link ].addEventListener( 'click', triggerToggleClose, true ); 471 mobileLinks[ link ].headerType = 'dropdown'; 472 } 473 } 474 } 475 } 476 477 // Close Popup on # link click inside desktop dropdown. 478 if ( desktopDropdownContent ) { 479 var desktopLinks = desktopDropdownContent.getElementsByTagName( 'a' ); 480 for ( link = 0, len = desktopLinks.length; link < len; link++ ) { 481 // Check if the link is not inside the tabs container. 482 const isNotInsideTabsContainer = desktopLinks[ link ].closest( '.wp-block-uagb-tabs' ) === null; 483 484 if ( 485 null !== desktopLinks[ link ].getAttribute( 'href' ) && 486 ( desktopLinks[ link ].getAttribute( 'href' ).startsWith( '#' ) || 487 -1 !== desktopLinks[ link ].getAttribute( 'href' ).search( '#' ) ) && 488 ( ! desktopLinks[ link ].parentElement.classList.contains( 'menu-item-has-children' ) || 489 ( desktopLinks[ link ].parentElement.classList.contains( 'menu-item-has-children' ) && 490 document.querySelector( 'header.site-header' ).classList.contains( 'ast-builder-menu-toggle-icon' ) ) ) && 491 isNotInsideTabsContainer 492 ) { 493 desktopLinks[ link ].addEventListener( 'click', triggerToggleClose, true ); 494 desktopLinks[ link ].headerType = 'dropdown'; 495 } 496 } 497 } 498 499 for ( var item = 0; item < popupTriggerMobile.length; item++ ) { 500 popupTriggerMobile[ item ].removeEventListener( 'click', popupTriggerClick, false ); 501 popupTriggerMobile[ item ].removeEventListener( 'click', astraNavMenuToggle ); 502 popupTriggerMobile[ item ].addEventListener( 'click', astraNavMenuToggle, false ); 503 popupTriggerMobile[ item ].trigger_type = 'mobile'; 504 } 505 for ( var item = 0; item < popupTriggerDesktop.length; item++ ) { 506 popupTriggerDesktop[ item ].removeEventListener( 'click', popupTriggerClick, false ); 507 popupTriggerDesktop[ item ].removeEventListener( 'click', astraNavMenuToggle ); 508 popupTriggerDesktop[ item ].addEventListener( 'click', astraNavMenuToggle, false ); 509 popupTriggerDesktop[ item ].trigger_type = 'desktop'; 510 } 511 512 AstraToggleSetup(); 513 } 514 515 } 516 517 function triggerToggleClose( event ) { 518 519 var headerType = event.currentTarget.headerType; 520 521 switch( headerType ) { 522 523 case 'dropdown': 524 525 var popupTrigger = document.querySelectorAll( '.menu-toggle.toggled' ); 526 527 for ( var item = 0; item < popupTrigger.length; item++ ) { 528 529 popupTrigger[item].click(); 530 } 531 break; 532 case 'off-canvas': 533 534 var popupClose = document.getElementById( 'menu-toggle-close' ); 535 536 popupClose.click(); 537 break; 538 default: 539 break; 540 } 541 } 542 543 window.addEventListener( 'load', function() { 544 init(); 545 } ); 546 document.addEventListener( 'astLayoutWidthChanged', function() { 547 init(); 548 } ); 549 550 document.addEventListener( 'astPartialContentRendered', function() { 551 552 menu_toggle_all = document.querySelectorAll( '.main-header-menu-toggle' ); 553 554 body.classList.remove("ast-main-header-nav-open"); 555 556 document.addEventListener( 'astMobileHeaderTypeChange', updateHeaderType, false ); 557 558 init(); 559 560 } ); 561 562 var mobile_width = ( null !== navigator.userAgent.match(/Android/i) && 'Android' === navigator.userAgent.match(/Android/i)[0] ) ? window.visualVie
562wport.width : window.innerWidth; 563 564 function AstraHandleResizeEvent() { 565 566 var menu_offcanvas_close = document.getElementById('menu-toggle-close'); 567 var menu_dropdown_close = document.querySelector('.menu-toggle.toggled'); 568 var desktop_header_content = document.querySelector('#masthead > #ast-desktop-header .ast-desktop-header-content'); 569 var elementor_editor = document.querySelector('.elementor-editor-active'); 570 571 if ( desktop_header_content ) { 572 desktop_header_content.style.display = 'none'; 573 } 574 var mobileResizeWidth = ( null !== navigator.userAgent.match(/Android/i) && 'Android' === navigator.userAgent.match(/Android/i)[0] ) ? window.visualViewport.width : window.innerWidth; 575 576 if ( mobileResizeWidth !== mobile_width ) { 577 if ( menu_dropdown_close && null === elementor_editor ) { 578 menu_dropdown_close.click(); 579 } 580 document.body.classList.remove( 'ast-main-header-nav-open', 'ast-popup-nav-open' ); 581 582 if( menu_offcanvas_close && null == elementor_editor ) { 583 menu_offcanvas_close.click(); 584 } 585 } 586 587 updateHeaderBreakPoint(); 588 589 AstraToggleSetup(); 590 591 } 592 593 window.addEventListener('resize', function(){ 594 // Skip resize event when keyboard display event triggers on devices. 595 if( 'INPUT' !== document.activeElement.tagName ) { 596 AstraHandleResizeEvent(); 597 } 598 } ); 599 600 document.addEventListener('DOMContentLoaded', function () { 601 AstraToggleSetup(); 602 /** 603 * Navigation Keyboard Navigation. 604 */ 605 var containerButton; 606 if ( body.classList.contains('ast-header-break-point') ) { 607 containerButton = document.getElementById( 'ast-mobile-header' ); 608 } else { 609 containerButton = document.getElementById( 'ast-desktop-header' ); 610 } 611 612 if( null !== containerButton ) { 613 var containerMenu = containerButton.querySelector( '.navigation-accessibility' ); 614 navigation_accessibility( containerMenu, containerButton ); 615 } 616 }); 617 618 var get_window_width = function () { 619 620 return window.innerWidth; 621 } 622 623 /* Add break point Class and related trigger */ 624 var updateHeaderBreakPoint = function () { 625 626 var ww = get_window_width(); 627 628 var break_point = astra.break_point; 629 630 /** 631 * Use matchMedia to evaluate the breakpoint using the same CSS engine that 632 * evaluates media queries. This guarantees JS and CSS always agree on which 633 * header should be visible, eliminating any sub-pixel or scrollbar-width 634 * mismatch between window.innerWidth and the actual CSS viewport width. 635 * 636 * The 0.99 offset mirrors the max-width: (break_point + 0.99)px rule used 637 * in the PHP dynamic CSS, so the transition point is identical in both. 638 * 639 * The 0 === ww guard handles a Chrome edge case where innerWidth returns 0 640 * when opening a URL via "Open in New Tab" — force desktop mode in that case. 641 */ 642 var isMobile = window.matchMedia( '(max-width: ' + ( parseFloat( break_point ) + 0.99 ) + 'px)' ).matches; 643 644 if ( ! isMobile || 0 === ww ) { 645 //remove menu toggled class. 646 if ( menu_toggle_all.length > 0 ) { 647 648 for (var i = 0; i < menu_toggle_all.length; i++) { 649 650 if( null !== menu_toggle_all[i] ) { 651 menu_toggle_all[i].classList.remove('toggled'); 652 } 653 } 654 } 655 body.classList.remove("ast-header-break-point"); 656 body.classList.add("ast-desktop"); 657 astraTriggerEvent(body, "astra-header-responsive-enabled"); 658 659 } else { 660 661 body.classList.add("ast-header-break-point"); 662 body.classList.remove("ast-desktop"); 663 astraTriggerEvent(body, "astra-header-responsive-disabled") 664 } 665 } 666 667 updateHeaderBreakPoint(); 668 body.classList.add( 'ast-header-loaded' ); 669 670 AstraToggleSubMenu = function( event ) { 671 672 event.preventDefault(); 673 674 var parent_li = this.parentNode; 675 676 // In Link mode, stop the click from bubbling when toggling a parent menu 677 // item's submenu. Without this, the click propagates to document-level 678 // handlers that close the entire dropdown (desktop and mobile). 679 if ( parent_li.classList.contains( 'menu-item-has-children' ) && 680 document.querySelector( 'header.site-header' ).classList.contains( 'ast-builder-menu-toggle-link' ) ) { 681 event.stopPropagation(); 682 } 683 684 if ('false' === event.target.getAttribute('aria-expanded') || ! event.target.getAttribute('aria-expanded')) { 685 event.target.setAttribute('aria-expanded', 'true'); 686 } else { 687 event.target.setAttribute('aria-expanded', 'false'); 688 } 689 690 if ( parent_li.classList.contains('ast-submenu-expanded') && document.querySelector('header.site-header').classList.contains('ast-builder
690-menu-toggle-link') ) { 691 692 if (!this.classList.contains('ast-menu-toggle')) { 693 694 var link = parent_li.querySelector('a').getAttribute('href'); 695 if ( '' !== link && '#' !== link) { 696 window.location = link; 697 } 698 } 699 } 700 701 var parent_li_child = parent_li.querySelectorAll('.menu-item-has-children'); 702 for (var j = 0; j < parent_li_child.length; j++) { 703 704 parent_li_child[j].classList.remove('ast-submenu-expanded'); 705 var parent_li_child_sub_menu = parent_li_child[j].querySelector('.sub-menu, .children'); 706 if( null !== parent_li_child_sub_menu ) { 707 parent_li_child_sub_menu.style.display = 'none'; 708 } 709 } 710 711 var parent_li_sibling = parent_li.parentNode.querySelectorAll('.menu-item-has-children'); 712 for (var j = 0; j < parent_li_sibling.length; j++) { 713 714 if (parent_li_sibling[j] != parent_li) { 715 716 parent_li_sibling[j].classList.remove('ast-submenu-expanded'); 717 var all_sub_menu = parent_li_sibling[j].querySelectorAll('.sub-menu'); 718 for (var k = 0; k < all_sub_menu.length; k++) { 719 all_sub_menu[k].style.display = 'none'; 720 } 721 } 722 } 723 724 if (parent_li.classList.contains('menu-item-has-children') ) { 725 astraToggleClass(parent_li, 'ast-submenu-expanded'); 726 if (parent_li.classList.contains('ast-submenu-expanded')) { 727 parent_li.querySelector('.sub-menu').style.display = 'block'; 728 } else { 729 parent_li.querySelector('.sub-menu').style.display = 'none'; 730 } 731 } 732 }; 733 734 AstraToggleSetup = function () { 735 736 if( typeof astraAddon != 'undefined' && typeof astraToggleSetupPro === "function" ) { 737 astraToggleSetupPro( mobileHeaderType, body, menu_click_listeners_nav ); 738 } else { 739 var flag = false; 740 var menuToggleAllLength; 741 if ( 'off-canvas' === mobileHeaderType || 'full-width' === mobileHeaderType ) { 742 // comma separated selector added, if menu is outside of Off-Canvas then submenu is not clickable, it work only for Off-Canvas area with dropdown style. 743 var __main_header_all = document.querySelectorAll( '#ast-mobile-popup, #ast-mobile-header' ); 744 var menu_toggle_all = document.querySelectorAll('#ast-mobile-header .main-header-menu-toggle'); 745 746 menuToggleAllLength = menu_toggle_all.length; 747 } else { 748 var __main_header_all = document.querySelectorAll( '#ast-mobile-header' ), 749 menu_toggle_all = document.querySelectorAll('#ast-mobile-header .main-header-menu-toggle'); 750 menuToggleAllLength = menu_toggle_all.length; 751 flag = menuToggleAllLength > 0 ? false : true; 752 753 menuToggleAllLength = flag ? 1 : menuToggleAllLength; 754 755 } 756 757 if ( menuToggleAllLength > 0 || flag ) { 758 759 for (var i = 0; i < menuToggleAllLength; i++) { 760 761 if ( ! flag ) { 762 763 menu_toggle_all[i].setAttribute('data-index', i); 764 765 if ( ! menu_click_listeners_nav[i] ) { 766 menu_click_listeners_nav[i] = menu_toggle_all[i]; 767 menu_toggle_all[i].removeEventListener('click', astraNavMenuToggle); 768 menu_toggle_all[i].addEventListener('click', astraNavMenuToggle, false); 769 } 770 } 771 772 if ('undefined' !== typeof __main_header_all[i]) { 773 774 // To handle the comma seprated selector added above we need this loop. 775 for( var mainHeaderCount =0; mainHeaderCount < __main_header_all.length; mainHeaderCount++ ){ 776 777 if (document.querySelector('header.site-header').classList.contains('ast-builder-menu-toggle-link')) { 778 var astra_menu_toggle = __main_header_all[mainHeaderCount].querySelectorAll('ul.main-header-menu .menu-item-has-children > .menu-link, ul.main-header-menu .ast-menu-toggle'); 779 } else { 780 var astra_menu_toggle = __main_header_all[mainHeaderCount].querySelectorAll('ul.main-header-menu .ast-menu-toggle'); 781 } 782 // Add Eventlisteners for Submenu. 783 if (astra_menu_toggle.length > 0) { 784 785 for (var j = 0; j < astra_menu_toggle.length; j++) { 786 astra_menu_toggle[j].removeEventListener('click', AstraToggleSubMenu); 787 astra_menu_toggle[j].addEventListener('click', AstraToggleSubMenu, false); 788 } 789 } 790 } 791 } 792 } 793 } 794 } 795 }; 796 797 astraNavMenuToggle = function ( event ) { 798 799 if( typeof astraAddon != 'undefined' ) { 800 astraNavMenuTogglePro( event, body, mobileHeaderType, this ); 801 } else { 802 803 event.preventDefault(); 804 var __main_header_all = document.querySelectorAll('#masthead > #ast-mobile-header .main-header-bar-navigation'); 805 menu_toggle_all = document.querySelectorAll( '#masthead > #ast-mobile-header .main-header-menu-toggle' ) 806 var event_index = '0'; 807 808 if ( null !== this.closest( '#ast-fixed-header' ) ) { 809 810 __main_header_all = document.querySelectorAll('#ast-fixed-header > #ast-mobile-header .main-header-bar-navigation'); 811 menu_toggle_all = document.querySelectorAll( '#ast-fixed-header .main-header-menu-toggle' ) 812 813 event_index = '0'; 814 } 815 816 if ('undefined' === typeof __main_header_all[event_index]) { 817 return false;
818 } 819 var menuHasChildren = __main_header_all[event_index].querySelectorAll('.menu-item-has-children'); 820 for (var i = 0; i < menuHasChildren.length; i++) { 821 menuHasChildren[i].classList.remove('ast-submenu-expanded'); 822 var menuHasChildrenSubMenu = menuHasChildren[i].querySelectorAll('.sub-menu'); 823 for (var j = 0; j < menuHasChildrenSubMenu.length; j++) { 824 menuHasChildrenSubMenu[j].style.display = 'none'; 825 } 826 } 827 828 var menu_class = this.getAttribute('class') || ''; 829 830 if ( menu_class.indexOf('main-header-menu-toggle') !== -1 ) { 831 astraToggleClass(__main_header_all[event_index], 'toggle-on'); 832 astraToggleClass(menu_toggle_all[event_index], 'toggled'); 833 if (__main_header_all[event_index].classList.contains('toggle-on')) { 834 __main_header_all[event_index].style.display = 'block'; 835 body.classList.add("ast-main-header-nav-open"); 836 } else { 837 __main_header_all[event_index].style.display = ''; 838 body.classList.remove("ast-main-header-nav-open"); 839 } 840 } 841 } 842 }; 843 844 body.addEventListener("astra-header-responsive-enabled", function () { 845 846 var __main_header_all = document.querySelectorAll('.main-header-bar-navigation'); 847 848 if (__main_header_all.length > 0) { 849 850 for (var i = 0; i < __main_header_all.length; i++) { 851 if (null != __main_header_all[i]) { 852 __main_header_all[i].classList.remove('toggle-on'); 853 __main_header_all[i].style.display = ''; 854 } 855 856 var sub_menu = __main_header_all[i].getElementsByClassName('sub-menu'); 857 for (var j = 0; j < sub_menu.length; j++) { 858 sub_menu[j].style.display = ''; 859 } 860 var child_menu = __main_header_all[i].getElementsByClassName('children'); 861 for (var k = 0; k < child_menu.length; k++) { 862 child_menu[k].style.display = ''; 863 } 864 865 var searchIcons = __main_header_all[i].getElementsByClassName('ast-search-menu-icon'); 866 for (var l = 0; l < searchIcons.length; l++) { 867 searchIcons[l].classList.remove('ast-dropdown-active'); 868 searchIcons[l].style.display = ''; 869 } 870 } 871 } 872 }, false); 873 874 875 /* Search Script */ 876 var SearchIcons = document.getElementsByClassName( 'astra-search-icon' ); 877 for (var i = 0; i < SearchIcons.length; i++) { 878 879 SearchIcons[i].onclick = function(event) { 880 if ( this.classList.contains( 'slide-search' ) ) { 881 event.preventDefault(); 882 var sibling = this.parentNode.parentNode.parentNode.querySelector( '.ast-search-menu-icon' ); 883 if ( ! sibling.classList.contains( 'ast-dropdown-active' ) ) { 884 sibling.classList.add( 'ast-dropdown-active' ); 885 sibling.querySelector( '.search-field' ).setAttribute('autocomplete','off'); 886 setTimeout(function() { 887 sibling.querySelector( '.search-field' ).focus(); 888 },200); 889 } else { 890 var searchTerm = sibling.querySelector( '.search-field' ).value || ''; 891 if( '' !== searchTerm ) { 892 sibling.querySelector( '.search-form' ).submit(); 893 } 894 sibling.classList.remove( 'ast-dropdown-active' ); 895 } 896 } 897 } 898 } 899 var SearchInputs = document.querySelectorAll( '.search-field' ); 900 SearchInputs.forEach(input => { 901 input.addEventListener('focus', function (e) { 902 var sibling = this.parentNode.parentNode.parentNode.querySelector( '.ast-search-menu-icon' ); 903 if ( sibling ) { 904 astraToggleClass( sibling, 'ast-dropdown-active' ); 905 } 906 }); 907 input.addEventListener('blur', function (e) { 908 var sibling = this.parentNode.parentNode.parentNode.querySelector( '.ast-search-menu-icon' ); 909 if ( sibling ) { 910 sibling.classList.remove( 'ast-dropdown-active' ); 911 astraToggleClass( sibling, 'ast-dropdown-active' ); 912 } 913 }); 914 }); 915 916 /* Hide Dropdown on body click*/ 917 body.onclick = function( event ) { 918 if ( typeof event.target.classList !== 'undefined' ) { 919 if ( ! event.target.classList.contains( 'ast-search-menu-icon' ) && ! event.target.closest( '.ast-search-menu-icon' ) && ! event.target.closest( '.ast-search-icon' ) ) {
920 var dropdownSearchWrap = document.getElementsByClassName( 'ast-search-menu-icon' ); 921 for (var i = 0; i < dropdownSearchWrap.length; i++) { 922 dropdownSearchWrap[i].classList.remove( 'ast-dropdown-active' ); 923 } 924 } 925 } 926 } 927 928 /** 929 * Navigation Keyboard Navigation. 930 */ 931 function navigation_accessibility(containerMenu, containerButton) { 932 if (!containerMenu || !containerButton) { 933 return; 934 } 935 var button = containerButton.getElementsByTagName('button')[0] || containerButton.getElementsByTagName('a')[0]; 936 if (!button || (button.classList.contains('astra-search-icon'))) { 937 return; 938 } 939 var menu = containerMenu.getElementsByTagName('ul')[0]; 940 941 // Hide menu toggle button if menu is empty and return early. 942 if (!menu) { 943 if (!button.classList.contains('custom-logo-link')) { 944 button.style.display = 'none'; 945 } 946 return; 947 } 948 949 if (!menu.className.includes('nav-menu')) { 950 menu.className += ' nav-menu'; 951 } 952 953 document.addEventListener('DOMContentLoaded', function () { 954 if ('off-canvas' === mobileHeaderType) { 955 var popupClose = document.getElementById('menu-toggle-close'); 956 if (popupClose) { 957 popupClose.onclick = function () { 958 var toggled = containerMenu.className.includes('toggled'); 959 containerMenu.className = toggled ? containerMenu.className.replace(' toggled', '') : containerMenu.className + ' toggled'; 960 button.setAttribute('aria-expanded', toggled ? 'false' : 'true'); 961 menu.setAttribute('aria-expanded', toggled ? 'false' : 'true'); 962 }; 963 } 964 } 965 }); 966 967 button.onclick = function () { 968 var toggled = containerMenu.className.includes('toggled'); 969 containerMenu.className = toggled ? containerMenu.className.replace(' toggled', '') : containerMenu.className + ' toggled'; 970 button.setAttribute('aria-expanded', toggled ? 'false' : 'true'); 971 menu.setAttribute('aria-expanded', toggled ? 'false' : 'true'); 972 }; 973 974 if (!astra.is_header_footer_builder_active) { 975 976 // Get all the link elements within the menu. 977 var links = menu.getElementsByTagName('a'); 978 var subMenus = menu.getElementsByTagName('ul'); 979 980 // Set menu items with submenus to aria-haspopup="true". 981 for (var i = 0, len = subMenus.length; i < len; i++) { 982 subMenus[i].parentNode.setAttribute('aria-haspopup', 'true'); 983 } 984 985 // Each time a menu link is focused or blurred, toggle focus. 986 for (var i = 0, len = links.length; i < len; i++) { 987 links[i].addEventListener('focus', toggleFocus, true); 988 links[i].addEventListener('blur', toggleFocus, true); 989 links[i].addEventListener('click', toggleClose, true); 990 } 991 } 992 993 if (astra.is_header_footer_builder_active) { 994 tabNavigation(); 995 } 996 } 997 998 // Tab navigation for accessibility. 999 function tabNavigation() { 1000 const dropdownToggleLinks = document.querySelectorAll('nav.site-navigation .menu-item-has-children > a .ast-header-navigation-arrow'); 1001 const siteNavigationSubMenu = document.querySelectorAll('nav.site-navigation .sub-menu'); 1002 const menuLi = document.querySelectorAll('nav.site-navigation .menu-item-has-children'); 1003 const megaMenuFullWidth = document.querySelectorAll('.astra-full-megamenu-wrapper'); 1004 1005 if (dropdownToggleLinks) { 1006 dropdownToggleLinks.forEach(element => { 1007 element.addEventListener('keydown', function (e) { 1008 if ('Enter' === e.key || ' ' === e.key) { 1009 // Check if the user is on a mobile device and prevent default and stop propagation if true. 1010 if ( /Mobi|Android|iPad|iPhone/i.test( navigator.userAgent ) ) { 1011 e.preventDefault(); 1012 e.stopPropagation(); 1013 } 1014 1015 const closestLi = e.target.closest('li'); 1016 const subMenu = closestLi.querySelector('.sub-menu'); 1017 const isMegaMenu = subMenu && subMenu.classList.contains('astra-megamenu'); 1018 1019 setTimeout(() => { 1020 if (!isMegaMenu) { 1021 subMenu.classList.toggle('toggled-on'); 1022 closestLi.classList.toggle('ast-menu-hover'); 1023 } else { 1024 const fullMegaMenuWrapper = closestLi.querySelector('.astra-full-megamenu-wrapper'); 1025 if (subMenu) subMenu.classList.toggle('astra-megamenu-focus'); 1026 if (fullMegaMenuWrapper) fullMegaMenuWrapper.classList.toggle('astra-megamenu-wrapper-focus'); 1027 closestLi.classList.toggle('ast-menu-hover'); 1028 } 1029 1030 const ariaExpanded = e.target.getAttribute('aria-expanded'); 1031 e.target.setAttribute('aria-expanded', ariaExpanded === 'false' || !ariaExpanded ? 'true' : 'false'); 1032 }, 10); 1033 } 1034 }); 1035 }); 1036 1037 if (siteNavigationSubMenu || menuLi) { 1038 document.addEventListener('click', function (e) { 1039 closeNavigationMenu(siteNavigationSubMenu, dropdownToggleLinks, menuLi, megaMenuFullWidth); 1040 }, false); 1041 1042 document.addEventListener('keydown', function (e) { 1043 if ('Escape' === e.key) { 1044 closeNavigationMenu(siteNavigationSubMenu, dropdownToggleLinks, menuLi, megaMenuFullWidth); 1045 } 1046 }, false); 1047 } 1048 } 1049 1050 const allParentMenu = document.querySelectorAll('nav.site-navigation .ast-nav-menu > .menu-item-has-children > a .ast-header-navigation-arrow'); 1051 1052 if (allParentMenu) { 1053 allParentMenu.forEach(element => { 1054 element.addEventListener('keydown', function (e) { 1055 if (!e.target.closest('li').classList.contains('ast-menu-hover') && 'Enter' === e.key) { 1056 closeNavigationMenu(siteNavigationSubMenu, dropdownToggleLinks, menuLi, megaMenuFullWidth); 1057 } 1058 }, false); 1059 }); 1060 } 1061 1062 const desktopMenu = document.querySelectorAll( '#ast-desktop-header .ast-builder
1062-layout-element.ast-builder-menu' ); 1063 desktopMenu.forEach( menu => { 1064 const desktopMenuItems = menu.querySelectorAll( '.main-header-menu .menu-item > a' ); 1065 desktopMenuItems.forEach( ( item ) => { 1066 item.addEventListener( 'focusout', function( e ) { 1067 const nextFocus = e.relatedTarget; 1068 const nextFocusMenuItem = nextFocus ? nextFocus.closest( '.menu-item' ) : null; 1069 const currentFocus = e.target; 1070 const currentMenuItem = currentFocus.closest( '.menu-item' ); 1071 const subMenuOpened = currentMenuItem.classList.contains( 'ast-menu-hover' ); 1072 const subMenu = currentMenuItem.querySelector( '.sub-menu' ); 1073 const wrapperSubmenu = currentMenuItem.closest('.sub-menu') 1074 const parentMenuItem = currentMenuItem.closest('.sub-menu')?.closest( '.menu-item-has-children' ); 1075 const childMenuItem = currentMenuItem.querySelector( '.menu-item' ); 1076 1077 1078 // If the next focus is the same menu item or a child menu item, don't close the submenu. 1079 if ( 1080 currentMenuItem == nextFocusMenuItem || 1081 ( childMenuItem && childMenuItem == nextFocusMenuItem ) 1082 ) { 1083 return; 1084 } 1085 1086 // If there's no next focus, close all submenus. 1087 if( nextFocusMenuItem == null ) { 1088 if ( wrapperSubmenu ) 1089 recursiveMenuCloseOnblur( wrapperSubmenu ); 1090 if ( subMenu ) 1091 recursiveMenuCloseOnblur( subMenu ); 1092 return; 1093 } 1094 1095 // If the next focus is the next or previous sibling, don't close all the submenu. 1096 if ( 1097 currentMenuItem.nextElementSibling == nextFocusMenuItem || 1098 currentMenuItem.previousElementSibling == nextFocusMenuItem 1099 ) { 1100 // If the submenu is opened, close it and remove the 'ast-menu-hover' class. 1101 if( subMenuOpened ) { 1102 recursiveMenuCloseOnblur( subMenu, false ); 1103 currentMenuItem.classList.remove( 'ast-menu-hover' ); 1104 } 1105 return; 1106 } 1107 1108 // If the next focus is the parent menu item, close the submenu till the inner child menu item submenu 1109 if ( parentMenuItem && parentMenuItem == nextFocusMenuItem ) { 1110 childSubMenu = currentMenuItem.querySelector( '.sub-menu' ); 1111 recursiveMenuCloseOnblur( childSubMenu, false ); 1112 return; 1113 } 1114 1115 // Here we are setting a depth level point while traversing from lower to upper submenu parents. 1116 // The next focus is the next sibling of any of the parent elements in the tree, then close submenus till that level. 1117 let tempParent = parentMenuItem; 1118 let subMenuCloseEnd = null; 1119 while ( tempParent != null ) { 1120 if( tempParent.nextElementSibling == nextFocusMenuItem ) { 1121 subMenuCloseEnd = tempParent.querySelector( '.sub-menu' ); 1122 break; 1123 } 1124 tempParent = tempParent.closest('.sub-menu')?.closest( '.menu-item-has-children' ); 1125 } 1126 1127 // Closes all the menus. 1128 if( wrapperSubmenu ) 1129 recursiveMenuCloseOnblur( wrapperSubmenu, true, subMenuCloseEnd ); 1130 1131 }); 1132 }); 1133 }); 1134 } 1135 1136 // Recursively closes the submenu upwards 1137 function recursiveMenuCloseOnblur( submenu, recursive = true, bubblingEnd = null ) { 1138 /** 1139 * Close the submenu 1140 */ 1141 submenu.classList.remove( 'toggled-on' ); 1142 submenu.classList.remove( 'astra-megamenu-focus' ); 1143 const toggle = submenu.closest( '.menu-item-has-children' ).querySelector( '.ast-header-navigation-arrow' ); 1144 if ( toggle ) { 1145 toggle.setAttribute( 'aria-expanded', 'false' ); 1146 } 1147 1148 /** 1149 * If there's a bubbling end, set recursive to true. This recursive closing 1150 * the submenu upwards will end till this bubbleEnd element referenced at line 1168 1151 **/ 1152 if ( bubblingEnd ) { 1153 recursive = true; 1154 } 1155 1156 if( ! recursive ) { 1157 return; 1158 } 1159 1160 const parentSubmenu = submenu.parentElement.closest( '.sub-menu' ); 1161 1162 // If there's a parent submenu, close it and continue closing upwards. 1163 if( null !== parentSubmenu && submenu !== bubblingEnd ) { 1164 recursiveMenuCloseOnblur( parentSubmenu, true, bubblingEnd ); 1165 } 1166 } 1167 1168 function closeNavigationMenu(siteNavigationSubMenu, dropdownToggleLinks, menuLi, megaMenuFullWidth) { 1169 if (siteNavigationSubMenu) { 1170 siteNavigationSubMenu.forEach(element => { 1171 element.classList.remove('astra-megamenu-focus'); 1172 element.classList.remove('toggled-on'); 1173 }); 1174 } 1175 1176 if (menuLi) { 1177 menuLi.forEach(element => { 1178 element.classList.remove('ast-menu-hover'); 1179 }); 1180 } 1181 1182 if (megaMenuFullWidth) { 1183 megaMenuFullWidth.forEach(element => { 1184 element.classList.remove('astra-megamenu-wrapper-focus') 1185 }); 1186 } 1187 1188 1189 if (dropdownToggleLinks) { 1190 dropdownToggleLinks.forEach(element => { 1191 element.setAttribute('aria-expanded', 'false'); 1192 }); 1193 } 1194 } 1195
1196 /** 1197 * Close the Toggle Menu on Click on hash (#) link. 1198 * 1199 * @since 1.3.2 1200 * @return void 1201 */ 1202 function toggleClose( ) 1203 { 1204 var self = this || '', 1205 hash = '#'; 1206 1207 if( self && ! self.classList.contains('astra-search-icon') && null === self.closest('.ast-builder-menu') ) { 1208 var link = String( self ); 1209 if( link.indexOf( hash ) !== -1 ) { 1210 var link_parent = self.parentNode; 1211 if ( body.classList.contains('ast-header-break-point') ) { 1212 if( ! ( document.querySelector('header.site-header').classList.contains('ast-builder-menu-toggle-link') && link_parent.classList.contains('menu-item-has-children') ) ) { 1213 /* Close Builder Header Menu */ 1214 var builder_header_menu_toggle = document.querySelector( '.main-header-menu-toggle' ); 1215 builder_header_menu_toggle.classList.remove( 'toggled' ); 1216 1217 var main_header_bar_navigation = document.querySelector( '.main-header-bar-navigation' ); 1218 main_header_bar_navigation.classList.remove( 'toggle-on' ); 1219 1220 main_header_bar_navigation.style.display = 'none'; 1221 1222 astraTriggerEvent( document.querySelector('body'), 'astraMenuHashLinkClicked' ); 1223 } 1224 1225 } else { 1226 while ( -1 === self.className.indexOf( 'nav-menu' ) ) { 1227 // On li elements toggle the class .focus. 1228 if ( 'li' === self.tagName.toLowerCase() ) { 1229 if ( -1 !== self.className.indexOf( 'focus' ) ) { 1230 self.className = self.className.replace( ' focus', '' ); 1231 } 1232 } 1233 self = self.parentElement; 1234 } 1235 } 1236 } 1237 } 1238 } 1239 1240 /** 1241 * Sets or removes .focus class on an element on focus. 1242 */ 1243 function toggleFocus() { 1244 var self = this; 1245 // Move up through the ancestors of the current link until we hit .nav-menu. 1246 while ( -1 === self.className.indexOf( 'navigation-accessibility' ) ) { 1247 // On li elements toggle the class .focus. 1248 if ( 'li' === self.tagName.toLowerCase() ) { 1249 self.classList.toggle('focus'); 1250 } 1251 self = self.parentElement; 1252 } 1253 } 1254 1255 if( ! astra.is_header_footer_builder_active ) { 1256 1257 /* Add class if mouse clicked and remove if tab pressed */ 1258 if ( 'querySelector' in document && 'addEventListener' in window ) { 1259 body.addEventListener( 'mousedown', function() { 1260 body.classList.add( 'ast-mouse-clicked' ); 1261 } ); 1262 1263 body.addEventListener( 'keydown', function() { 1264 body.classList.remove( 'ast-mouse-clicked' ); 1265 } ); 1266 } 1267 } 1268 1269 /** 1270 * Scroll to specific hash link. 1271 * 1272 * @since x.x.x 1273 */ 1274 if ( astra.is_scroll_to_id ) { 1275 // Calculate the offset top of an element, accounting for nested elements. 1276 const getOffsetTop = (element) => { 1277 let offsetTop = 0; 1278 while (element) { 1279 offsetTop += element.offsetTop; 1280 element = element.offsetParent; 1281 } 1282 return offsetTop; 1283 } 1284 1285 const scrollToIDHandler = ( e, hash = null ) => { 1286 1287 let offset = 0; 1288 const siteHeader = document.querySelector('.site-header'); 1289 1290 if (siteHeader) { 1291 1292 // Check and add offset to scroll top if header is sticky. 1293 const stickyHeaders = siteHeader.querySelectorAll( 1294 'div[data-stick-support]' 1295 ); 1296 1297 if ( stickyHeaders.length > 0 ) { 1298 stickyHeaders.forEach( ( header ) => ( offset += header.clientHeight ) ); 1299 } else if ( typeof astraAddon !== 'undefined' && ! ( Number( astraAddon.sticky_hide_on_scroll ) && ! document?.querySelector( '.ast-header-sticked' ) ) ) { 1300 const fixedHeader = document.querySelector( '#ast-fixed-header' ); 1301 if ( fixedHeader ) { 1302 offset = fixedHeader?.clientHeight; 1303 if ( Number( astraAddon?.header_main_shrink ) ) { 1304 const headers = fixedHeader?.querySelectorAll( 1305 '.ast-above-header-wrap, .ast-below-header-wrap' 1306 ); 1307 headers?.forEach( () => ( offset -= 10 ) ); 1308 } 1309 } 1310 } 1311 1312 const href = hash ? hash : e.target?.closest( 'a' ).hash; 1313 if (href) { 1314 const scrollId = document.querySelector(href); 1315 if (scrollId) { 1316 const elementOffsetTop = getOffsetTop( scrollId ); 1317 if ( typeof astraAddon !== 'undefined' && Number( astraAddon.sticky_hide_on_scroll ) && window?.scrollY < elementOffsetTop ) { 1318 offset = 0; 1319 } 1320 1321 const scrollOffsetTop = elementOffsetTop - offset; 1322 if( scrollOffsetTop ) { 1323 astraSmoothScroll( e, scrollOffsetTop ); 1324 } 1325 } 1326 } 1327 } 1328 } 1329 1330 let hashLinks = []; 1331 const links = document.querySelectorAll( 1332 'a[href*="#"]:not([href="#"]):not([href="#0"]):not([href*="uagb-tab"]):not(.uagb-toc-link__trigger):not(.skip-link):not(.nav-links a):not([href*="tab-"])' 1333 ); 1334 if (links) { 1335 for (const link of links) { 1336 if (link.href.split("#")[0] !== location.href.split("#")[0]) { 1337 // Store the hash 1338 hashLinks.push({ 1339 hash: link.hash, 1340 url: link.href.split("#")[0], 1341 }); 1342 } else if (link.hash !== "") { 1343 link.addEventListener("click", scrollToIDHandler); 1344 } 1345 } 1346 } 1347 1348 window.addEventListener('DOMContentLoaded', (event) => { 1349 for (let link of hashLinks) { 1350 if (window.location.href.split('#')[0] === link.url) { 1351 const siteHeader = document.querySelector('.site-header'); 1352 let offset = 0; 1353 1354 // Check and add offset to scroll top if header is sticky. 1355 const headerHeight = siteHeader.querySelectorAll('div[data-stick-support]'); 1356 if (headerHeight) { 1357 headerHeight.forEach(single => { 1358 offset += single.clientHeight; 1359 }); 1360 } 1361 1362 const scrollId = document.querySelector(link.hash); 1363 if (scrollId) { 1364 const scrollOffsetTop = getOffsetTop(scrollId) - offset; 1365 if (scrollOffsetTop) { 1366 astraSmoothScroll(event, scrollOffsetTop); 1367 } 1368 } 1369 } 1370 } 1371 1372 // If there is a hash in the URL when the page loads, scroll to that element after a short delay. 1373 if ( location.hash ) { 1374 setTimeout( () => scrollToIDHandler( new Event( 'click' ), location.hash ), 750 ); 1375 } 1376 }); 1377 } 1378 1379 /** 1380 * Scroll to top. 1381 * 1382 * @since x.x.x 1383 */ 1384 if ( astra.is_scroll_to_top ) { 1385 var masthead = document.querySelector( '#page header' ); 1386 var astScrollTop = document.getElementById( 'ast-scroll-top' ); 1387 1388 astScrollToTopHandler(masthead, astScrollTop); 1389 1390 window.addEventListener('scroll', function () { 1391 astScrollToTopHandler(masthead, astScrollTop); 1392 }); 1393 1394 astScrollTop.onclick = function(e){ 1395 astraSmoothScroll( e, 0 ); 1396 }; 1397 1398 astScrollTop.addEventListener( 'keydown' , function(e) { 1399 if ( e.key === 'Enter') { 1400 astraSmoothScroll( e, 0 ); 1401 } 1402 }); 1403 } 1404
1405 if ( astra?.is_dark_palette ) { 1406 document.documentElement.classList.add("astra-dark-mode-enable"); 1407 } else { 1408 document.documentElement.classList.remove("astra-dark-mode-enable"); 1409 } 1410 1411 /** 1412 * To remove the blank space when the store notice gets dismissed. 1413 * To adjust the height of the store notice when hanged over top. 1414 * 1415 * @since x.x.x 1416 */ 1417 window.addEventListener('DOMContentLoaded', (event) => { 1418 const isHangOverTopNotice = document.querySelector('.ast-woocommerce-store-notice-hanged'); 1419 const adjustBodyHeight = () => { 1420 const storeNotice = document.querySelector('.woocommerce-store-notice[data-position="hang-over-top"]'); 1421 document.body.style.paddingTop = `${storeNotice?.clientHeight || 0}px`; 1422 } 1423 1424 if (isHangOverTopNotice) { 1425 window.addEventListener('resize', adjustBodyHeight); 1426 setTimeout(() => adjustBodyHeight(), 0); 1427 } 1428 1429 document 1430 .querySelector('.woocommerce-store-notice__dismiss-link') 1431 ?.addEventListener('click', () => { 1432 if ( typeof wp === 'undefined' || ! wp?.customize ) { 1433 document.body.classList.remove('ast-woocommerce-store-notice-hanged'); 1434 window.removeEventListener('resize', adjustBodyHeight); 1435 document.body.style.paddingTop = 0; 1436 } 1437 }); 1438 }); 1439 1440})(); 1441 1442// Accessibility improvement for menu items. 1443document.addEventListener('DOMContentLoaded', function () { 1444 const submenuToggles = document.querySelectorAll('.menu-link .dropdown-menu-toggle'); 1445 1446 const menuItemsWithSubmenu = document.querySelectorAll('.menu-item-has-children > a'); 1447 1448 // Ensuring the submenu toggle action is handled with appropriate CSS, with cross browser compatibility for Enter key press. 1449 menuItemsWithSubmenu.forEach(item => { 1450 item.addEventListener('keydown', function(event) { 1451 if (event.key === 'Enter') { 1452 const submenu = item.nextElementSibling; 1453 if (submenu && submenu.classList.contains('sub-menu')) { 1454 submenu.classList.toggle('ast-visible'); 1455 const ariaExpanded = item.getAttribute('aria-expanded') === 'false' ? 'true' : 'false'; 1456 item.setAttribute('aria-expanded', ariaExpanded); 1457 } 1458 } 1459 }); 1460 }); 1461 1462 // Add event listeners for focus, blur, and keydown events. 1463 submenuToggles.forEach(toggle => { 1464 toggle.addEventListener('focus', () => updateAriaExpanded(toggle)); 1465 toggle.addEventListener('blur', () => updateAriaExpanded(toggle)); 1466 toggle.addEventListener('keydown', event => { 1467 if (event.key === 'Enter' || event.key === ' ') { 1468 event.preventDefault(); 1469 toggleAriaExpanded(toggle); 1470 } 1471 }); 1472 }); 1473 1474 // Add event listener for Escape key press to close all submenus. 1475 document.addEventListener('keydown', event => { 1476 if (event.key === 'Escape') { 1477 closeAllSubmenus(); 1478 } 1479 }); 1480 1481 /** 1482 * Updates the `aria-expanded` attribute based on submenu visibility. 1483 * @param {HTMLElement} toggle - The toggle element. 1484 */ 1485 function updateAriaExpanded(toggle) { 1486 const menuItemLink = toggle.closest('.menu-link'); 1487 const submenu = menuItemLink.nextElementSibling; 1488 const isSubmenuVisible = submenu.classList.contains('toggled-on'); 1489 menuItemLink.setAttribute('aria-expanded', isSubmenuVisible ? 'true' : 'false'); 1490 } 1491 1492 /** 1493 * Toggles the `aria-expanded` attribute for a given toggle element. 1494 * @param {HTMLElement} toggle - The toggle element. 1495 */ 1496 function toggleAriaExpanded(toggle) { 1497 const menuItemLink = toggle.closest('.menu-link'); 1498 const currentState = menuItemLink.getAttribute('aria-expanded'); 1499 menuItemLink.setAttribute('aria-expanded', currentState === 'true' ? 'false' : 'true'); 1500 } 1501 1502 /** 1503 * Closes all submenus by updating the `aria-expanded` attribute. 1504 */ 1505 function closeAllSubmenus() { 1506 submenuToggles.forEach(toggle => updateAriaExpanded(toggle)); 1507 } 1508 1509 // This event listener is triggered when the device orientation changes, and it dispatches a 'resize' event to ensure layout adjustments are made. 1510 window.addEventListener( 'orientationchange', () => { 1511 setTimeout( () => window.dispatchEvent( new Event( 'resize' ) ), 50 ); 1512 } ); 1513}); 1514 1515// Accessibility improvement for product card quick view and add to cart buttons. 1516document.addEventListener('DOMContentLoaded', () => { 1517 const thumbnailWraps = document.querySelectorAll('.astra-shop-thumbn
1517ail-wrap'); 1518 1519 thumbnailWraps.forEach(wrap => { 1520 const focusableElements = wrap.querySelectorAll('a, span'); 1521 1522 focusableElements.forEach(el => { 1523 el.addEventListener('focus', () => { 1524 wrap.querySelectorAll('.ast-on-card-button, .ast-quick-view-trigger').forEach(btn => { 1525 btn.style.opacity = '1'; 1526 btn.style.visibility = 'visible'; 1527 btn.style.borderStyle = 'none'; 1528 }); 1529 }); 1530 1531 el.addEventListener('blur', () => { 1532 // Added Check to check if child elements are still focused. 1533 const isAnyFocused = Array.from(focusableElements).some(child => child === document.activeElement); 1534 if (!isAnyFocused) { 1535 wrap.querySelectorAll('.ast-on-card-button, .ast-quick-view-trigger').forEach(btn => { 1536 btn.style.opacity = ''; 1537 btn.style.visibility = ''; 1538 }); 1539 } 1540 }); 1541 }); 1542 }); 1543});
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.