@caweb/framework 1.9.13 → 1.9.15

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@caweb/framework",
-    "version": "1.9.13",
+    "version": "1.9.15",
     "description": "Official CAWebPublishing Framework frontend toolkit",
     "author": "CAWebPublishing",
     "homepage": "https://github.com/CAWebPublishing/framework#readme",

package/src/scripts/components/dark-mode.js

@@ -1,4 +1,4 @@
-document.addEventListener( 'DOMContentLoaded', () => {
+document.addEventListener( 'load', () => {
 	// Set is-dark-mode class if user has requested dark mode.
 	if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches ){
 		document.documentElement.setAttribute('data-bs-theme', 'dark');

package/src/scripts/components/external-link.js

@@ -1,7 +1,7 @@
-//@ts-check
+
 
 /* EXTERNAL LINK ICON */
-window.addEventListener('DOMContentLoaded', () => {
+window.addEventListener('load', () => {
   const ext = '<span class="ca-gov-icon-external-link" aria-hidden="true"></span><span class="sr-only">opens in a new window</span>';
   
   // Add any exceptions to not render here

package/src/scripts/components/header.js

@@ -1,14 +1,17 @@
-//@ts-check
-window.addEventListener('DOMContentLoaded', () => {
+
+window.addEventListener('load', () => {
   let location_hash = window.location.hash.replace(/(\|)/g, "\\$1");
 
   const header = document.querySelector('header') ;
   const pageContainer = document.querySelector('#page-container');
 
+  const alerts = header?.querySelector('.alerts');
+  const utilityHeader = header?.querySelector('.utility-header');
+
   // array of elements that are compacted
   const compactedElements = [
-    document.querySelector('.alerts'),
-    document.querySelector('.utility-header'),
+    alerts,
+    utilityHeader,
   ].filter(Boolean);
 
   const getCompactedElementsHeight = () => {
@@ -21,21 +24,24 @@ window.addEventListener('DOMContentLoaded', () => {
       
     }, 0);
   }
-    
+
   let compactedElementsHeight = getCompactedElementsHeight();
 
-  // lets collect the height of any fixed elements above the header.
-  let topOffset = 0;
-  let current = header?.previousElementSibling;
-  
-  while( current ){
-      // if current element has a fixed position, add its height to the topOffset.
-      if( current instanceof HTMLElement && window.getComputedStyle(current).position === 'fixed' ){
-        topOffset += current.clientHeight ;
-      }
-      current = current.previousElementSibling;
+  // resize observer function to watch if compacted elements change height, so we can update the compacted elements height when they change.
+  const clientHeightObserver = (entries) => {
+    for(const entry of entries) {
+      // update the compacted elements height when the compacted entry changes., which can happen when google translate loads and changes the height of the utility header or when items wrap
+      compactedElementsHeight = getCompactedElementsHeight();
     }
-  
+  }
+
+  // observe compacted elements for height changes, so we can update the compacted elements height when they change.
+  compactedElements.forEach((element) => {
+    if( element instanceof HTMLElement  ){
+      const observer = new ResizeObserver(clientHeightObserver);
+      observer.observe(element);
+    }
+  });
 
   // scroll to target
   if( location_hash ){
@@ -53,7 +59,6 @@ window.addEventListener('DOMContentLoaded', () => {
   if (!header) {
     return;
   }
-  
 
   const compactHeader = () => {
     // downscroll code passed the header height
@@ -61,20 +66,15 @@ window.addEventListener('DOMContentLoaded', () => {
       document.documentElement.scrollTop >= header.offsetHeight
     ) {
       // move the header up to hide the compacted elements height, minus the top offset.
-      header.style.top = `-${(compactedElementsHeight - topOffset)}px`;
+      header.style.top = `-${(compactedElementsHeight)}px`;
 
     } else {
       // reset header to initial position
       // we need to set the header's top to the offset.
       if( header ){
-        header.style.top = `${topOffset}px`;
+        header.style.top = 0;
       }
 
-      // if we have a page container, we need to set its top padding to the offset
-      if( pageContainer && pageContainer instanceof HTMLElement  ){
-        // pageContainer.style.paddingTop = `${topOffset}px`;
-      }
-    
     }
 
   };
@@ -89,9 +89,8 @@ window.addEventListener('DOMContentLoaded', () => {
 
   // for each element with an id we add the scroll-margin-top
   const updateScrollMarginTop = (/** @type Element */ element) => {
+    
     if( element instanceof HTMLElement ){ 
-          let scrollMarginHeight = header.clientHeight + topOffset;
-  
           // if the elements offsetTop is greater than twice the header size, 
           // we can assume the header is compacted
           // so we need to subtract the compacted elements height from the scroll margin.

package/src/scripts/components/mobile-controls.js

@@ -1,5 +1,5 @@
 
-window.addEventListener('DOMContentLoaded', () => {
+window.addEventListener('load', () => {
   const isDesktopWidth = () => window.innerWidth > 992; //Maximum px for mobile width
 
   const mainHeader = document.querySelector('header');

package/src/scripts/components/return-top.js

@@ -1,5 +1,5 @@
-//@ts-check
-window.addEventListener('DOMContentLoaded', () => {
+
+window.addEventListener('load', () => {
   document.querySelectorAll('.return-top').forEach(returnTop =>
     returnTop.addEventListener('click', () => {
       document.body.scrollTop = 0; // For Safari