@caweb/framework 1.9.3 → 1.9.4

package/src/scripts/components/header.js

@@ -2,9 +2,36 @@
 window.addEventListener('DOMContentLoaded', () => {
   let location_hash = window.location.hash.replace(/(\|)/g, "\\$1");
 
-  const header = document.querySelector('header');
-  const alerts = document.querySelector('.alerts');
-  const utilityHeader = document.querySelector('.utility-header');
+  const header = document.querySelector('header') ;
+  const pageContainer = document.querySelector('#page-container');
+
+  // array of elements that are compacted
+  const compactedElements = [
+    document.querySelector('.alerts'),
+    document.querySelector('.utility-header'),
+  ].filter(Boolean);
+
+  let compactedElementsHeight = compactedElements.reduce((total, element) => {
+      if( element instanceof HTMLElement  ){
+        return total + element.clientHeight;
+      }
+  
+      return total;
+      
+    }, 0);
+
+  // 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;
+    }
+  
 
   // scroll to target
   if( location_hash ){
@@ -12,61 +39,64 @@ window.addEventListener('DOMContentLoaded', () => {
     let target = document.getElementById(location_hash.substring(1));
 
     // if the location hash is not empty, we scroll to the target element
-    setTimeout(() => {
+    requestAnimationFrame(() => {
       target?.scrollIntoView({
         behavior: 'smooth'
       });
-    }, 1000);
+    });
   }
 
   if (!header) {
     return;
   }
+  
 
   const compactHeader = () => {
-    let scrollHeights = 0;
-
-    // lets collect the height of any elements above the header.
-    let current = header.previousElementSibling;
-    let miscElementHeights = 0;
-
-    while( current ){
-      // if current is a div, add its height to the miscElementHeights.
-      if( 'DIV' === current.tagName ){
-        miscElementHeights += current.clientHeight ;
-      }
-      current = current.previousElementSibling;
-    }
     
     // downscroll code passed the header height
     if (document.body.scrollTop >= header.offsetHeight ||
       document.documentElement.scrollTop >= header.offsetHeight
     ) {
-      // lets add the scroll heights of any alerts
-      if( alerts ){
-        scrollHeights += alerts.clientHeight;
-      }
-
-      // lets add the scroll heights of the utility header
-      if( utilityHeader ){
-        scrollHeights += utilityHeader.clientHeight;
-      }
-
-      // move the header up to the scroll height, minus any elements above the header
-      header.style.top = `-${(scrollHeights - miscElementHeights)}px`;
+      // move the header up to hide the compacted elements height, minus the top offset.
+      header.style.top = `-${(compactedElementsHeight - topOffset)}px`;
 
     } else {
       // reset header to initial position
-      header.style.top = `${miscElementHeights}px`; 
+      // we need to set the header's top to the offset.
+      if( header ){
+        header.style.top = `${topOffset}px`;
+      }
+
+      // 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`;
+      }
+    
     }
 
   };
+  
+  // for each element with an id we add the scroll-margin-top
+  document.querySelectorAll('#page-container [id]').forEach((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.
+      if( element.offsetTop > scrollMarginHeight * 2 ){
+        scrollMarginHeight -= compactedElementsHeight;
+      }
+
+      element.style.scrollMarginTop = `${scrollMarginHeight}px`;
+    }
+  });
 
   // reset position on scroll
   window.addEventListener(
     'scroll', compactHeader
   );
 
-  compactHeader()
+  compactHeader();
   
 });

package/src/styles/components/structural/_header.scss

@@ -4,6 +4,7 @@
 ----------------------------------------- */
 header.global-header{
   position: sticky;
+  top: 0;
   background-color: var(--bs-white, $white);
   z-index: 15;
   transition: all 0.3s ease;
@@ -78,4 +79,3 @@ header.global-header{
       text-align: right;
   }
 }
-

package/src/styles/components/structural/_type.scss

@@ -45,7 +45,8 @@ a {
   }
 }
 
-// add padding to all links except buttons and Divi buttons
+// add padding to all links except buttons and nav links, which have their own padding.
 #page-container a:not(.btn, .nav-link) {
   padding: .5rem 0;
-}
+}
+

package/src/styles/index.scss

@@ -30,4 +30,4 @@
 // -------------------------------------------------
 // Themes
 // -------------------------------------------------
-@import "theme/dark";
+@import "theme/dark";

package/build/delta.min.asset.php

@@ -1 +0,0 @@
-<?php return array('dependencies' => array(), 'version' => '4a99e034e3eeb401bbdf');