OwlCyberSecurity - MANAGER
Edit File: navigation.js
/* 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(); }); } }, initClickToOpen: function () { // Find all <li> elements with the `menu-item--has-toggle` class const toggleItems = document.querySelectorAll('.header-navigation.click-to-open li.menu-item--has-toggle'); toggleItems.forEach(function (item) { const anchor = item.querySelector('a'); // Find the first child anchor inside <li> const button = item.querySelector('button[class="dropdown-nav*"]'); // Find a button if it exists [anchor, button].forEach(function (clickableTarget) { if (clickableTarget) { clickableTarget.addEventListener('click', function (e) { e.preventDefault(); // Prevent default action for <a> or <button> // Toggle the 'opened' class on the first child `ul.sub-menu` const submenu = item.querySelector('ul.sub-menu'); if (submenu) { const isOpen = submenu.classList.contains('opened'); submenu.classList.toggle('opened', !isOpen); // Toggle the 'opened' class // Close other open submenus at the same level const siblings = Array.from(item.parentNode.children).filter(sibling => sibling !== item); siblings.forEach(function (sibling) { const siblingSubmenu = sibling.querySelector(':scope > ul.sub-menu'); if (siblingSubmenu) { siblingSubmenu.classList.remove('opened'); // Close sibling submenus } }); // Add a `click` listener on the document to close the menu when clicking outside if (!isOpen) { // If opening the menu, add the event listener const handleClickOutside = (event) => { if (!item.contains(event.target)) { submenu.classList.remove('opened'); // Close the submenu document.removeEventListener('click', handleClickOutside); // Remove the listener } }; document.addEventListener('click', handleClickOutside); } } }); } }); }); }, // 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(); window.kadence.initClickToOpen(); }, }; 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(); } })();