Ben Reed
cdc5ea85f4
Add massive collection of CSS, JavaScript and theme assets that were previously excluded: **CSS Files (681 total):** - HVAC plugin-specific styles (hvac-*.css): 34 files including dashboard, certificates, registration, mobile nav, accessibility fixes, animations, and welcome popup - Theme framework files (Astra, builder systems, layouts): 200+ files - Plugin compatibility styles (WooCommerce, WPForms, Elementor, Contact Form 7): 150+ files - WordPress core and editor styles: 50+ files - Responsive and RTL language support: 200+ files **JavaScript Files (400+ total):** - HVAC plugin functionality (hvac-*.js): 27 files including menu systems, dashboard enhancements, profile sharing, mobile responsive features, accessibility, and animations - Framework and library files: jQuery plugins, GSAP, AOS, Swiper, Chart.js, Lottie, Isotope - Plugin compatibility scripts: WPForms, WooCommerce, Elementor, Contact Form 7, LifterLMS - WordPress core functionality: customizer, admin, block editor compatibility - Third-party integrations: Stripe, SMTP, analytics, search functionality **Assets:** - Certificate background images and logos - Comprehensive theme styling infrastructure - Mobile-responsive design systems - Cross-browser compatibility assets - Performance-optimized minified versions **Updated .gitignore:** - Fixed asset directory whitelisting patterns to properly include CSS/JS/images - Added proper directory structure recognition (!/assets/css/, !/assets/js/, etc.) - Maintains security by excluding sensitive files while including essential assets This commit provides the complete frontend infrastructure needed for: - Full theme functionality and styling - Plugin feature implementations - Mobile responsiveness and accessibility - Cross-browser compatibility - Performance optimization - Developer workflow support
1422 lines
47 KiB
JavaScript
1422 lines
47 KiB
JavaScript
/**
|
|
* File fronend.js
|
|
*
|
|
* Handles toggling the navigation menu for small screens and enables tab
|
|
* support for dropdown menus.
|
|
*
|
|
* @package Astra
|
|
*/
|
|
|
|
/**
|
|
* Get all of an element's parent elements up the DOM tree
|
|
*
|
|
* @param {Node} elem The element.
|
|
* @param {String} selector Selector to match against [optional].
|
|
* @return {Array} The parent elements.
|
|
*/
|
|
var astraGetParents = function ( elem, selector ) {
|
|
|
|
// Element.matches() polyfill.
|
|
if ( ! Element.prototype.matches) {
|
|
Element.prototype.matches =
|
|
Element.prototype.matchesSelector ||
|
|
Element.prototype.mozMatchesSelector ||
|
|
Element.prototype.msMatchesSelector ||
|
|
Element.prototype.oMatchesSelector ||
|
|
Element.prototype.webkitMatchesSelector ||
|
|
function(s) {
|
|
var matches = (this.document || this.ownerDocument).querySelectorAll( s ),
|
|
i = matches.length;
|
|
while (--i >= 0 && matches.item( i ) !== this) {}
|
|
return i > -1;
|
|
};
|
|
}
|
|
|
|
// Setup parents array.
|
|
var parents = [];
|
|
|
|
// Get matching parent elements.
|
|
for ( ; elem && elem !== document; elem = elem.parentNode ) {
|
|
|
|
// Add matching parents to array.
|
|
if ( selector ) {
|
|
if ( elem.matches( selector ) ) {
|
|
parents.push( elem );
|
|
}
|
|
} else {
|
|
parents.push( elem );
|
|
}
|
|
}
|
|
return parents;
|
|
};
|
|
|
|
/**
|
|
* Deprecated: Get all of an element's parent elements up the DOM tree
|
|
*
|
|
* @param {Node} elem The element.
|
|
* @param {String} selector Selector to match against [optional].
|
|
* @return {Array} The parent elements.
|
|
*/
|
|
var getParents = function ( elem, selector ) {
|
|
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.' );
|
|
astraGetParents( elem, selector );
|
|
}
|
|
|
|
/**
|
|
* Toggle Class funtion
|
|
*
|
|
* @param {Node} elem The element.
|
|
* @param {String} selector Selector to match against [optional].
|
|
* @return {Array} The parent elements.
|
|
*/
|
|
var astraToggleClass = function ( el, className ) {
|
|
if ( el.classList.contains( className ) ) {
|
|
el.classList.remove( className );
|
|
} else {
|
|
el.classList.add( className );
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Deprecated: Toggle Class funtion
|
|
*
|
|
* @param {Node} elem The element.
|
|
* @param {String} selector Selector to match against [optional].
|
|
* @return {Array} The parent elements.
|
|
*/
|
|
var toggleClass = function ( el, className ) {
|
|
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.' );
|
|
astraToggleClass( el, className );
|
|
};
|
|
|
|
// CustomEvent() constructor functionality in Internet Explorer 9 and higher.
|
|
(function () {
|
|
|
|
if (typeof window.CustomEvent === "function") return false;
|
|
function CustomEvent(event, params) {
|
|
params = params || { bubbles: false, cancelable: false, detail: undefined };
|
|
var evt = document.createEvent('CustomEvent');
|
|
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
|
|
return evt;
|
|
}
|
|
CustomEvent.prototype = window.Event.prototype;
|
|
window.CustomEvent = CustomEvent;
|
|
})();
|
|
|
|
/**
|
|
* Trigget custom JS Event.
|
|
*
|
|
* @since 1.4.6
|
|
*
|
|
* @link https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent
|
|
* @param {Node} el Dom Node element on which the event is to be triggered.
|
|
* @param {Node} typeArg A DOMString representing the name of the event.
|
|
* @param {String} A CustomEventInit dictionary, having the following fields:
|
|
* "detail", optional and defaulting to null, of type any, that is an event-dependent value associated with the event.
|
|
*/
|
|
var astraTriggerEvent = function astraTriggerEvent( el, typeArg ) {
|
|
var customEventInit =
|
|
arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
|
|
var event = new CustomEvent(typeArg, customEventInit);
|
|
el.dispatchEvent(event);
|
|
};
|
|
|
|
/**
|
|
* Scroll to ID/Top with smooth scroll behavior.
|
|
*
|
|
* @since x.x.x
|
|
*
|
|
* @param {Event} e Event which is been fired.
|
|
* @param {String} top offset from top.
|
|
*/
|
|
astraSmoothScroll = function astraSmoothScroll( e, top ) {
|
|
e.preventDefault();
|
|
window.scrollTo({
|
|
top: top,
|
|
left: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Scroll to Top trigger visibility adjustments.
|
|
*
|
|
* @since x.x.x
|
|
*
|
|
* @param {Node} masthead Page header.
|
|
* @param {Node} astScrollTop Scroll to Top selector.
|
|
*/
|
|
astScrollToTopHandler = function ( masthead, astScrollTop ) {
|
|
|
|
var content = getComputedStyle(astScrollTop).content,
|
|
device = astScrollTop.dataset.onDevices;
|
|
content = content.replace( /[^0-9]/g, '' );
|
|
|
|
if( 'both' == device || ( 'desktop' == device && '769' == content ) || ( 'mobile' == device && '' == content ) ) {
|
|
// Get current window / document scroll.
|
|
var scrollTop = window.pageYOffset || document.body.scrollTop;
|
|
// If masthead found.
|
|
if( masthead && masthead.length ) {
|
|
if (scrollTop > masthead.offsetHeight + 100) {
|
|
astScrollTop.style.display = "block";
|
|
} else {
|
|
astScrollTop.style.display = "none";
|
|
}
|
|
} else {
|
|
// If there is no masthead set default start scroll
|
|
if ( window.pageYOffset > 300 ) {
|
|
astScrollTop.style.display = "block";
|
|
} else {
|
|
astScrollTop.style.display = "none";
|
|
}
|
|
}
|
|
} else {
|
|
astScrollTop.style.display = "none";
|
|
}
|
|
};
|
|
|
|
( function() {
|
|
|
|
var menu_toggle_all = document.querySelectorAll( '#masthead .main-header-menu-toggle' ),
|
|
main_header_masthead = document.getElementById('masthead'),
|
|
menu_click_listeners_nav = {},
|
|
mobileHeaderType = '',
|
|
body = document.body,
|
|
mobileHeader = '';
|
|
|
|
if ( undefined !== main_header_masthead && null !== main_header_masthead ) {
|
|
|
|
mobileHeader = main_header_masthead.querySelector("#ast-mobile-header");
|
|
}
|
|
|
|
if ( '' !== mobileHeader && null !== mobileHeader ) {
|
|
|
|
mobileHeaderType = mobileHeader.dataset.type;
|
|
}
|
|
|
|
document.addEventListener( 'astMobileHeaderTypeChange', updateHeaderType, false );
|
|
|
|
/**
|
|
* Updates the header type.
|
|
*/
|
|
function updateHeaderType( e ) {
|
|
mobileHeaderType = e.detail.type;
|
|
var popupTrigger = document.querySelectorAll( '.menu-toggle' );
|
|
|
|
if( 'dropdown' === mobileHeaderType ) {
|
|
|
|
document.getElementById( 'ast-mobile-popup' ).classList.remove( 'active', 'show' );
|
|
updateTrigger('updateHeader');
|
|
}
|
|
|
|
if ( 'off-canvas' === mobileHeaderType ) {
|
|
popupTrigger.forEach(function (trigger) {
|
|
if (trigger && trigger.classList.contains('toggled')) {
|
|
trigger.click();
|
|
}
|
|
});
|
|
}
|
|
|
|
init(mobileHeaderType);
|
|
}
|
|
|
|
function syncToggledClass() {
|
|
const buttons = document.querySelectorAll('.menu-toggle');
|
|
const allToggled = Array.from(buttons).every(button => button.classList.contains('toggled'));
|
|
|
|
buttons.forEach(button => {
|
|
if (allToggled) {
|
|
button.classList.remove('toggled');
|
|
} else {
|
|
button.classList.add('toggled');
|
|
}
|
|
});
|
|
}
|
|
|
|
document.addEventListener('click', function (e) {
|
|
const button = e.target.closest('.menu-toggle');
|
|
if (button) {
|
|
button.classList.toggle('toggled');
|
|
syncToggledClass();
|
|
}
|
|
});
|
|
|
|
|
|
/**
|
|
* Opens the Popup when trigger is clicked.
|
|
*/
|
|
popupTriggerClick = function ( event ) {
|
|
|
|
var triggerType = event.currentTarget.trigger_type;
|
|
var popupWrap = document.getElementById( 'ast-mobile-popup' );
|
|
|
|
const menuToggleClose = document.getElementById('menu-toggle-close');
|
|
|
|
if( menuToggleClose ) {
|
|
menuToggleClose.focus();
|
|
}
|
|
|
|
if ( ! body.classList.contains( 'ast-popup-nav-open' ) ) {
|
|
body.classList.add( 'ast-popup-nav-open' );
|
|
}
|
|
|
|
|
|
if ( ! body.classList.contains( 'ast-main-header-nav-open' ) && 'mobile' !== triggerType ) {
|
|
body.classList.add( 'ast-main-header-nav-open' );
|
|
}
|
|
|
|
if ( ! document.documentElement.classList.contains( 'ast-off-canvas-active' ) ) {
|
|
document.documentElement.classList.add( 'ast-off-canvas-active' );
|
|
}
|
|
|
|
if ( 'desktop' === triggerType ) {
|
|
|
|
popupWrap.querySelector( '.ast-mobile-popup-content' ).style.display = 'none';
|
|
popupWrap.querySelector( '.ast-desktop-popup-content' ).style.display = 'block';
|
|
}
|
|
if ( 'mobile' === triggerType ) {
|
|
|
|
popupWrap.querySelector( '.ast-desktop-popup-content' ).style.display = 'none';
|
|
popupWrap.querySelector( '.ast-mobile-popup-content' ).style.display = 'block';
|
|
}
|
|
this.style.display = 'none';
|
|
|
|
popupWrap.classList.add( 'active', 'show' );
|
|
}
|
|
|
|
/**
|
|
* Closes the Trigger when Popup is Closed.
|
|
*/
|
|
function updateTrigger(currentElement) {
|
|
mobileHeader = main_header_masthead.querySelector( "#ast-mobile-header" );
|
|
var parent_li_sibling = '';
|
|
|
|
if( undefined !== mobileHeader && null !== mobileHeader && 'dropdown' === mobileHeader.dataset.type && 'updateHeader' !== currentElement ) {
|
|
return;
|
|
}
|
|
if ( undefined !== currentElement && 'updateHeader' !== currentElement ) {
|
|
|
|
parent_li_sibling = currentElement.closest( '.ast-mobile-popup-inner' ).querySelectorAll('.menu-item-has-children');
|
|
|
|
} else {
|
|
var popup = document.querySelector( '#ast-mobile-popup' );
|
|
parent_li_sibling = popup.querySelectorAll('.menu-item-has-children');
|
|
|
|
}
|
|
|
|
parent_li_sibling.forEach((li_sibling) => {
|
|
li_sibling.classList.remove('ast-submenu-expanded');
|
|
|
|
const all_sub_menu = Array.from(li_sibling.querySelectorAll('.sub-menu'));
|
|
all_sub_menu.forEach((sub_menu) => {
|
|
if (!sub_menu.hasAttribute('data-initial-display')) {
|
|
sub_menu.setAttribute('data-initial-display', window.getComputedStyle(sub_menu).display);
|
|
}
|
|
|
|
if (sub_menu.getAttribute('data-initial-display') === 'block') {
|
|
sub_menu.style.display = 'block';
|
|
} else {
|
|
sub_menu.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
|
|
var popupTrigger = document.querySelectorAll( '.menu-toggle' );
|
|
|
|
document.body.classList.remove( 'ast-main-header-nav-open', 'ast-popup-nav-open' );
|
|
document.documentElement.classList.remove( 'ast-off-canvas-active' );
|
|
|
|
for ( var item = 0; item < popupTrigger.length; item++ ) {
|
|
|
|
popupTrigger[item].classList.remove( 'toggled' );
|
|
|
|
popupTrigger[item].style.display = 'flex';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Main Init Function.
|
|
*/
|
|
function init( mobileHeaderType ) {
|
|
|
|
var popupTriggerMobile = document.querySelectorAll( '#ast-mobile-header .menu-toggle' );
|
|
var popupTriggerDesktop = document.querySelectorAll( '#ast-desktop-header .menu-toggle' );
|
|
|
|
if ( undefined === mobileHeaderType && null !== main_header_masthead ) {
|
|
|
|
mobileHeader = main_header_masthead.querySelector("#ast-mobile-header");
|
|
if( mobileHeader ) {
|
|
mobileHeaderType = mobileHeader.dataset.type;
|
|
} else {
|
|
var desktopHeader = main_header_masthead.querySelector("#ast-desktop-header");
|
|
if ( desktopHeader ) {
|
|
|
|
mobileHeaderType = desktopHeader.dataset.toggleType;
|
|
} else {
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
if ( 'off-canvas' === mobileHeaderType ) {
|
|
var popupClose = document.getElementById( 'menu-toggle-close' ),
|
|
popupInner = document.querySelector( '.ast-mobile-popup-inner' );
|
|
|
|
if ( undefined === popupInner || null === popupInner ){
|
|
return; // if toggel button component is not loaded.
|
|
}
|
|
popupLinks = popupInner.getElementsByTagName('a');
|
|
|
|
for ( var item = 0; item < popupTriggerMobile.length; item++ ) {
|
|
|
|
popupTriggerMobile[item].removeEventListener("click", astraNavMenuToggle, false);
|
|
// Open the Popup when click on trigger
|
|
popupTriggerMobile[item].removeEventListener("click", popupTriggerClick);
|
|
popupTriggerMobile[item].addEventListener("click", popupTriggerClick, false);
|
|
popupTriggerMobile[item].trigger_type = 'mobile';
|
|
|
|
}
|
|
for ( var item = 0; item < popupTriggerDesktop.length; item++ ) {
|
|
|
|
popupTriggerDesktop[item].removeEventListener("click", astraNavMenuToggle, false);
|
|
// Open the Popup when click on trigger
|
|
popupTriggerDesktop[item].removeEventListener("click", popupTriggerClick);
|
|
popupTriggerDesktop[item].addEventListener("click", popupTriggerClick, false);
|
|
popupTriggerDesktop[item].trigger_type = 'desktop';
|
|
|
|
}
|
|
|
|
//Close Popup on CLose Button Click.
|
|
popupClose.addEventListener("click", function( e ) {
|
|
document.getElementById( 'ast-mobile-popup' ).classList.remove( 'active', 'show' );
|
|
updateTrigger(this);
|
|
});
|
|
|
|
// Close Popup if esc is pressed.
|
|
document.addEventListener( 'keyup', function (event) {
|
|
// 27 is keymap for esc key.
|
|
if ( event.keyCode === 27 ) {
|
|
event.preventDefault();
|
|
document.getElementById( 'ast-mobile-popup' ).classList.remove( 'active', 'show' );
|
|
updateTrigger();
|
|
}
|
|
});
|
|
|
|
// Close Popup on outside click.
|
|
document.addEventListener('click', function (event) {
|
|
|
|
var target = event.target;
|
|
var modal = document.querySelector( '.ast-mobile-popup-drawer.active .ast-mobile-popup-overlay' );
|
|
if ( target === modal ) {
|
|
document.getElementById( 'ast-mobile-popup' ).classList.remove( 'active', 'show' );
|
|
updateTrigger();
|
|
}
|
|
});
|
|
|
|
// Close Popup on # link click inside Popup.
|
|
for ( let link = 0, len = popupLinks.length; link < len; link++ ) {
|
|
if( null !== popupLinks[link].getAttribute("href") && ( popupLinks[link].getAttribute("href").startsWith('#') || -1 !== popupLinks[link].getAttribute("href").search("#") ) && ( ! popupLinks[link].parentElement.classList.contains('menu-item-has-children') || ( popupLinks[link].parentElement.classList.contains('menu-item-has-children') && document.querySelector('header.site-header').classList.contains('ast-builder-menu-toggle-icon') ) ) ){
|
|
popupLinks[link].addEventListener( 'click', triggerToggleClose, true );
|
|
popupLinks[link].headerType = 'off-canvas';
|
|
}
|
|
}
|
|
|
|
AstraToggleSetup();
|
|
} else if ( 'dropdown' === mobileHeaderType ) {
|
|
|
|
var mobileDropdownContent = document.querySelectorAll( '.ast-mobile-header-content' ) || false,
|
|
desktopDropdownContent = document.querySelector( '.ast-desktop-header-content' ) || false;
|
|
|
|
// Close Popup on # link click inside Popup.
|
|
if ( mobileDropdownContent.length > 0 ) {
|
|
for ( let index = 0; index < mobileDropdownContent.length; index++ ) {
|
|
|
|
var mobileLinks = mobileDropdownContent[index].getElementsByTagName('a');
|
|
for ( link = 0, len = mobileLinks.length; link < len; link++ ) {
|
|
if ( null !== mobileLinks[link].getAttribute("href") && ( mobileLinks[link].getAttribute("href").startsWith('#') || -1 !== mobileLinks[link].getAttribute("href").search("#") ) && ( !mobileLinks[link].parentElement.classList.contains('menu-item-has-children') || ( mobileLinks[link].parentElement.classList.contains('menu-item-has-children') && document.querySelector('header.site-header').classList.contains('ast-builder-menu-toggle-icon') ) ) ) {
|
|
mobileLinks[link].addEventListener( 'click', triggerToggleClose, true );
|
|
mobileLinks[link].headerType = 'dropdown';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Close Popup on # link click inside Popup.
|
|
if( desktopDropdownContent ) {
|
|
var desktopLinks = desktopDropdownContent.getElementsByTagName('a');
|
|
for ( link = 0, len = desktopLinks.length; link < len; link++ ) {
|
|
desktopLinks[link].addEventListener( 'click', triggerToggleClose, true );
|
|
desktopLinks[link].headerType = 'dropdown';
|
|
}
|
|
}
|
|
|
|
for ( var item = 0; item < popupTriggerMobile.length; item++ ) {
|
|
|
|
popupTriggerMobile[item].removeEventListener("click", popupTriggerClick, false);
|
|
popupTriggerMobile[item].removeEventListener('click', astraNavMenuToggle);
|
|
popupTriggerMobile[item].addEventListener('click', astraNavMenuToggle, false);
|
|
popupTriggerMobile[item].trigger_type = 'mobile';
|
|
|
|
}
|
|
for ( var item = 0; item < popupTriggerDesktop.length; item++ ) {
|
|
|
|
popupTriggerDesktop[item].removeEventListener("click", popupTriggerClick, false);
|
|
popupTriggerDesktop[item].removeEventListener('click', astraNavMenuToggle);
|
|
popupTriggerDesktop[item].addEventListener('click', astraNavMenuToggle, false);
|
|
popupTriggerDesktop[item].trigger_type = 'desktop';
|
|
|
|
}
|
|
|
|
AstraToggleSetup();
|
|
}
|
|
|
|
accountPopupTrigger();
|
|
|
|
}
|
|
|
|
function triggerToggleClose( event ) {
|
|
|
|
var headerType = event.currentTarget.headerType;
|
|
|
|
switch( headerType ) {
|
|
|
|
case 'dropdown':
|
|
|
|
var popupTrigger = document.querySelectorAll( '.menu-toggle.toggled' );
|
|
|
|
for ( var item = 0; item < popupTrigger.length; item++ ) {
|
|
|
|
popupTrigger[item].click();
|
|
}
|
|
break;
|
|
case 'off-canvas':
|
|
|
|
var popupClose = document.getElementById( 'menu-toggle-close' );
|
|
|
|
popupClose.click();
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
window.addEventListener( 'load', function() {
|
|
init();
|
|
} );
|
|
document.addEventListener( 'astLayoutWidthChanged', function() {
|
|
init();
|
|
} );
|
|
|
|
document.addEventListener( 'astPartialContentRendered', function() {
|
|
|
|
menu_toggle_all = document.querySelectorAll( '.main-header-menu-toggle' );
|
|
|
|
body.classList.remove("ast-main-header-nav-open");
|
|
|
|
document.addEventListener( 'astMobileHeaderTypeChange', updateHeaderType, false );
|
|
|
|
init();
|
|
|
|
accountPopupTrigger();
|
|
|
|
} );
|
|
|
|
var mobile_width = ( null !== navigator.userAgent.match(/Android/i) && 'Android' === navigator.userAgent.match(/Android/i)[0] ) ? window.visualViewport.width : window.innerWidth;
|
|
|
|
function AstraHandleResizeEvent() {
|
|
|
|
var menu_offcanvas_close = document.getElementById('menu-toggle-close');
|
|
var menu_dropdown_close = document.querySelector('.menu-toggle.toggled');
|
|
var desktop_header_content = document.querySelector('#masthead > #ast-desktop-header .ast-desktop-header-content');
|
|
var elementor_editor = document.querySelector('.elementor-editor-active');
|
|
|
|
if ( desktop_header_content ) {
|
|
desktop_header_content.style.display = 'none';
|
|
}
|
|
var mobileResizeWidth = ( null !== navigator.userAgent.match(/Android/i) && 'Android' === navigator.userAgent.match(/Android/i)[0] ) ? window.visualViewport.width : window.innerWidth;
|
|
|
|
if ( mobileResizeWidth !== mobile_width ) {
|
|
if ( menu_dropdown_close && null === elementor_editor ) {
|
|
menu_dropdown_close.click();
|
|
}
|
|
document.body.classList.remove( 'ast-main-header-nav-open', 'ast-popup-nav-open' );
|
|
|
|
if( menu_offcanvas_close && null == elementor_editor ) {
|
|
menu_offcanvas_close.click();
|
|
}
|
|
}
|
|
|
|
updateHeaderBreakPoint();
|
|
|
|
AstraToggleSetup();
|
|
|
|
}
|
|
|
|
window.addEventListener('resize', function(){
|
|
// Skip resize event when keyboard display event triggers on devices.
|
|
if( 'INPUT' !== document.activeElement.tagName ) {
|
|
AstraHandleResizeEvent();
|
|
}
|
|
} );
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
AstraToggleSetup();
|
|
/**
|
|
* Navigation Keyboard Navigation.
|
|
*/
|
|
var containerButton;
|
|
if ( body.classList.contains('ast-header-break-point') ) {
|
|
containerButton = document.getElementById( 'ast-mobile-header' );
|
|
} else {
|
|
containerButton = document.getElementById( 'ast-desktop-header' );
|
|
}
|
|
|
|
if( null !== containerButton ) {
|
|
var containerMenu = containerButton.querySelector( '.navigation-accessibility' );
|
|
navigation_accessibility( containerMenu, containerButton );
|
|
}
|
|
});
|
|
|
|
var get_window_width = function () {
|
|
|
|
return document.documentElement.clientWidth;
|
|
}
|
|
|
|
/* Add break point Class and related trigger */
|
|
var updateHeaderBreakPoint = function () {
|
|
|
|
// Content overrflowing out of screen can give incorrect window.innerWidth.
|
|
// Adding overflow hidden and then calculating the window.innerWidth fixes the problem.
|
|
var originalOverflow = body.style.overflow;
|
|
body.style.overflow = 'hidden';
|
|
var ww = get_window_width();
|
|
body.style.overflow = originalOverflow;
|
|
|
|
var break_point = astra.break_point;
|
|
|
|
/**
|
|
* This case is when one hits a URL one after the other via `Open in New Tab` option
|
|
* Chrome returns the value of outer width as 0 in this case.
|
|
* This mis-calculates the width of the window and header seems invisible.
|
|
* This could be fixed by using `0 === ww` condition below.
|
|
*/
|
|
if (ww > break_point || 0 === ww) {
|
|
//remove menu toggled class.
|
|
if ( menu_toggle_all.length > 0 ) {
|
|
|
|
for (var i = 0; i < menu_toggle_all.length; i++) {
|
|
|
|
if( null !== menu_toggle_all[i] ) {
|
|
menu_toggle_all[i].classList.remove('toggled');
|
|
}
|
|
}
|
|
}
|
|
body.classList.remove("ast-header-break-point");
|
|
body.classList.add("ast-desktop");
|
|
astraTriggerEvent(body, "astra-header-responsive-enabled");
|
|
|
|
} else {
|
|
|
|
body.classList.add("ast-header-break-point");
|
|
body.classList.remove("ast-desktop");
|
|
astraTriggerEvent(body, "astra-header-responsive-disabled")
|
|
}
|
|
}
|
|
|
|
var accountPopupTrigger = function () {
|
|
// Account login form popup.
|
|
var header_account_trigger = document.querySelectorAll( '.ast-account-action-login' );
|
|
|
|
if (!header_account_trigger.length) {
|
|
return;
|
|
}
|
|
|
|
const formWrapper = document.querySelector('#ast-hb-account-login-wrap');
|
|
|
|
if (!formWrapper) {
|
|
return;
|
|
}
|
|
|
|
const formCloseBtn = document.querySelector('#ast-hb-login-close');
|
|
|
|
header_account_trigger.forEach(function(_trigger) {
|
|
_trigger.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
|
|
formWrapper.classList.add('show');
|
|
});
|
|
});
|
|
|
|
if (formCloseBtn) {
|
|
formCloseBtn.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
formWrapper.classList.remove('show');
|
|
});
|
|
}
|
|
}
|
|
|
|
updateHeaderBreakPoint();
|
|
|
|
AstraToggleSubMenu = function( event ) {
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
if ('false' === event.target.getAttribute('aria-expanded') || ! event.target.getAttribute('aria-expanded')) {
|
|
event.target.setAttribute('aria-expanded', 'true');
|
|
} else {
|
|
event.target.setAttribute('aria-expanded', 'false');
|
|
}
|
|
|
|
var parent_li = this.parentNode;
|
|
|
|
if ( parent_li.classList.contains('ast-submenu-expanded') && document.querySelector('header.site-header').classList.contains('ast-builder-menu-toggle-link') ) {
|
|
|
|
if (!this.classList.contains('ast-menu-toggle')) {
|
|
|
|
var link = parent_li.querySelector('a').getAttribute('href');
|
|
if ( '' !== link && '#' !== link) {
|
|
window.location = link;
|
|
}
|
|
}
|
|
}
|
|
|
|
var parent_li_child = parent_li.querySelectorAll('.menu-item-has-children');
|
|
for (var j = 0; j < parent_li_child.length; j++) {
|
|
|
|
parent_li_child[j].classList.remove('ast-submenu-expanded');
|
|
var parent_li_child_sub_menu = parent_li_child[j].querySelector('.sub-menu, .children');
|
|
if( null !== parent_li_child_sub_menu ) {
|
|
parent_li_child_sub_menu.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
var parent_li_sibling = parent_li.parentNode.querySelectorAll('.menu-item-has-children');
|
|
for (var j = 0; j < parent_li_sibling.length; j++) {
|
|
|
|
if (parent_li_sibling[j] != parent_li) {
|
|
|
|
parent_li_sibling[j].classList.remove('ast-submenu-expanded');
|
|
var all_sub_menu = parent_li_sibling[j].querySelectorAll('.sub-menu');
|
|
for (var k = 0; k < all_sub_menu.length; k++) {
|
|
all_sub_menu[k].style.display = 'none';
|
|
}
|
|
}
|
|
}
|
|
|
|
if (parent_li.classList.contains('menu-item-has-children') ) {
|
|
astraToggleClass(parent_li, 'ast-submenu-expanded');
|
|
if (parent_li.classList.contains('ast-submenu-expanded')) {
|
|
parent_li.querySelector('.sub-menu').style.display = 'block';
|
|
} else {
|
|
parent_li.querySelector('.sub-menu').style.display = 'none';
|
|
}
|
|
}
|
|
};
|
|
|
|
AstraToggleSetup = function () {
|
|
|
|
if( typeof astraAddon != 'undefined' && typeof astraToggleSetupPro === "function" ) {
|
|
astraToggleSetupPro( mobileHeaderType, body, menu_click_listeners_nav );
|
|
} else {
|
|
var flag = false;
|
|
var menuToggleAllLength;
|
|
if ( 'off-canvas' === mobileHeaderType || 'full-width' === mobileHeaderType ) {
|
|
// 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.
|
|
var __main_header_all = document.querySelectorAll( '#ast-mobile-popup, #ast-mobile-header' );
|
|
var menu_toggle_all = document.querySelectorAll('#ast-mobile-header .main-header-menu-toggle');
|
|
|
|
menuToggleAllLength = menu_toggle_all.length;
|
|
} else {
|
|
var __main_header_all = document.querySelectorAll( '#ast-mobile-header' ),
|
|
menu_toggle_all = document.querySelectorAll('#ast-mobile-header .main-header-menu-toggle');
|
|
menuToggleAllLength = menu_toggle_all.length;
|
|
flag = menuToggleAllLength > 0 ? false : true;
|
|
|
|
menuToggleAllLength = flag ? 1 : menuToggleAllLength;
|
|
|
|
}
|
|
|
|
if ( menuToggleAllLength > 0 || flag ) {
|
|
|
|
for (var i = 0; i < menuToggleAllLength; i++) {
|
|
|
|
if ( ! flag ) {
|
|
|
|
menu_toggle_all[i].setAttribute('data-index', i);
|
|
|
|
if ( ! menu_click_listeners_nav[i] ) {
|
|
menu_click_listeners_nav[i] = menu_toggle_all[i];
|
|
menu_toggle_all[i].removeEventListener('click', astraNavMenuToggle);
|
|
menu_toggle_all[i].addEventListener('click', astraNavMenuToggle, false);
|
|
}
|
|
}
|
|
|
|
if ('undefined' !== typeof __main_header_all[i]) {
|
|
|
|
// To handle the comma seprated selector added above we need this loop.
|
|
for( var mainHeaderCount =0; mainHeaderCount < __main_header_all.length; mainHeaderCount++ ){
|
|
|
|
if (document.querySelector('header.site-header').classList.contains('ast-builder-menu-toggle-link')) {
|
|
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');
|
|
} else {
|
|
var astra_menu_toggle = __main_header_all[mainHeaderCount].querySelectorAll('ul.main-header-menu .ast-menu-toggle');
|
|
}
|
|
// Add Eventlisteners for Submenu.
|
|
if (astra_menu_toggle.length > 0) {
|
|
|
|
for (var j = 0; j < astra_menu_toggle.length; j++) {
|
|
astra_menu_toggle[j].removeEventListener('click', AstraToggleSubMenu);
|
|
astra_menu_toggle[j].addEventListener('click', AstraToggleSubMenu, false);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
astraNavMenuToggle = function ( event ) {
|
|
|
|
if( typeof astraAddon != 'undefined' ) {
|
|
astraNavMenuTogglePro( event, body, mobileHeaderType, this );
|
|
} else {
|
|
|
|
event.preventDefault();
|
|
var __main_header_all = document.querySelectorAll('#masthead > #ast-mobile-header .main-header-bar-navigation');
|
|
menu_toggle_all = document.querySelectorAll( '#masthead > #ast-mobile-header .main-header-menu-toggle' )
|
|
var event_index = '0';
|
|
|
|
if ( null !== this.closest( '#ast-fixed-header' ) ) {
|
|
|
|
__main_header_all = document.querySelectorAll('#ast-fixed-header > #ast-mobile-header .main-header-bar-navigation');
|
|
menu_toggle_all = document.querySelectorAll( '#ast-fixed-header .main-header-menu-toggle' )
|
|
|
|
event_index = '0';
|
|
}
|
|
|
|
if ('undefined' === typeof __main_header_all[event_index]) {
|
|
return false;
|
|
}
|
|
var menuHasChildren = __main_header_all[event_index].querySelectorAll('.menu-item-has-children');
|
|
for (var i = 0; i < menuHasChildren.length; i++) {
|
|
menuHasChildren[i].classList.remove('ast-submenu-expanded');
|
|
var menuHasChildrenSubMenu = menuHasChildren[i].querySelectorAll('.sub-menu');
|
|
for (var j = 0; j < menuHasChildrenSubMenu.length; j++) {
|
|
menuHasChildrenSubMenu[j].style.display = 'none';
|
|
}
|
|
}
|
|
|
|
var menu_class = this.getAttribute('class') || '';
|
|
|
|
if ( menu_class.indexOf('main-header-menu-toggle') !== -1 ) {
|
|
astraToggleClass(__main_header_all[event_index], 'toggle-on');
|
|
astraToggleClass(menu_toggle_all[event_index], 'toggled');
|
|
if (__main_header_all[event_index].classList.contains('toggle-on')) {
|
|
__main_header_all[event_index].style.display = 'block';
|
|
body.classList.add("ast-main-header-nav-open");
|
|
} else {
|
|
__main_header_all[event_index].style.display = '';
|
|
body.classList.remove("ast-main-header-nav-open");
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
body.addEventListener("astra-header-responsive-enabled", function () {
|
|
|
|
var __main_header_all = document.querySelectorAll('.main-header-bar-navigation');
|
|
|
|
if (__main_header_all.length > 0) {
|
|
|
|
for (var i = 0; i < __main_header_all.length; i++) {
|
|
if (null != __main_header_all[i]) {
|
|
__main_header_all[i].classList.remove('toggle-on');
|
|
__main_header_all[i].style.display = '';
|
|
}
|
|
|
|
var sub_menu = __main_header_all[i].getElementsByClassName('sub-menu');
|
|
for (var j = 0; j < sub_menu.length; j++) {
|
|
sub_menu[j].style.display = '';
|
|
}
|
|
var child_menu = __main_header_all[i].getElementsByClassName('children');
|
|
for (var k = 0; k < child_menu.length; k++) {
|
|
child_menu[k].style.display = '';
|
|
}
|
|
|
|
var searchIcons = __main_header_all[i].getElementsByClassName('ast-search-menu-icon');
|
|
for (var l = 0; l < searchIcons.length; l++) {
|
|
searchIcons[l].classList.remove('ast-dropdown-active');
|
|
searchIcons[l].style.display = '';
|
|
}
|
|
}
|
|
}
|
|
}, false);
|
|
|
|
var get_browser = function () {
|
|
var ua = navigator.userAgent,tem,M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
|
|
if(/trident/i.test(M[1])) {
|
|
tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
|
|
return;
|
|
}
|
|
if( 'Chrome' === M[1] ) {
|
|
tem = ua.match(/\bOPR|Edge\/(\d+)/)
|
|
if(tem != null) {
|
|
return;
|
|
}
|
|
}
|
|
M = M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
|
|
if((tem = ua.match(/version\/(\d+)/i)) != null) {
|
|
M.splice(1,1,tem[1]);
|
|
}
|
|
|
|
if( 'Safari' === M[0] && M[1] < 11 ) {
|
|
document.body.classList.add( "ast-safari-browser-less-than-11" );
|
|
}
|
|
}
|
|
|
|
get_browser();
|
|
|
|
/* Search Script */
|
|
var SearchIcons = document.getElementsByClassName( 'astra-search-icon' );
|
|
for (var i = 0; i < SearchIcons.length; i++) {
|
|
|
|
SearchIcons[i].onclick = function(event) {
|
|
if ( this.classList.contains( 'slide-search' ) ) {
|
|
event.preventDefault();
|
|
var sibling = this.parentNode.parentNode.parentNode.querySelector( '.ast-search-menu-icon' );
|
|
if ( ! sibling.classList.contains( 'ast-dropdown-active' ) ) {
|
|
sibling.classList.add( 'ast-dropdown-active' );
|
|
sibling.querySelector( '.search-field' ).setAttribute('autocomplete','off');
|
|
setTimeout(function() {
|
|
sibling.querySelector( '.search-field' ).focus();
|
|
},200);
|
|
} else {
|
|
var searchTerm = sibling.querySelector( '.search-field' ).value || '';
|
|
if( '' !== searchTerm ) {
|
|
sibling.querySelector( '.search-form' ).submit();
|
|
}
|
|
sibling.classList.remove( 'ast-dropdown-active' );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
var SearchInputs = document.querySelectorAll( '.search-field' );
|
|
SearchInputs.forEach(input => {
|
|
input.addEventListener('focus', function (e) {
|
|
var sibling = this.parentNode.parentNode.parentNode.querySelector( '.ast-search-menu-icon' );
|
|
if ( sibling ) {
|
|
astraToggleClass( sibling, 'ast-dropdown-active' );
|
|
}
|
|
});
|
|
input.addEventListener('blur', function (e) {
|
|
var sibling = this.parentNode.parentNode.parentNode.querySelector( '.ast-search-menu-icon' );
|
|
if ( sibling ) {
|
|
sibling.classList.remove( 'ast-dropdown-active' );
|
|
astraToggleClass( sibling, 'ast-dropdown-active' );
|
|
}
|
|
});
|
|
});
|
|
|
|
/* Hide Dropdown on body click*/
|
|
body.onclick = function( event ) {
|
|
if ( typeof event.target.classList !== 'undefined' ) {
|
|
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 ) {
|
|
var dropdownSearchWrap = document.getElementsByClassName( 'ast-search-menu-icon' );
|
|
for (var i = 0; i < dropdownSearchWrap.length; i++) {
|
|
dropdownSearchWrap[i].classList.remove( 'ast-dropdown-active' );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Navigation Keyboard Navigation.
|
|
*/
|
|
function navigation_accessibility(containerMenu, containerButton) {
|
|
if (!containerMenu || !containerButton) {
|
|
return;
|
|
}
|
|
var button = containerButton.getElementsByTagName('button')[0] || containerButton.getElementsByTagName('a')[0];
|
|
if (!button || (button.classList.contains('astra-search-icon'))) {
|
|
return;
|
|
}
|
|
var menu = containerMenu.getElementsByTagName('ul')[0];
|
|
|
|
// Hide menu toggle button if menu is empty and return early.
|
|
if (!menu) {
|
|
button.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
if (!menu.className.includes('nav-menu')) {
|
|
menu.className += ' nav-menu';
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
if ('off-canvas' === mobileHeaderType) {
|
|
var popupClose = document.getElementById('menu-toggle-close');
|
|
if (popupClose) {
|
|
popupClose.onclick = function () {
|
|
var toggled = containerMenu.className.includes('toggled');
|
|
containerMenu.className = toggled ? containerMenu.className.replace(' toggled', '') : containerMenu.className + ' toggled';
|
|
button.setAttribute('aria-expanded', toggled ? 'false' : 'true');
|
|
menu.setAttribute('aria-expanded', toggled ? 'false' : 'true');
|
|
};
|
|
}
|
|
}
|
|
});
|
|
|
|
button.onclick = function () {
|
|
var toggled = containerMenu.className.includes('toggled');
|
|
containerMenu.className = toggled ? containerMenu.className.replace(' toggled', '') : containerMenu.className + ' toggled';
|
|
button.setAttribute('aria-expanded', toggled ? 'false' : 'true');
|
|
menu.setAttribute('aria-expanded', toggled ? 'false' : 'true');
|
|
};
|
|
|
|
if (!astra.is_header_footer_builder_active) {
|
|
|
|
// Get all the link elements within the menu.
|
|
var links = menu.getElementsByTagName('a');
|
|
var subMenus = menu.getElementsByTagName('ul');
|
|
|
|
// Set menu items with submenus to aria-haspopup="true".
|
|
for (var i = 0, len = subMenus.length; i < len; i++) {
|
|
subMenus[i].parentNode.setAttribute('aria-haspopup', 'true');
|
|
}
|
|
|
|
// Each time a menu link is focused or blurred, toggle focus.
|
|
for (var i = 0, len = links.length; i < len; i++) {
|
|
links[i].addEventListener('focus', toggleFocus, true);
|
|
links[i].addEventListener('blur', toggleFocus, true);
|
|
links[i].addEventListener('click', toggleClose, true);
|
|
}
|
|
}
|
|
|
|
if (astra.is_header_footer_builder_active) {
|
|
tabNavigation();
|
|
}
|
|
}
|
|
|
|
// Tab navigation for accessibility.
|
|
function tabNavigation() {
|
|
const dropdownToggleLinks = document.querySelectorAll('nav.site-navigation .menu-item-has-children > a .ast-header-navigation-arrow');
|
|
const siteNavigationSubMenu = document.querySelectorAll('nav.site-navigation .sub-menu');
|
|
const menuLi = document.querySelectorAll('nav.site-navigation .menu-item-has-children');
|
|
const megaMenuFullWidth = document.querySelectorAll('.astra-full-megamenu-wrapper');
|
|
|
|
if (dropdownToggleLinks) {
|
|
dropdownToggleLinks.forEach(element => {
|
|
element.addEventListener('keydown', function (e) {
|
|
if ('Enter' === e.key) {
|
|
const closestLi = e.target.closest('li');
|
|
const subMenu = closestLi.querySelector('.sub-menu');
|
|
const isMegaMenu = subMenu && subMenu.classList.contains('astra-megamenu');
|
|
|
|
setTimeout(() => {
|
|
if (!isMegaMenu) {
|
|
subMenu.classList.toggle('toggled-on');
|
|
closestLi.classList.toggle('ast-menu-hover');
|
|
} else {
|
|
const fullMegaMenuWrapper = closestLi.querySelector('.astra-full-megamenu-wrapper');
|
|
if (subMenu) subMenu.classList.toggle('astra-megamenu-focus');
|
|
if (fullMegaMenuWrapper) fullMegaMenuWrapper.classList.toggle('astra-megamenu-wrapper-focus');
|
|
closestLi.classList.toggle('ast-menu-hover');
|
|
}
|
|
|
|
const ariaExpanded = e.target.getAttribute('aria-expanded');
|
|
e.target.setAttribute('aria-expanded', ariaExpanded === 'false' || !ariaExpanded ? 'true' : 'false');
|
|
}, 10);
|
|
}
|
|
});
|
|
});
|
|
|
|
if (siteNavigationSubMenu || menuLi) {
|
|
document.addEventListener('click', function (e) {
|
|
closeNavigationMenu(siteNavigationSubMenu, dropdownToggleLinks, menuLi, megaMenuFullWidth);
|
|
}, false);
|
|
|
|
document.addEventListener('keydown', function (e) {
|
|
if ('Escape' === e.key) {
|
|
closeNavigationMenu(siteNavigationSubMenu, dropdownToggleLinks, menuLi, megaMenuFullWidth);
|
|
}
|
|
}, false);
|
|
}
|
|
}
|
|
|
|
const allParentMenu = document.querySelectorAll('nav.site-navigation .ast-nav-menu > .menu-item-has-children > a .ast-header-navigation-arrow');
|
|
|
|
if (allParentMenu) {
|
|
allParentMenu.forEach(element => {
|
|
element.addEventListener('keydown', function (e) {
|
|
if (!e.target.closest('li').classList.contains('ast-menu-hover') && 'Enter' === e.key) {
|
|
closeNavigationMenu(siteNavigationSubMenu, dropdownToggleLinks, menuLi, megaMenuFullWidth);
|
|
}
|
|
}, false);
|
|
});
|
|
}
|
|
}
|
|
|
|
function closeNavigationMenu(siteNavigationSubMenu, dropdownToggleLinks, menuLi, megaMenuFullWidth) {
|
|
if (siteNavigationSubMenu) {
|
|
siteNavigationSubMenu.forEach(element => {
|
|
element.classList.remove('astra-megamenu-focus');
|
|
element.classList.remove('toggled-on');
|
|
});
|
|
}
|
|
|
|
if (menuLi) {
|
|
menuLi.forEach(element => {
|
|
element.classList.remove('ast-menu-hover');
|
|
});
|
|
}
|
|
|
|
if (megaMenuFullWidth) {
|
|
megaMenuFullWidth.forEach(element => {
|
|
element.classList.remove('astra-megamenu-wrapper-focus')
|
|
});
|
|
}
|
|
|
|
|
|
if (dropdownToggleLinks) {
|
|
dropdownToggleLinks.forEach(element => {
|
|
element.setAttribute('aria-expanded', 'false');
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Close the Toggle Menu on Click on hash (#) link.
|
|
*
|
|
* @since 1.3.2
|
|
* @return void
|
|
*/
|
|
function toggleClose( )
|
|
{
|
|
var self = this || '',
|
|
hash = '#';
|
|
|
|
if( self && ! self.classList.contains('astra-search-icon') && null === self.closest('.ast-builder-menu') ) {
|
|
var link = String( self );
|
|
if( link.indexOf( hash ) !== -1 ) {
|
|
var link_parent = self.parentNode;
|
|
if ( body.classList.contains('ast-header-break-point') ) {
|
|
if( ! ( document.querySelector('header.site-header').classList.contains('ast-builder-menu-toggle-link') && link_parent.classList.contains('menu-item-has-children') ) ) {
|
|
/* Close Builder Header Menu */
|
|
var builder_header_menu_toggle = document.querySelector( '.main-header-menu-toggle' );
|
|
builder_header_menu_toggle.classList.remove( 'toggled' );
|
|
|
|
var main_header_bar_navigation = document.querySelector( '.main-header-bar-navigation' );
|
|
main_header_bar_navigation.classList.remove( 'toggle-on' );
|
|
|
|
main_header_bar_navigation.style.display = 'none';
|
|
|
|
astraTriggerEvent( document.querySelector('body'), 'astraMenuHashLinkClicked' );
|
|
}
|
|
|
|
} else {
|
|
while ( -1 === self.className.indexOf( 'nav-menu' ) ) {
|
|
// On li elements toggle the class .focus.
|
|
if ( 'li' === self.tagName.toLowerCase() ) {
|
|
if ( -1 !== self.className.indexOf( 'focus' ) ) {
|
|
self.className = self.className.replace( ' focus', '' );
|
|
}
|
|
}
|
|
self = self.parentElement;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Sets or removes .focus class on an element on focus.
|
|
*/
|
|
function toggleFocus() {
|
|
var self = this;
|
|
// Move up through the ancestors of the current link until we hit .nav-menu.
|
|
while ( -1 === self.className.indexOf( 'navigation-accessibility' ) ) {
|
|
// On li elements toggle the class .focus.
|
|
if ( 'li' === self.tagName.toLowerCase() ) {
|
|
self.classList.toggle('focus');
|
|
}
|
|
self = self.parentElement;
|
|
}
|
|
}
|
|
|
|
if( ! astra.is_header_footer_builder_active ) {
|
|
|
|
/* Add class if mouse clicked and remove if tab pressed */
|
|
if ( 'querySelector' in document && 'addEventListener' in window ) {
|
|
body.addEventListener( 'mousedown', function() {
|
|
body.classList.add( 'ast-mouse-clicked' );
|
|
} );
|
|
|
|
body.addEventListener( 'keydown', function() {
|
|
body.classList.remove( 'ast-mouse-clicked' );
|
|
} );
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Scroll to specific hash link.
|
|
*
|
|
* @since x.x.x
|
|
*/
|
|
if ( astra.is_scroll_to_id ) {
|
|
// Calculate the offset top of an element, accounting for nested elements.
|
|
const getOffsetTop = (element) => {
|
|
let offsetTop = 0;
|
|
while (element) {
|
|
offsetTop += element.offsetTop;
|
|
element = element.offsetParent;
|
|
}
|
|
return offsetTop;
|
|
}
|
|
|
|
const scrollToIDHandler = (e) => {
|
|
|
|
let offset = 0;
|
|
const siteHeader = document.querySelector('.site-header');
|
|
|
|
if (siteHeader) {
|
|
|
|
// Check and add offset to scroll top if header is sticky.
|
|
const stickyHeaders = siteHeader.querySelectorAll(
|
|
'div[data-stick-support]'
|
|
);
|
|
|
|
if ( stickyHeaders.length > 0 ) {
|
|
stickyHeaders.forEach( ( header ) => ( offset += header.clientHeight ) );
|
|
} else if ( typeof astraAddon !== 'undefined' && ! Number( astraAddon.sticky_hide_on_scroll ) ) {
|
|
const fixedHeader = document.querySelector( '#ast-fixed-header' );
|
|
if ( fixedHeader ) {
|
|
offset = fixedHeader?.clientHeight;
|
|
if ( Number( astraAddon?.header_main_shrink ) ) {
|
|
const headers = fixedHeader?.querySelectorAll(
|
|
'.ast-above-header-wrap, .ast-below-header-wrap'
|
|
);
|
|
headers?.forEach( () => ( offset -= 10 ) );
|
|
}
|
|
}
|
|
}
|
|
|
|
const href = e.target.closest('a').hash;
|
|
if (href) {
|
|
const scrollId = document.querySelector(href);
|
|
if (scrollId) {
|
|
const scrollOffsetTop = getOffsetTop(scrollId) - offset;
|
|
if( scrollOffsetTop ) {
|
|
astraSmoothScroll( e, scrollOffsetTop );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
let hashLinks = [];
|
|
const links = document.querySelectorAll(
|
|
'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-"])'
|
|
);
|
|
if (links) {
|
|
for (const link of links) {
|
|
if (link.href.split("#")[0] !== location.href.split("#")[0]) {
|
|
// Store the hash
|
|
hashLinks.push({
|
|
hash: link.hash,
|
|
url: link.href.split("#")[0],
|
|
});
|
|
} else if (link.hash !== "") {
|
|
link.addEventListener("click", scrollToIDHandler);
|
|
}
|
|
}
|
|
}
|
|
|
|
window.addEventListener('DOMContentLoaded', (event) => {
|
|
for (let link of hashLinks) {
|
|
if (window.location.href.split('#')[0] === link.url) {
|
|
const siteHeader = document.querySelector('.site-header');
|
|
let offset = 0;
|
|
|
|
// Check and add offset to scroll top if header is sticky.
|
|
const headerHeight = siteHeader.querySelectorAll('div[data-stick-support]');
|
|
if (headerHeight) {
|
|
headerHeight.forEach(single => {
|
|
offset += single.clientHeight;
|
|
});
|
|
}
|
|
|
|
const scrollId = document.querySelector(link.hash);
|
|
if (scrollId) {
|
|
const scrollOffsetTop = getOffsetTop(scrollId) - offset;
|
|
if (scrollOffsetTop) {
|
|
astraSmoothScroll(event, scrollOffsetTop);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Scroll to top.
|
|
*
|
|
* @since x.x.x
|
|
*/
|
|
if ( astra.is_scroll_to_top ) {
|
|
var masthead = document.querySelector( '#page header' );
|
|
var astScrollTop = document.getElementById( 'ast-scroll-top' );
|
|
|
|
astScrollToTopHandler(masthead, astScrollTop);
|
|
|
|
window.addEventListener('scroll', function () {
|
|
astScrollToTopHandler(masthead, astScrollTop);
|
|
});
|
|
|
|
astScrollTop.onclick = function(e){
|
|
astraSmoothScroll( e, 0 );
|
|
};
|
|
|
|
astScrollTop.addEventListener( 'keydown' , function(e) {
|
|
if ( e.key === 'Enter') {
|
|
astraSmoothScroll( e, 0 );
|
|
}
|
|
});
|
|
}
|
|
|
|
if (astra.palette_key === "palette_4"){
|
|
document.documentElement.classList.add("astra-dark-mode-enable");
|
|
} else {
|
|
document.documentElement.classList.remove("astra-dark-mode-enable");
|
|
}
|
|
|
|
/**
|
|
* To remove the blank space when the store notice gets dismissed.
|
|
* To adjust the height of the store notice when hanged over top.
|
|
*
|
|
* @since x.x.x
|
|
*/
|
|
window.addEventListener('DOMContentLoaded', (event) => {
|
|
const isHangOverTopNotice = document.querySelector('.ast-woocommerce-store-notice-hanged');
|
|
const adjustBodyHeight = () => {
|
|
const storeNotice = document.querySelector('.woocommerce-store-notice[data-position="hang-over-top"]');
|
|
document.body.style.marginTop = `${storeNotice?.clientHeight || 0}px`;
|
|
}
|
|
|
|
if (isHangOverTopNotice) {
|
|
window.addEventListener('resize', adjustBodyHeight);
|
|
setTimeout(() => adjustBodyHeight(), 0);
|
|
}
|
|
|
|
document
|
|
.querySelector('.woocommerce-store-notice__dismiss-link')
|
|
?.addEventListener('click', () => {
|
|
if (!wp?.customize) {
|
|
document.body.classList.remove('ast-woocommerce-store-notice-hanged');
|
|
window.removeEventListener('resize', adjustBodyHeight);
|
|
document.body.style.marginTop = 0;
|
|
}
|
|
});
|
|
});
|
|
|
|
})();
|
|
|
|
// Accessibility improvement for menu items.
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const submenuToggles = document.querySelectorAll('.menu-link .dropdown-menu-toggle');
|
|
|
|
const menuItemsWithSubmenu = document.querySelectorAll('.menu-item-has-children > a');
|
|
|
|
// Ensuring the submenu toggle action is handled with appropriate CSS, with cross browser compatibility for Enter key press.
|
|
menuItemsWithSubmenu.forEach(item => {
|
|
item.addEventListener('keydown', function(event) {
|
|
if (event.key === 'Enter') {
|
|
const submenu = item.nextElementSibling;
|
|
if (submenu && submenu.classList.contains('sub-menu')) {
|
|
submenu.classList.toggle('ast-visible');
|
|
const ariaExpanded = item.getAttribute('aria-expanded') === 'false' ? 'true' : 'false';
|
|
item.setAttribute('aria-expanded', ariaExpanded);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// Add event listeners for focus, blur, and keydown events.
|
|
submenuToggles.forEach(toggle => {
|
|
toggle.addEventListener('focus', () => updateAriaExpanded(toggle));
|
|
toggle.addEventListener('blur', () => updateAriaExpanded(toggle));
|
|
toggle.addEventListener('keydown', event => {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault();
|
|
toggleAriaExpanded(toggle);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Add event listener for Escape key press to close all submenus.
|
|
document.addEventListener('keydown', event => {
|
|
if (event.key === 'Escape') {
|
|
closeAllSubmenus();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Updates the `aria-expanded` attribute based on submenu visibility.
|
|
* @param {HTMLElement} toggle - The toggle element.
|
|
*/
|
|
function updateAriaExpanded(toggle) {
|
|
const menuItemLink = toggle.closest('.menu-link');
|
|
const submenu = menuItemLink.nextElementSibling;
|
|
const isSubmenuVisible = submenu.classList.contains('toggled-on');
|
|
menuItemLink.setAttribute('aria-expanded', isSubmenuVisible ? 'true' : 'false');
|
|
}
|
|
|
|
/**
|
|
* Toggles the `aria-expanded` attribute for a given toggle element.
|
|
* @param {HTMLElement} toggle - The toggle element.
|
|
*/
|
|
function toggleAriaExpanded(toggle) {
|
|
const menuItemLink = toggle.closest('.menu-link');
|
|
const currentState = menuItemLink.getAttribute('aria-expanded');
|
|
menuItemLink.setAttribute('aria-expanded', currentState === 'true' ? 'false' : 'true');
|
|
}
|
|
|
|
/**
|
|
* Closes all submenus by updating the `aria-expanded` attribute.
|
|
*/
|
|
function closeAllSubmenus() {
|
|
submenuToggles.forEach(toggle => updateAriaExpanded(toggle));
|
|
}
|
|
});
|
|
|
|
// Accessibility improvement for product card quick view and add to cart buttons.
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const thumbnailWraps = document.querySelectorAll('.astra-shop-thumbnail-wrap');
|
|
|
|
thumbnailWraps.forEach(wrap => {
|
|
const focusableElements = wrap.querySelectorAll('a, span');
|
|
|
|
focusableElements.forEach(el => {
|
|
el.addEventListener('focus', () => {
|
|
wrap.querySelectorAll('.ast-on-card-button, .ast-quick-view-trigger').forEach(btn => {
|
|
btn.style.opacity = '1';
|
|
btn.style.visibility = 'visible';
|
|
btn.style.borderStyle = 'none';
|
|
});
|
|
});
|
|
|
|
el.addEventListener('blur', () => {
|
|
// Added Check to check if child elements are still focused.
|
|
const isAnyFocused = Array.from(focusableElements).some(child => child === document.activeElement);
|
|
if (!isAnyFocused) {
|
|
wrap.querySelectorAll('.ast-on-card-button, .ast-quick-view-trigger').forEach(btn => {
|
|
btn.style.opacity = '';
|
|
btn.style.visibility = '';
|
|
});
|
|
}
|
|
});
|
|
});
|
|
});
|
|
});
|