/* global kadenceConfig */
/**
* File navigation.js.
*
* Handles toggling the navigation menu for small screens and enables TAB key
* navigation support for dropdown menus.
*/
(function () {
"use strict";
window.kadence = {
/**
* Function to init different style of focused element on keyboard users and mouse users.
*/
initOutlineToggle: function () {
document.body.addEventListener("keydown", function () {
document.body.classList.remove("hide-focus-outline");
});
document.body.addEventListener("mousedown", function () {
document.body.classList.add("hide-focus-outline");
});
},
/**
* Get element's offset.
*/
getOffset: function (el) {
if (el instanceof HTMLElement) {
var rect = el.getBoundingClientRect();
return {
top: rect.top + window.pageYOffset,
left: rect.left + window.pageXOffset,
};
}
return {
top: null,
left: null,
};
},
/**
* traverses the DOM up to find elements matching the query
*
* @param {HTMLElement} target
* @param {string} query
* @return {NodeList} parents matching query
*/
findParents: function (target, query) {
var parents = [];
// recursively go up the DOM adding matches to the parents array
function traverse(item) {
var parent = item.parentNode;
if (parent instanceof HTMLElement) {
if (parent.matches(query)) {
parents.push(parent);
}
traverse(parent);
}
}
traverse(target);
return parents;
},
/**
* Toggle an attribute.
*/
toggleAttribute: function (element, attribute, trueVal, falseVal) {
if (trueVal === undefined) {
trueVal = true;
}
if (falseVal === undefined) {
falseVal = false;
}
if (element.getAttribute(attribute) !== trueVal) {
element.setAttribute(attribute, trueVal);
} else {
element.setAttribute(attribute, falseVal);
}
},
/**
* Initiate the script to process all
* navigation menus with submenu toggle enabled.
*/
initNavToggleSubmenus: function () {
var navTOGGLE = document.querySelectorAll(".nav--toggle-sub");
// No point if no navs.
if (!navTOGGLE.length) {
return;
}
for (let i = 0; i < navTOGGLE.length; i++) {
window.kadence.initEachNavToggleSubmenu(navTOGGLE[i]);
window.kadence.initEachNavToggleSubmenuInside(navTOGGLE[i]);
}
},
initEachNavToggleSubmenu: function (nav) {
// Get the submenus.
var SUBMENUS = nav.querySelectorAll(".menu ul");
// No point if no submenus.
if (!SUBMENUS.length) {
return;
}
for (let i = 0; i < SUBMENUS.length; i++) {
var parentMenuItem = SUBMENUS[i].parentNode;
let dropdown = parentMenuItem.querySelector(".dropdown-nav-toggle");
// If dropdown.
if (dropdown) {
var dropdown_label = parentMenuItem
.querySelector(".nav-drop-title-wrap")
.firstChild.textContent.trim();
var dropdownBtn = document.createElement("BUTTON"); // Create a <button> element
dropdownBtn.setAttribute(
"aria-label",
dropdown_label
? kadenceConfig.screenReader.expandOf + " " + dropdown_label
: kadenceConfig.screenReader.expand
);
dropdownBtn.classList.add("dropdown-nav-special-toggle");
parentMenuItem.insertBefore(
dropdownBtn,
parentMenuItem.childNodes[1]
);
// Toggle the submenu when we click the dropdown button.
dropdownBtn.addEventListener("click", function (e) {
e.preventDefault();
window.kadence.toggleSubMenu(e.target.closest("li"));
});
// Clean up the toggle if a mouse takes over from keyboard.
parentMenuItem.addEventListener("mouseleave", function (e) {
window.kadence.toggleSubMenu(e.target, false);
});
// When we focus on a menu link, make sure all siblings are closed.
parentMenuItem
.querySelector("a")
.addEventListener("focus", function (e) {
var parentMenuItemsToggled =
e.target.parentNode.parentNode.querySelectorAll(
"li.menu-item--toggled-on"
);
for (let j = 0; j < parentMenuItemsToggled.length; j++) {
if (parentMenuItem !== parentMenuItemsToggled[j]) {
window.kadence.toggleSubMenu(
parentMenuItemsToggled[j],
false
);
}
}
});
// Handle keyboard accessibility for traversing menu.
SUBMENUS[i].addEventListener("keydown", function (e) {
// These specific selectors help us only select items that are visible.
var focusSelector =
"ul.toggle-show > li > a, ul.toggle-show > li > .dropdown-nav-special-toggle";
// 9 is tab KeyMap
if (9 === e.keyCode) {
var focusSelector =
"ul.toggle-show > li > a, ul.toggle-show > li > .dropdown-nav-special-toggle";
if (
SUBMENUS[i].parentNode.classList.contains(
"kadence-menu-mega-enabled"
)
) {
focusSelector =
'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';
}
if (e.shiftKey) {
// Means we're tabbing out of the beginning of the submenu.
if (
window.kadence.isfirstFocusableElement(
SUBMENUS[i],
document.activeElement,
focusSelector
)
) {
window.kadence.toggleSubMenu(SUBMENUS[i].parentNode, false);
}
// Means we're tabbing out of the end of the submenu.
} else if (
window.kadence.islastFocusableElement(
SUBMENUS[i],
document.activeElement,
focusSelector
)
) {
window.kadence.toggleSubMenu(SUBMENUS[i].parentNode, false);
}
}
// 27 is keymap for esc key.
if (e.keyCode === 27) {
window.kadence.toggleSubMenu(SUBMENUS[i].parentNode, false);
// Move the focus back to the toggle.
SUBMENUS[i].parentNode
.querySelector(".dropdown-nav-special-toggle")
.focus();
}
});
SUBMENUS[i].parentNode.classList.add("menu-item--has-toggle");
}
}
},
initEachNavToggleSubmenuInside: function (nav) {
// Get the submenus.
var SUBMENUPARENTS = nav.querySelectorAll(".menu-item-has-children");
// No point if no submenus.
if (!SUBMENUPARENTS.length) {
return;
}
for (let i = 0; i < SUBMENUPARENTS.length; i++) {
// Handle verifying if navigation will go offscreen
SUBMENUPARENTS[i].addEventListener("mouseenter", function (e) {
if (SUBMENUPARENTS[i].querySelector("ul.sub-menu")) {
var elm = SUBMENUPARENTS[i].querySelector("ul.sub-menu");
var off = window.kadence.getOffset(elm);
var l = off.left;
var w = elm.offsetWidth;
var docW = window.innerWidth;
var isEntirelyVisible = l + w <= docW;
if (!isEntirelyVisible) {
elm.classList.add("sub-menu-edge");
}
}
});
}
},
/**
* Toggle submenus open and closed, and tell screen readers what's going on.
* @param {Object} parentMenuItem Parent menu element.
* @param {boolean} forceToggle Force the menu toggle.
* @return {void}
*/
toggleSubMenu: function (parentMenuItem, forceToggle) {
var toggleButton = parentMenuItem.querySelector(
".dropdown-nav-special-toggle"
),
subMenu = parentMenuItem.querySelector("ul");
let parentMenuItemToggled = parentMenuItem.classList.contains(
"menu-item--toggled-on"
);
var dropdown_label = parentMenuItem
.querySelector(".nav-drop-title-wrap")
.firstChild.textContent.trim();
// Will be true if we want to force the toggle on, false if force toggle close.
if (undefined !== forceToggle && "boolean" === typeof forceToggle) {
parentMenuItemToggled = !forceToggle;
}
// Toggle aria-expanded status.
toggleButton.setAttribute(
"aria-expanded",
(!parentMenuItemToggled).toString()
);
/*
* Steps to handle during toggle:
* - Let the parent menu item know we're toggled on/off.
* - Toggle the ARIA label to let screen readers know will expand or collapse.
*/
if (parentMenuItemToggled) {
// Toggle "off" the submenu.
setTimeout(function () {
parentMenuItem.classList.remove("menu-item--toggled-on");
subMenu.classList.remove("toggle-show");
toggleButton.setAttribute(
"aria-label",
dropdown_label
? kadenceConfig.screenReader.expandOf + " " + dropdown_label
: kadenceConfig.screenReader.expand
);
}, 5);
// Make sure all children are closed.
var subMenuItemsToggled = parentMenuItem.querySelectorAll(
".menu-item--toggled-on"
);
for (let i = 0; i < subMenuItemsToggled.length; i++) {
window.kadence.toggleSubMenu(subMenuItemsToggled[i], false);
}
} else {
// Make sure siblings are closed.
var parentMenuItemsToggled = parentMenuItem.parentNode.querySelectorAll(
"li.menu-item--toggled-on"
);
for (let i = 0; i < parentMenuItemsToggled.length; i++) {
window.kadence.toggleSubMenu(parentMenuItemsToggled[i], false);
}
// Toggle "on" the submenu.
parentMenuItem.classList.add("menu-item--toggled-on");
subMenu.classList.add("toggle-show");
toggleButton.setAttribute(
"aria-label",
dropdown_label
? kadenceConfig.screenReader.collapseOf + " " + dropdown_label
: kadenceConfig.screenReader.collapse
);
}
},
/**
* Returns true if element is the
* first focusable element in the container.
* @param {Object} container
* @param {Object} element
* @param {string} focusSelector
* @return {boolean} whether or not the element is the first focusable element in the container
*/
isfirstFocusableElement: function (container, element, focusSelector) {
var focusableElements = container.querySelectorAll(focusSelector);
if (0 < focusableElements.length) {
return element === focusableElements[0];
}
return false;
},
/**
* Returns true if element is the
* last focusable element in the container.
* @param {Object} container
* @param {Object} element
* @param {string} focusSelector
* @return {boolean} whether or not the element is the last focusable element in the container
*/
islastFocusableElement: function (container, element, focusSelector) {
var focusableElements = container.querySelectorAll(focusSelector);
//console.log( focusableElements );
if (0 < focusableElements.length) {
return element === focusableElements[focusableElements.length - 1];
}
return false;
},
/**
* Initiate the script to process all drawer toggles.
*/
toggleDrawer: function (element, changeFocus) {
changeFocus = typeof changeFocus !== "undefined" ? changeFocus : true;
var toggle = element;
var target = document.querySelector(toggle.dataset.toggleTarget);
if (!target) {
return;
}
var scrollBar = window.innerWidth - document.documentElement.clientWidth;
var duration = toggle.dataset.toggleDuration
? toggle.dataset.toggleDuration
: 250;
window.kadence.toggleAttribute(toggle, "aria-expanded", "true", "false");
if (target.classList.contains("show-drawer")) {
if (toggle.dataset.toggleBodyClass) {
document.body.classList.remove(toggle.dataset.toggleBodyClass);
}
// Hide the drawer.
target.classList.remove("active");
target.classList.remove("pop-animated");
document.body.classList.remove("kadence-scrollbar-fixer");
setTimeout(function () {
target.classList.remove("show-drawer");
var drawerEvent = new Event("kadence-drawer-closed");
window.dispatchEvent(drawerEvent);
if (toggle.dataset.setFocus && changeFocus) {
var focusElement = document.querySelector(toggle.dataset.setFocus);
if (focusElement) {
focusElement.focus();
if (focusElement.hasAttribute("aria-expanded")) {
window.kadence.toggleAttribute(
focusElement,
"aria-expanded",
"true",
"false"
);
}
}
}
}, duration);
} else {
// Show the drawer.
target.classList.add("show-drawer");
// Toggle body class
if (toggle.dataset.toggleBodyClass) {
document.body.classList.toggle(toggle.dataset.toggleBodyClass);
if (
toggle.dataset.toggleBodyClass.includes("showing-popup-drawer-")
) {
document.body.style.setProperty(
"--scrollbar-offset",
scrollBar + "px"
);
document.body.classList.add("kadence-scrollbar-fixer");
}
}
setTimeout(function () {
target.classList.add("active");
var drawerEvent = new Event("kadence-drawer-opened");
window.dispatchEvent(drawerEvent);
if (toggle.dataset.setFocus && changeFocus) {
var focusElement = document.querySelector(toggle.dataset.setFocus);
if (focusElement) {
if (focusElement.hasAttribute("aria-expanded")) {
window.kadence.toggleAttribute(
focusElement,
"aria-expanded",
"true",
"false"
);
}
var searchTerm = focusElement.value;
focusElement.value = "";
focusElement.focus();
focusElement.value = searchTerm;
}
}
}, 10);
setTimeout(function () {
target.classList.add("pop-animated");
}, duration);
// Keep Focus in Modal
if (target.classList.contains("popup-drawer")) {
// add all the elements inside modal which you want to make focusable
var focusableElements =
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
var focusableContent = target.querySelectorAll(focusableElements);
var firstFocusableElement = focusableContent[0]; // get first element to be focused inside modal
var lastFocusableElement =
focusableContent[focusableContent.length - 1]; // get last element to be focused inside modal
document.addEventListener("keydown", function (e) {
let isTabPressed = e.key === "Tab" || e.keyCode === 9;
if (!isTabPressed) {
return;
}
if (e.shiftKey) {
// if shift key pressed for shift + tab combination
if (document.activeElement === firstFocusableElement) {
lastFocusableElement.focus(); // add focus for the last focusable element
e.preventDefault();
}
} else {
// if tab key is pressed
if (document.activeElement === lastFocusableElement) {
// if focused has reached to last focusable element then focus first focusable element after pressing tab
firstFocusableElement.focus(); // add focus for the first focusable element
e.preventDefault();
}
}
});
}
}
},
/**
* Initiate the script to process all
* navigation menus with small toggle enabled.
*/
initToggleDrawer: function () {
var drawerTOGGLE = document.querySelectorAll(".drawer-toggle");
// No point if no drawers.
if (!drawerTOGGLE.length) {
return;
}
for (let i = 0; i < drawerTOGGLE.length; i++) {
drawerTOGGLE[i].addEventListener("click", function (event) {
event.preventDefault();
window.kadence.toggleDrawer(drawerTOGGLE[i]);
});
}
// Close Drawer if esc is pressed.
document.addEventListener("keyup", function (event) {
// 27 is keymap for esc key.
if (event.keyCode === 27) {
if (document.querySelectorAll(".popup-drawer.show-drawer.active")) {
event.preventDefault();
document
.querySelectorAll(".popup-drawer.show-drawer.active")
.forEach(function (element) {
window.kadence.toggleDrawer(
document.querySelector(
'*[data-toggle-target="' +
element.dataset.drawerTargetString +
'"]'
)
);
});
}
}
});
// Close modal on outside click.
document.addEventListener("click", function (event) {
var target = event.target;
var modal = document.querySelector(
".show-drawer.active .drawer-overlay"
);
if (target === modal) {
window.kadence.toggleDrawer(
document.querySelector(
'*[data-toggle-target="' + modal.dataset.drawerTargetString + '"]'
)
);
}
var searchModal = document.querySelector(
"#search-drawer.show-drawer.active .drawer-content"
);
var modal = document.querySelector(
"#search-drawer.show-drawer.active .drawer-overlay"
);
if (target === searchModal) {
window.kadence.toggleDrawer(
document.querySelector(
'*[data-toggle-target="' + modal.dataset.drawerTargetString + '"]'
)
);
}
});
},
/**
* Initiate the script to process all
* navigation menus with small toggle enabled.
*/
initMobileToggleSub: function () {
var modalMenus = document.querySelectorAll(".has-collapse-sub-nav");
modalMenus.forEach(function (modalMenu) {
var activeMenuItem = modalMenu.querySelector(".current-menu-item");
if (activeMenuItem) {
window.kadence
.findParents(activeMenuItem, "li")
.forEach(function (element) {
var subMenuToggle = element.querySelector(".drawer-sub-toggle");
if (subMenuToggle) {
window.kadence.toggleDrawer(subMenuToggle, true);
}
});
}
});
var drawerSubTOGGLE = document.querySelectorAll(".drawer-sub-toggle");
// No point if no drawers.
if (!drawerSubTOGGLE.length) {
return;
}
for (let i = 0; i < drawerSubTOGGLE.length; i++) {
drawerSubTOGGLE[i].addEventListener("click", function (event) {
event.preventDefault();
window.kadence.toggleDrawer(drawerSubTOGGLE[i]);
});
}
},
/**
* Initiate the script to process all
* navigation menus check to close mobile.
*/
initMobileToggleAnchor: function () {
var mobileModal = document.getElementById("mobile-drawer");
// No point if no drawers.
if (!mobileModal) {
return;
}
var menuLink = mobileModal.querySelectorAll("a:not(.kt-tab-title)");
// No point if no links.
if (!menuLink.length) {
return;
}
for (let i = 0; i < menuLink.length; i++) {
menuLink[i].addEventListener("click", function (event) {
window.kadence.toggleDrawer(
mobileModal.querySelector(".menu-toggle-close"),
false
);
});
}
},
/**
* Initiate setting the top padding for hero title when page is transparent.
*/
initTransHeaderPadding: function () {
if (document.body.classList.contains("no-header")) {
return;
}
if (
!document.body.classList.contains("transparent-header") ||
!document.body.classList.contains("mobile-transparent-header")
) {
return;
}
var titleHero = document.querySelector(".entry-hero-container-inner"),
header = document.querySelector("#masthead");
var updateHeroPadding = function (e) {
header;
if (kadenceConfig.breakPoints.desktop <= window.innerWidth) {
if (!document.body.classList.contains("transparent-header")) {
titleHero.style.paddingTop = 0;
} else {
titleHero.style.paddingTop = header.offsetHeight + "px";
}
} else {
if (!document.body.classList.contains("mobile-transparent-header")) {
titleHero.style.paddingTop = 0;
} else {
titleHero.style.paddingTop = header.offsetHeight + "px";
}
}
};
if (titleHero) {
window.addEventListener("resize", updateHeroPadding, false);
window.addEventListener("scroll", updateHeroPadding, false);
window.addEventListener("load", updateHeroPadding, false);
updateHeroPadding();
}
},
/**
* Initiate the script to stick the header.
* http://www.mattmorgante.com/technology/sticky-navigation-bar-javascript
*/
initStickyHeader: function () {
var desktopSticky = document.querySelector(
"#main-header .kadence-sticky-header"
),
mobileSticky = document.querySelector(
"#mobile-header .kadence-sticky-header"
),
wrapper = document.getElementById("wrapper"),
proSticky = document.querySelectorAll(".kadence-pro-fixed-above"),
proElements = document.querySelectorAll(".kadence-before-wrapper-item"),
activeSize = "mobile",
lastScrollTop = 0,
activeOffsetTop = 0;
if (parseInt(kadenceConfig.breakPoints.desktop) < window.innerWidth) {
activeSize = "desktop";
if (desktopSticky) {
desktopSticky.style.position = "static";
activeOffsetTop = window.kadence.getOffset(desktopSticky).top;
desktopSticky.style.position = null;
}
} else {
if (mobileSticky) {
mobileSticky.style.position = "static";
activeOffsetTop = window.kadence.getOffset(mobileSticky).top;
mobileSticky.style.position = null;
}
}
var updateSticky = function (e) {
var activeHeader;
var offsetTop = window.kadence.getOffset(wrapper).top;
if (
document.body.classList.toString().includes("boom_bar-static-top")
) {
var boomBar = document.querySelector(".boom_bar");
offsetTop =
window.kadence.getOffset(wrapper).top - boomBar.offsetHeight;
}
if (proElements.length) {
var proElementOffset = 0;
for (let i = 0; i < proElements.length; i++) {
proElementOffset = proElementOffset + proElements[i].offsetHeight;
}
offsetTop = window.kadence.getOffset(wrapper).top - proElementOffset;
}
if (proSticky.length) {
var proOffset = 0;
for (let i = 0; i < proSticky.length; i++) {
proOffset = proOffset + proSticky[i].offsetHeight;
}
offsetTop = window.kadence.getOffset(wrapper).top + proOffset;
}
if (kadenceConfig.breakPoints.desktop <= window.innerWidth) {
activeHeader = desktopSticky;
} else {
activeHeader = mobileSticky;
}
if (!activeHeader) {
return;
}
if (kadenceConfig.breakPoints.desktop <= window.innerWidth) {
if (activeSize === "mobile") {
activeOffsetTop = window.kadence.getOffset(activeHeader).top;
activeSize = "desktop";
} else if (e && e === "updateActive") {
activeHeader.style.top = "auto";
activeOffsetTop = window.kadence.getOffset(activeHeader).top;
activeSize = "desktop";
}
} else {
if (activeSize === "desktop") {
activeOffsetTop = window.kadence.getOffset(activeHeader).top;
activeSize = "mobile";
} else if (e && e === "updateActive") {
activeHeader.style.top = "auto";
activeOffsetTop = window.kadence.getOffset(activeHeader).top;
activeSize = "mobile";
}
}
var parent = activeHeader.parentNode;
var shrink = activeHeader.getAttribute("data-shrink");
var revealScroll = activeHeader.getAttribute("data-reveal-scroll-up");
var startHeight = parseInt(
activeHeader.getAttribute("data-start-height")
);
if (
!startHeight ||
(e && undefined !== e.type && "orientationchange" === e.type)
) {
activeHeader.setAttribute(
"data-start-height",
activeHeader.offsetHeight
);
startHeight = activeHeader.offsetHeight;
if (parent.classList.contains("site-header-upper-inner-wrap")) {
parent.style.height = null;
if (e && undefined !== e.type && "orientationchange" === e.type) {
if (activeHeader.classList.contains("item-is-fixed")) {
setTimeout(function () {
parent.style.height =
Math.floor(
parent.offsetHeight + activeHeader.offsetHeight
) + "px";
}, 21);
} else {
setTimeout(function () {
parent.style.height = parent.offsetHeight + "px";
}, 21);
}
} else {
parent.style.height = parent.offsetHeight + "px";
}
} else if (parent.classList.contains("site-header-inner-wrap")) {
parent.style.height = null;
parent.style.height = parent.offsetHeight + "px";
} else {
parent.style.height = activeHeader.offsetHeight + "px";
}
}
if ("true" === shrink) {
var shrinkHeight = activeHeader.getAttribute("data-shrink-height");
if (shrinkHeight) {
if ("true" === revealScroll) {
if (window.scrollY > lastScrollTop) {
var totalOffsetDelay = Math.floor(
Math.floor(activeOffsetTop) -
Math.floor(offsetTop) +
Math.floor(startHeight)
);
} else {
var totalOffsetDelay = Math.floor(activeOffsetTop - offsetTop);
}
} else {
var totalOffsetDelay = Math.floor(activeOffsetTop - offsetTop);
}
var shrinkLogos = activeHeader.querySelectorAll(".custom-logo");
var shrinkHeader = activeHeader.querySelector(
".site-main-header-inner-wrap"
);
var shrinkStartHeight = parseInt(
shrinkHeader.getAttribute("data-start-height")
);
if (!shrinkStartHeight) {
shrinkHeader.setAttribute(
"data-start-height",
shrinkHeader.offsetHeight
);
shrinkStartHeight = shrinkHeader.offsetHeight;
}
if (window.scrollY <= totalOffsetDelay) {
shrinkHeader.style.height = shrinkStartHeight + "px";
shrinkHeader.style.minHeight = shrinkStartHeight + "px";
shrinkHeader.style.maxHeight = shrinkStartHeight + "px";
if (shrinkLogos) {
for (let i = 0; i < shrinkLogos.length; i++) {
let shrinkLogo = shrinkLogos[i];
shrinkLogo.style.maxHeight = "100%";
}
}
} else if (window.scrollY > totalOffsetDelay) {
var shrinkingHeight = Math.max(
shrinkHeight,
shrinkStartHeight -
(window.scrollY - (activeOffsetTop - offsetTop))
);
shrinkHeader.style.height = shrinkingHeight + "px";
shrinkHeader.style.minHeight = shrinkingHeight + "px";
shrinkHeader.style.maxHeight = shrinkingHeight + "px";
if (shrinkLogos) {
for (let i = 0; i < shrinkLogos.length; i++) {
let shrinkLogo = shrinkLogos[i];
shrinkLogo.style.maxHeight = shrinkingHeight + "px";
}
}
}
}
}
if ("true" === revealScroll) {
var totalOffset = Math.floor(activeOffsetTop - offsetTop);
var currScrollTop = window.scrollY;
var elHeight = activeHeader.offsetHeight;
var wScrollDiff = lastScrollTop - currScrollTop;
var elTop = window
.getComputedStyle(activeHeader)
.getPropertyValue("transform")
.match(/(-?[0-9\.]+)/g);
if (elTop && undefined !== elTop[5] && elTop[5]) {
var elTopOff = parseInt(elTop[5]) + wScrollDiff;
} else {
var elTopOff = 0;
}
var isScrollingDown = currScrollTop > lastScrollTop;
if (currScrollTop <= totalOffset) {
activeHeader.style.transform = "translateY(0px)";
} else if (isScrollingDown) {
activeHeader.classList.add("item-hidden-above");
activeHeader.style.transform =
"translateY(" +
(Math.abs(elTopOff) > elHeight ? -elHeight : elTopOff) +
"px)";
} else {
var totalOffset = Math.floor(activeOffsetTop - offsetTop);
activeHeader.style.transform =
"translateY(" + (elTopOff > 0 ? 0 : elTopOff) + "px)";
activeHeader.classList.remove("item-hidden-above");
}
lastScrollTop = currScrollTop;
} else {
var totalOffset = Math.floor(activeOffsetTop - offsetTop);
}
if (window.scrollY == totalOffset) {
activeHeader.style.top = offsetTop + "px";
activeHeader.classList.add("item-is-fixed");
activeHeader.classList.add("item-at-start");
activeHeader.classList.remove("item-is-stuck");
parent.classList.add("child-is-fixed");
document.body.classList.add("header-is-fixed");
} else if (window.scrollY > totalOffset) {
if ("true" === revealScroll) {
if (
window.scrollY < elHeight + 60 &&
activeHeader.classList.contains("item-at-start")
) {
activeHeader.style.height = null;
activeHeader.style.top = offsetTop + "px";
activeHeader.classList.add("item-is-fixed");
activeHeader.classList.add("item-is-stuck");
parent.classList.add("child-is-fixed");
document.body.classList.add("header-is-fixed");
} else {
activeHeader.style.top = offsetTop + "px";
activeHeader.classList.add("item-is-fixed");
activeHeader.classList.add("item-is-stuck");
activeHeader.classList.remove("item-at-start");
parent.classList.add("child-is-fixed");
document.body.classList.add("header-is-fixed");
}
} else {
activeHeader.style.top = offsetTop + "px";
activeHeader.classList.add("item-is-fixed");
activeHeader.classList.remove("item-at-start");
activeHeader.classList.add("item-is-stuck");
parent.classList.add("child-is-fixed");
document.body.classList.add("header-is-fixed");
}
} else {
if (activeHeader.classList.contains("item-is-fixed")) {
activeHeader.classList.remove("item-is-fixed");
activeHeader.classList.remove("item-at-start");
activeHeader.classList.remove("item-is-stuck");
activeHeader.style.height = null;
activeHeader.style.top = null;
parent.classList.remove("child-is-fixed");
document.body.classList.remove("header-is-fixed");
}
}
};
if (desktopSticky || mobileSticky) {
window.addEventListener("resize", updateSticky, false);
window.addEventListener("scroll", updateSticky, false);
window.addEventListener("load", updateSticky, false);
window.addEventListener("orientationchange", updateSticky);
if (document.readyState === "complete") {
updateSticky("updateActive");
}
if (
document.body.classList.contains("woocommerce-demo-store") &&
document.body.classList.contains(
"kadence-store-notice-placement-above"
)
) {
var respondToVisibility = function (element, callback) {
var options = {
root: document.documentElement,
};
var observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
callback(entry.intersectionRatio > 0);
});
}, options);
observer.observe(element);
};
respondToVisibility(
document.querySelector(".woocommerce-store-notice"),
(visible) => {
updateSticky("updateActive");
}
);
}
}
},
getTopOffset: function (event = "scroll") {
if (event === "load") {
var desktopSticky = document.querySelector(
"#main-header .kadence-sticky-header"
),
mobileSticky = document.querySelector(
"#mobile-header .kadence-sticky-header"
);
} else {
var desktopSticky = document.querySelector(
'#main-header .kadence-sticky-header:not([data-reveal-scroll-up="true"])'
),
mobileSticky = document.querySelector(
'#mobile-header .kadence-sticky-header:not([data-reveal-scroll-up="true"])'
);
}
var activeScrollOffsetTop = 0,
activeScrollAdminOffsetTop = 0;
if (kadenceConfig.breakPoints.desktop <= window.innerWidth) {
if (desktopSticky) {
var shrink = desktopSticky.getAttribute("data-shrink");
if (
"true" === shrink &&
!desktopSticky.classList.contains("site-header-inner-wrap")
) {
activeScrollOffsetTop = Math.floor(
desktopSticky.getAttribute("data-shrink-height")
);
} else {
activeScrollOffsetTop = Math.floor(desktopSticky.offsetHeight);
}
} else {
activeScrollOffsetTop = 0;
}
if (document.body.classList.contains("admin-bar")) {
activeScrollAdminOffsetTop = 32;
}
} else {
if (mobileSticky) {
var shrink = mobileSticky.getAttribute("data-shrink");
if ("true" === shrink) {
activeScrollOffsetTop = Math.floor(
mobileSticky.getAttribute("data-shrink-height")
);
} else {
activeScrollOffsetTop = Math.floor(mobileSticky.offsetHeight);
}
} else {
activeScrollOffsetTop = 0;
}
if (document.body.classList.contains("admin-bar")) {
activeScrollAdminOffsetTop = 46;
}
}
return Math.floor(
activeScrollOffsetTop +
activeScrollAdminOffsetTop +
Math.floor(kadenceConfig.scrollOffset)
);
},
scrollToElement: function (element, history, event = "scroll") {
history = typeof history !== "undefined" ? history : true;
var offsetSticky = window.kadence.getTopOffset(event);
var originalTop =
Math.floor(element.getBoundingClientRect().top) - offsetSticky;
window.scrollBy({ top: originalTop, left: 0, behavior: "smooth" });
element.tabIndex = "-1";
element.focus({
preventScroll: true,
});
if (element.classList.contains("kt-title-item")) {
element.firstElementChild.click();
}
if (history) {
window.history.pushState("", "", "#" + element.id);
}
},
anchorScrollToCheck: function (e, respond) {
respond = typeof respond !== "undefined" ? respond : null;
if (e.target.getAttribute("href")) {
var targetLink = e.target;
} else {
var targetLink = e.target.closest("a");
if (!targetLink) {
return;
}
if (!targetLink.getAttribute("href")) {
return;
}
}
if (
targetLink.parentNode &&
targetLink.parentNode.hasAttribute("role") &&
targetLink.parentNode.getAttribute("role") === "tab"
) {
return;
}
var targetID;
if (respond) {
targetID = respond
.getAttribute("href")
.substring(respond.getAttribute("href").indexOf("#"));
} else {
targetID = targetLink
.getAttribute("href")
.substring(targetLink.getAttribute("href").indexOf("#"));
}
var targetAnchor = document.getElementById(targetID.replace("#", ""));
if (!targetAnchor) {
//window.location.href = targetLink.getAttribute('href');
return;
} else if (targetAnchor?.classList?.contains("kt-accordion-pane")) {
//the accordion blcok does it's own js if something is trying to anchor to it, don't mess with it.
return;
}
e.preventDefault();
window.kadence.scrollToElement(targetAnchor);
window.kadence.updateActiveAnchors();
},
/**
* Initiate the sticky sidebar last width.
*/
initStickySidebarWidget: function () {
if (!document.body.classList.contains("has-sticky-sidebar-widget")) {
return;
}
var offsetSticky = window.kadence.getTopOffset(),
widget = document.querySelector(
"#secondary .sidebar-inner-wrap .widget:last-child"
);
if (widget) {
widget.style.top = Math.floor(offsetSticky + 20) + "px";
widget.style.maxHeight =
"calc( 100vh - " + Math.floor(offsetSticky + 20) + "px )";
}
},
/**
* Initiate the sticky sidebar.
*/
initStickySidebar: function () {
if (!document.body.classList.contains("has-sticky-sidebar")) {
return;
}
var offsetSticky = window.kadence.getTopOffset(),
sidebar = document.querySelector("#secondary .sidebar-inner-wrap");
if (sidebar) {
sidebar.style.top = Math.floor(offsetSticky + 20) + "px";
sidebar.style.maxHeight =
"calc( 100vh - " + Math.floor(offsetSticky + 20) + "px )";
}
},
/**
* Initiate the active anchors
*/
initActiveAnchors: function () {
if (window.location.hash != "") {
window.kadence.updateActiveAnchors();
}
window.onhashchange = function () {
window.kadence.updateActiveAnchors();
};
},
updateActiveAnchors: function () {
const menuItems = document.querySelectorAll(".menu-item");
menuItems.forEach(function (menuItem) {
const menuItemLink = menuItem.querySelector("a");
if (menuItemLink?.href && menuItemLink.href.includes("#")) {
if (window.location.href == menuItemLink.href) {
menuItem.classList.add("current-menu-item");
} else {
menuItem.classList.remove("current-menu-item");
}
}
});
},
/**
* Initiate the scroll to top.
*/
initAnchorScrollTo: function () {
if (document.body.classList.contains("no-anchor-scroll")) {
return;
}
window.onhashchange = function () {
if (window.location.hash === "") {
window.scrollTo({ top: 0, behavior: "smooth" });
document.activeElement.blur();
}
};
if (window.location.hash != "") {
var id = location.hash.substring(1),
element;
if (!/^[A-z0-9_-]+$/.test(id)) {
return;
}
element = document.getElementById(id);
if (element) {
window.setTimeout(function () {
window.kadence.scrollToElement(element, false, "load");
}, 100);
}
}
var foundLinks = document.querySelectorAll(
"a[href*=\\#]:not([href=\\#]):not(.scroll-ignore):not([data-tab]):not([data-toggle])"
);
if (!foundLinks.length) {
return;
}
foundLinks.forEach(function (element) {
try {
var targetURL = new URL(element.href);
if (targetURL.pathname === window.location.pathname) {
element.addEventListener("click", function (e) {
window.kadence.anchorScrollToCheck(e);
});
}
} catch (error) {
console.log("ClassList: " + element.classList, "Invalid URL");
}
});
},
/**
* Initiate the scroll to top.
*/
initScrollToTop: function () {
var scrollBtn = document.getElementById("kt-scroll-up");
if (scrollBtn) {
var checkScrollVisiblity = function () {
if (window.scrollY > 100) {
scrollBtn.classList.add("scroll-visible");
scrollBtn.setAttribute("aria-hidden", false);
} else {
scrollBtn.classList.remove("scroll-visible");
scrollBtn.setAttribute("aria-hidden", true);
}
};
window.addEventListener("scroll", checkScrollVisiblity);
checkScrollVisiblity();
// Toggle the Scroll to top on click.
scrollBtn.addEventListener("click", function (e) {
e.preventDefault();
window.scrollTo({ top: 0, behavior: "smooth" });
document.querySelector(".skip-link").focus({
preventScroll: true
});
document.activeElement.blur();
});
}
var scrollBtnReader = document.getElementById("kt-scroll-up-reader");
if (scrollBtnReader) {
scrollBtnReader.addEventListener("click", function (e) {
e.preventDefault();
//window.scrollBy( { top: 0, left: 0, behavior: 'smooth' } );
window.scrollTo({ top: 0, behavior: "smooth" });
document.querySelector(".skip-link").focus();
});
}
},
// Initiate the menus when the DOM loads.
init: function () {
window.kadence.initNavToggleSubmenus();
window.kadence.initToggleDrawer();
window.kadence.initMobileToggleAnchor();
window.kadence.initMobileToggleSub();
window.kadence.initOutlineToggle();
window.kadence.initStickyHeader();
window.kadence.initStickySidebar();
window.kadence.initStickySidebarWidget();
window.kadence.initTransHeaderPadding();
window.kadence.initAnchorScrollTo();
window.kadence.initScrollToTop();
window.kadence.initActiveAnchors();
},
};
if ("loading" === document.readyState) {
// The DOM has not yet been loaded.
document.addEventListener("DOMContentLoaded", window.kadence.init);
} else {
// The DOM has already been loaded.
window.kadence.init();
}
})();