=Starting the Favourites.js setup, converting previous Northeh stuff to new...

Jake Vanderwerf

4 days ago 0afb2c0046b55c123eafb4ab9ee77efa68d12463

 src/glossary/view.js

@@ -14,7 +14,6 @@
      this.navList = this.nav.querySelector('ul');
      this.activeClass = 'active';
      this.currentActive = null;
      this.breakpoint = 768; // Adjust this to match your small screen breakpoint

      this.init();
      this.setupResizeHandler();
@@ -42,13 +41,6 @@
   }

   getRootMargin() {
      if (window.innerWidth < this.breakpoint) {
         // On small screens: 5rem from top and bottom
         // Convert rem to pixels
         const remInPixels = parseFloat(getComputedStyle(document.documentElement).fontSize);
         const margin = Math.round(remInPixels * 5); // 5rem in pixels
         return `-${margin}px 0px -${margin}px 0px`;
      }
      // On larger screens: centered (50% from top and bottom)
      return '-50% 0px -50% 0px';
   }
@@ -94,16 +86,11 @@
      this.terms.forEach(term => {
         const rect = term.getBoundingClientRect();

         // Check if term is within the trigger zone (4rem from top or bottom on small screens)
         const isInZone = window.innerWidth < this.breakpoint
            ? rect.top >= margin && rect.top <= window.innerHeight - margin
            : rect.top + rect.height / 2 >= 0 && rect.top + rect.height / 2 <= window.innerHeight;
         const isInZone = rect.top + rect.height / 2 >= 0 && rect.top + rect.height / 2 <= window.innerHeight;

         if (isInZone) {
            // Find closest to the trigger point
            const triggerPoint = window.innerWidth < this.breakpoint
               ? margin  // Top edge of zone on small screens
               : window.innerHeight / 2;  // Center on large screens
            const triggerPoint = window.innerHeight / 2;

            const distance = Math.abs(rect.top - triggerPoint);

@@ -186,6 +173,7 @@
   }
}


// Initialize when DOM is ready
if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', () => {