@hortonstudio/main 1.7.16 → 1.8.0

package/autoInit/accessibility.js

@@ -661,6 +661,78 @@ export function init() {
         tocList.appendChild(tocItem);
       });
 
+      // Set up IntersectionObserver for active state
+      const sections = Array.from(h2Headings).map(heading => heading.parentElement);
+      const tocLinks = tocList.querySelectorAll('a');
+      let currentActiveId = null;
+
+      const observerOptions = {
+        rootMargin: '-10% 0px -50% 0px',
+        threshold: [0, 0.25, 0.5, 0.75, 1]
+      };
+
+      const observer = new IntersectionObserver((entries) => {
+        // Collect all currently intersecting sections
+        const intersectingSections = [];
+
+        entries.forEach(entry => {
+          const sectionId = entry.target.id;
+          const existingIndex = intersectingSections.findIndex(s => s.id === sectionId);
+
+          if (entry.isIntersecting) {
+            if (existingIndex === -1) {
+              intersectingSections.push({
+                id: sectionId,
+                ratio: entry.intersectionRatio,
+                element: entry.target
+              });
+            } else {
+              intersectingSections[existingIndex].ratio = entry.intersectionRatio;
+            }
+          }
+        });
+
+        // Find all currently intersecting sections (not just from this batch)
+        const allIntersecting = sections
+          .filter(section => {
+            const rect = section.getBoundingClientRect();
+            const windowHeight = window.innerHeight;
+            // Check if section is in the active zone
+            return rect.top < windowHeight * 0.6 && rect.bottom > windowHeight * 0.1;
+          })
+          .map(section => ({
+            id: section.id,
+            top: section.getBoundingClientRect().top,
+            element: section
+          }));
+
+        if (allIntersecting.length === 0) return;
+
+        // Pick the topmost section in the active zone
+        const topmost = allIntersecting.reduce((prev, curr) =>
+          curr.top < prev.top ? curr : prev
+        );
+
+        // Only update if the active section changed
+        if (currentActiveId !== topmost.id) {
+          currentActiveId = topmost.id;
+
+          // Remove is-active from all links
+          tocLinks.forEach(link => link.classList.remove('is-active'));
+
+          // Add is-active to the corresponding link
+          const activeLink = Array.from(tocLinks).find(link =>
+            link.getAttribute('href') === `#${topmost.id}`
+          );
+          if (activeLink) {
+            activeLink.classList.add('is-active');
+          }
+        }
+      }, observerOptions);
+
+      // Observe all sections
+      sections.forEach(section => observer.observe(section));
+
     });
   }
 

package/index.js

@@ -9,6 +9,9 @@ const initializeHsMain = async () => {
     return;
   }
 
+  // Add hs-main class to HTML element immediately
+  document.documentElement.classList.add('hs-main');
+
   const queuedModules = Array.isArray(window[API_NAME]) ? window[API_NAME] : [];
 
   const animationModules = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hortonstudio/main",
-  "version": "1.7.16",
+  "version": "1.8.0",
   "description": "Animation and utility library for client websites",
   "main": "index.js",
   "type": "module",