@cagovweb/state-template 6.5.0 → 6.5.2

package/dist/js/cagov.core.js

@@ -1,4 +1,4 @@
-var StateTemplateNpmPackageVersion="6.5.0";
+var StateTemplateNpmPackageVersion="6.5.2";
 /*!
   * Bootstrap v5.3.3 (https://getbootstrap.com/)
   * Copyright 2011-2024 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
@@ -6318,17 +6318,18 @@ var StateTemplateNpmPackageVersion="6.5.0";
 window.addEventListener("load", () => {
   const doc = document.documentElement;
 
-  let prevScroll = window.scrollY || doc.scrollTop;
-  let curScroll;
-  let direction = 0;
-  let prevDirection = 0;
-
-  const headerAlert = document.querySelector("header .alert");
+  const headerAlert = document.querySelectorAll("header .alert");
   const header = document.querySelector(".utility-header");
   const mainheader = document.querySelector("header");
   if (!header || !mainheader) return;
 
-  window.addEventListener("scroll", () => {
+  let prevScroll;
+  let curScroll;
+  let direction = 0;
+  let prevDirection = 0;
+  let ticking = false;
+
+  const updateHeader = () => {
     /*
      ** Find the direction of scroll
      ** 0 - initial, 1 - up, 2 - down
@@ -6346,26 +6347,33 @@ window.addEventListener("load", () => {
     if (direction !== prevDirection) {
       // Toggle Header
       if (direction === 2 && curScroll > 40) {
-        const hiddenheight =
-          header.clientHeight + (headerAlert?.clientHeight || 0);
+        // Add all the alert heights to the hidden height
+        let alertHeight = 0;
+        headerAlert.forEach(alert => {
+          alertHeight += alert.clientHeight;
+        });
 
+        const hiddenheight = header.clientHeight + alertHeight;
         mainheader.style.top = `-${hiddenheight}px`;
         prevDirection = direction;
       } else if (direction === 1 && curScroll < 40) {
-        // mainheader.classList.remove('scrolled');
-        // header.classList.remove('is-hidden');
-        // header.removeAttribute("style");
         mainheader.style.removeProperty("top");
         prevDirection = direction;
       }
     }
 
     prevScroll = curScroll;
+    ticking = false;
+  };
+
+  window.addEventListener("scroll", () => {
+    if (!ticking) {
+      requestAnimationFrame(updateHeader);
+      ticking = true;
+    }
   });
 });
 
-// retain scroll position
-
 //@ts-check
 
 window.addEventListener("load", () => {
@@ -7438,11 +7446,11 @@ window.addEventListener("load", () => {
         el.classList.add("has-sub");
 
         const carrot = document.createElement("span");
-        carrot.classList.add("ca-gov-icon-caret-down", "carrot");
+        carrot.classList.add("carrot");
         carrot.ariaHidden = "true";
 
         const toggleSubNav = document.createElement("div");
-        toggleSubNav.classList.add("ca-gov-icon-caret-right", "rotate");
+        toggleSubNav.classList.add("rotate");
         toggleSubNav.ariaHidden = "true";
         toggleSubNav.style.display = mobileView() ? "block" : "none";
 
@@ -7568,34 +7576,31 @@ window.addEventListener("load", () => {
     ".search-container:not(.featured-search)"
   ); // only on subpages, unique, same as #head-search
 
-  // header, contains nav, search form, etc, unique
-  const headerHeight = /** @type {HTMLElement} */ (
-    document.querySelector(".global-header")
-  )?.offsetHeight; // header height
-
-  /** @type {HTMLElement | null} */
-  const utility = document.querySelector(".utility-header"); // utility header, unique
-  const utilityHeight = utility?.offsetHeight || 0;
-  // utility header height
-
-  /** @type {NodeListOf<HTMLElement>} */
-  const alertBanner = document.querySelectorAll(".alert-banner"); // page can have multiple
+  const getSearchTop = () => {
+    /** @type {HTMLElement} */
+    const header = document.querySelector(".global-header");
+    /** @type {HTMLElement} */
+    const utility = document.querySelector(".utility-header");
+    /** @type {NodeListOf<HTMLElement>} */
+    const alertBanners = document.querySelectorAll(".alert-banner");
 
-  let alertbannerHeight = 0;
-  // taking into account multiple alert banners
-  alertBanner.forEach(oneBanner => {
-    alertbannerHeight += oneBanner.offsetHeight;
-  });
+    const headerHeight = header?.offsetHeight || 0;
+    const utilityHeight = utility?.offsetHeight || 0;
+    const alertBannerHeight = Array.from(alertBanners).reduce(
+      (sum, banner) => sum + (banner.offsetHeight || 0),
+      0
+    );
 
-  //const fullnav = document.querySelector(".top-level-nav"); // navigation ul tag, unique
+    // contains navigation and search form, unique
+    // Full width navigation
+    const navigationHeight = document
+      .querySelector(".navigation-search")
+      ?.classList.contains("full-width-nav")
+      ? 82
+      : 0;
 
-  // contains navigation and search form, unique
-  // Full width navigation
-  const navigationHeight = document
-    .querySelector(".navigation-search")
-    ?.classList.contains("full-width-nav")
-    ? 82
-    : 0;
+    return headerHeight - utilityHeight - alertBannerHeight - navigationHeight;
+  };
 
   if (searchText && searchContainer) {
     // Unfreeze search width when blured.
@@ -7623,15 +7628,14 @@ window.addEventListener("load", () => {
   }
 
   //  search box top position
-  // TODO: Really close to searchTop() except for top size
-  if (!mobileControlVisible()) {
+  const setSearchTop = () => {
+    if (!searchbox) return;
+
     // calulation search box top position
-    const searchtop =
-      headerHeight - utilityHeight - alertbannerHeight - navigationHeight;
-    if (!mobileControlVisible() && searchbox) {
-      searchbox.style.top = `${Math.max(searchtop, 82)}px`;
+    if (!mobileControlVisible()) {
+      searchbox.style.top = `${Math.max(getSearchTop(), 55)}px`;
     }
-  }
+  };
 
   // have the close button remove search results and the applied classes
   //resultsContainer.find('.close').on('click', removeSearchResults);
@@ -7727,46 +7731,18 @@ window.addEventListener("load", () => {
     }
   }
 
-  const setSearchTop = () => {
-    // calulation search box top position
-    const searchtop =
-      headerHeight - utilityHeight - alertbannerHeight - navigationHeight;
-    if (!mobileControlVisible() && searchbox) {
-      searchbox.style.top = `${Math.max(searchtop, 55)}px`;
-    }
-  };
-
   // on alert close event
   document.querySelectorAll(".alert-banner .close").forEach(oneClose => {
     oneClose.addEventListener("click", setSearchTop);
   });
 
-  // Calculation search box top property on the scroll for the fixed nav
-  window.addEventListener("scroll", () => {
-    if (!mobileControlVisible()) {
-      // setting timeout before calculating the search box top property otherwise it can take into account transitional values.
-      setTimeout(setSearchTop, 400);
-
-      // remove featured search on scroll in desktop
-      const FeaturedSearch = document.querySelector("nav ~ #head-search");
-      if (FeaturedSearch) {
-        if (
-          document.body.scrollTop >= 100 ||
-          document.documentElement.scrollTop >= 100
-        ) {
-          FeaturedSearch.classList.add("hidden-up");
-        } else {
-          FeaturedSearch.classList.remove("hidden-up");
-        }
-      }
-    }
-  });
-
-  //  search box top position if browser window is resized
-  window.addEventListener("resize", () => {
-    setSearchTop();
-    setSearchContainerAriaHidden();
-  });
+  if (searchContainer || searchbox) {
+    //  search box top position if browser window is resized
+    window.addEventListener("resize", () => {
+      setSearchTop();
+      setSearchContainerAriaHidden();
+    });
+  }
 
   setSearchContainerAriaHidden();
 });
@@ -7958,70 +7934,61 @@ window.addEventListener("load", () => {
 /**
  * @typedef {Object} ScrollCounter_Properties
  * @property {boolean} counterAlreadyFired
- * @property {number} counterSpeed
- * @property {number} counterTarget
- * @property {number} counterCount
- * @property {number} counterStep
  * @property {()=>void} updateCounter
  * @typedef {HTMLElement & ScrollCounter_Properties} ScrollCounter
  */
 
 document.addEventListener("DOMContentLoaded", () => {
-  // You can change this class to specify which elements are going to behave as counters.
   /** @type {NodeListOf<ScrollCounter>} */
   const elements = document.querySelectorAll(".scroll-counter");
 
   elements.forEach(item => {
-    // Add new attributes to the elements with the '.scroll-counter' HTML class
     item.counterAlreadyFired = false;
-    item.counterSpeed = Number(item.getAttribute("data-counter-time")) / 45;
-    item.counterTarget = +item.innerText;
-    item.counterCount = 0;
-    item.counterStep = item.counterTarget / item.counterSpeed;
+
+    const duration = Number(item.getAttribute("data-counter-time")); // ms
+    const target = +item.textContent; // final number
 
     item.updateCounter = () => {
-      item.counterCount += item.counterStep;
-      item.innerText = Math.ceil(item.counterCount).toLocaleString();
+      const start = performance.now();
 
-      if (item.counterCount < item.counterTarget) {
-        window.setTimeout(item.updateCounter, item.counterSpeed);
-      } else {
-        item.innerText = item.counterTarget.toLocaleString();
-      }
+      const animate = now => {
+        const elapsed = now - start;
+        const progress = Math.min(elapsed / duration, 1);
+        const current = Math.ceil(progress * target);
+
+        item.textContent = current.toLocaleString();
+
+        if (progress < 1) {
+          requestAnimationFrame(animate);
+        }
+      };
+
+      requestAnimationFrame(animate);
     };
   });
 
-  // Function to determine if an element is visible in the web page
-  const isElementVisible = (/** @type {Element} */ el) => {
-    const scroll = window.scrollY || window.pageYOffset;
-    const boundsTop = el.getBoundingClientRect().top + scroll;
-    const viewport = {
-      top: scroll,
-      bottom: scroll + window.innerHeight
-    };
-    const bounds = {
-      top: boundsTop,
-      bottom: boundsTop + el.clientHeight
-    };
-    return (
-      (bounds.bottom >= viewport.top && bounds.bottom <= viewport.bottom) ||
-      (bounds.top <= viewport.bottom && bounds.top >= viewport.top)
-    );
+  // Check if element is visible in viewport
+  const isElementVisible = el => {
+    const rect = el.getBoundingClientRect();
+    return rect.top < window.innerHeight && rect.bottom > 0;
   };
 
-  // Funciton that will get fired uppon scrolling
+  // Scroll handler
   const handleScroll = () => {
     elements.forEach(item => {
       if (item.counterAlreadyFired) return;
       if (!isElementVisible(item)) return;
+
       item.updateCounter();
       item.counterAlreadyFired = true;
     });
   };
 
-  // Fire the function on load and scroll
+  // Fire once on load and on scroll
   window.addEventListener("load", handleScroll);
-  window.addEventListener("scroll", handleScroll);
+  window.addEventListener("scroll", () => {
+    requestAnimationFrame(handleScroll);
+  });
 });
 
 //@ts-check
@@ -8376,13 +8343,24 @@ window.addEventListener("load", () => {
 
     // create on this page label
     const onthispage =
-      '<div id="on-this-page-navigation-label" class="label">On this page</div>';
+      '<div id="on-this-page-navigation-label" class="label" lang="en-US">On this page</div>';
     pagenav.innerHTML = onthispage;
 
     // add ul item to the nav and set aria labelledby
     pagenav.appendChild(pagenavUL);
     pagenav.setAttribute("aria-labelledby", "on-this-page-navigation-label");
   }
+
+  // Scroll to hash solution
+  const hashLocation = window.location;
+  if (hashLocation.hash) {
+    // Trigger a hashchange to ensure hash scrolling works
+    setTimeout(() => {
+      const currentHash = hashLocation.hash;
+      hashLocation.hash += "_"; // Remove the hash temporarily
+      hashLocation.hash = currentHash; // Reapply the hash
+    }, 500);
+  }
 }); // call out the function on the page load
 
 //@ts-check
@@ -8915,15 +8893,61 @@ window.addEventListener("load", () => {
 });
 
 window.addEventListener("DOMContentLoaded", () => {
-  //POLYFILL for CSS nesting
-  if (!CSS.supports("selector(&)")) {
-    // If CSS nesting not supported load alternative CSS file
-    const link = /** @type {HTMLLinkElement} */ (
-      document.getElementById("main-stylesheet")
+  const csscorelink = /** @type {HTMLcsscorelinkElement} */ (
+    document.querySelector("link[rel='stylesheet'][href*='cagov.core.']")
+  );
+
+  /**
+   * Checks if media queries are supported by the browser.
+   * @returns {boolean} True if media queries are supported, otherwise false.
+   */
+  function mediaQueriesSupported() {
+    return (
+      typeof window.matchMedia != "undefined" ||
+      typeof window.msMatchMedia != "undefined"
     );
-    if (link) {
-      link.href = link.href.replace("min", "flat");
-      console.log("POLYFILL: Using FLAT CSS instead of Nested");
+  }
+
+  /**
+   * Tests if media query range notation is supported by the browser.
+   * @returns {boolean} True if range notation is supported, otherwise false.
+   */
+  function testMediaQueryRangeNotation() {
+    return window.matchMedia("(width >= 0px)").matches;
+  }
+
+  /**
+   * Loads an alternative CSS file if CSS nesting or media query range notation is not supported.
+   */
+  function loadAlternativeCSS() {
+    if (csscorelink) {
+      csscorelink.removeAttribute("integrity");
+      csscorelink.href = csscorelink.href.replace(
+        /cagov\.core(\.min)?\.css/,
+        "cagov.core.flat.css"
+      );
+      console.log(`POLYFILL: Using new CSS file - ${csscorelink.href}`);
     }
   }
+
+  // POLYFILL for CSS nesting and media query range notation
+  /**
+   * Checks if CSS nesting is supported by the browser.
+   */
+  if (!CSS.supports("selector(&)")) {
+    console.log("POLYFILL: Nested CSS is not supported");
+
+    loadAlternativeCSS();
+  }
+
+  /**
+   * Checks if media queries are supported by the browser.
+   */
+  if (!mediaQueriesSupported() || !testMediaQueryRangeNotation()) {
+    console.log(
+      "POLYFILL: Media query range notation (<, <=, >, >=) is not supported."
+    );
+
+    loadAlternativeCSS();
+  }
 });