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