/* 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;
        }
        // Account for WooCommerce store notice
        if (
          document.body.classList.contains("woocommerce-demo-store") &&
          document.body.classList.contains("kadence-store-notice-placement-above")
        ) {
          var storeNotice = document.querySelector(".woocommerce-store-notice");
          if (storeNotice && storeNotice.offsetHeight > 0) {
            offsetTop = offsetTop - storeNotice.offsetHeight;
          }
        }
        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;
        }
      }
      
      // Check for tab elements - expanded to include WooCommerce tabs
      if (
        targetLink.parentNode &&
        targetLink.parentNode.hasAttribute("role") &&
        targetLink.parentNode.getAttribute("role") === "tab"
      ) {
        return;
      }
      
      // Check for tab navigation links - exclude only actual tab navigation elements
      if (targetLink.closest(".woocommerce-tabs ul.tabs")) {
        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]):not(.woocommerce-tabs a):not(.tabs a)"
      );
      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();
  }
})();
