snap-scroll.js

// Snap-scroll section controller
(function() {
  'use strict';

  // Check for reduced motion preference
  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  // Prevent browser scroll restoration
  if ('scrollRestoration' in history) {
    history.scrollRestoration = 'manual';
  }

  class SnapScroll {
    constructor() {
      this.sections = Array.from(document.querySelectorAll('.section'));
      this.navItems = document.querySelectorAll('.nav-item');
      this.footer = document.querySelector('.site-footer');
      this.currentIndex = 0;
      this.isTransitioning = false;
      this.transitionDuration = prefersReducedMotion ? 0 : 600;
      this.callbacks = {
        onTransitionStart: [],
        onTransitionEnd: []
      };

      // Touch support
      this.touchStartY = 0;
      this.touchThreshold = 50;

      // Debounce wheel events
      this.wheelTimeout = null;
      this.wheelCooldown = 800;

      if (this.sections.length === 0) return;

      this.init();
    }

    init() {
      // Set initial state
      this.sections.forEach((section, index) => {
        section.setAttribute('data-index', index);
        if (index === 0) {
          section.classList.add('active');
        }
      });

      // Update footer visibility
      this.updateFooterVisibility();

      // Bind event listeners
      this.bindEvents();

      // Update nav highlight
      this.updateNavHighlight();

      // Trigger initial stagger animation
      this.triggerStaggerAnimation(this.sections[0]);
    }

    bindEvents() {
      // Wheel event
      window.addEventListener('wheel', (e) => this.handleWheel(e), { passive: false });

      // Keyboard navigation
      window.addEventListener('keydown', (e) => this.handleKeydown(e));

      // Touch events for mobile
      window.addEventListener('touchstart', (e) => this.handleTouchStart(e), { passive: true });
      window.addEventListener('touchend', (e) => this.handleTouchEnd(e), { passive: true });

      // Nav click events
      this.navItems.forEach(item => {
        item.addEventListener('click', (e) => this.handleNavClick(e));
      });
    }

    handleWheel(e) {
      // Skip if modal is open
      if (this.isModalOpen()) return;

      // Skip if transitioning or in cooldown
      if (this.isTransitioning || this.wheelTimeout) return;

      e.preventDefault();

      const direction = e.deltaY > 0 ? 1 : -1;
      const targetIndex = this.currentIndex + direction;

      if (targetIndex >= 0 && targetIndex < this.sections.length) {
        this.goToSection(targetIndex);

        // Cooldown to prevent rapid firing
        this.wheelTimeout = setTimeout(() => {
          this.wheelTimeout = null;
        }, this.wheelCooldown);
      }
    }

    handleKeydown(e) {
      // Skip if typing in input or modal is open
      if (this.isTyping(e.target) || this.isModalOpen()) return;

      switch (e.key) {
        case 'ArrowDown':
        case 'ArrowRight':
          e.preventDefault();
          this.next();
          break;
        case 'ArrowUp':
        case 'ArrowLeft':
          e.preventDefault();
          this.prev();
          break;
        case 'Home':
          e.preventDefault();
          this.goToSection(0);
          break;
        case 'End':
          e.preventDefault();
          this.goToSection(this.sections.length - 1);
          break;
        case '1':
        case '2':
        case '3':
        case '4':
        case '5':
        case '6':
          const index = parseInt(e.key) - 1;
          if (index < this.sections.length) {
            e.preventDefault();
            this.goToSection(index);
          }
          break;
      }
    }

    handleTouchStart(e) {
      this.touchStartY = e.touches[0].clientY;
    }

    handleTouchEnd(e) {
      if (this.isModalOpen()) return;

      const touchEndY = e.changedTouches[0].clientY;
      const deltaY = this.touchStartY - touchEndY;

      if (Math.abs(deltaY) > this.touchThreshold) {
        if (deltaY > 0) {
          this.next();
        } else {
          this.prev();
        }
      }
    }

    handleNavClick(e) {
      e.preventDefault();
      const sectionId = e.currentTarget.getAttribute('data-section');
      const targetSection = document.getElementById(sectionId);

      if (targetSection) {
        const targetIndex = this.sections.indexOf(targetSection);
        if (targetIndex !== -1) {
          this.goToSection(targetIndex);
        }
      }
    }

    goToSection(index) {
      // Validate index
      if (index < 0 || index >= this.sections.length || index === this.currentIndex) return;
      if (this.isTransitioning) return;

      this.isTransitioning = true;

      const currentSection = this.sections[this.currentIndex];
      const nextSection = this.sections[index];
      const direction = index > this.currentIndex ? 'down' : 'up';

      // Fire transition start callbacks
      this.fireCallbacks('onTransitionStart', { from: this.currentIndex, to: index });

      // Update nav highlight immediately
      this.currentIndex = index;
      this.updateNavHighlight();

      // Reset stagger animations on current section
      this.resetStaggerAnimation(currentSection);

      // Animate out current section
      currentSection.classList.add('fade-out');
      currentSection.classList.add(direction === 'down' ? 'slide-up' : 'slide-down');

      // Prepare next section
      nextSection.classList.add('fade-in');
      nextSection.classList.add(direction === 'down' ? 'from-below' : 'from-above');

      // After transition
      setTimeout(() => {
        // Clean up current section
        currentSection.classList.remove('active', 'fade-out', 'slide-up', 'slide-down');

        // Activate next section
        nextSection.classList.remove('fade-in', 'from-below', 'from-above');
        nextSection.classList.add('active');

        // Trigger stagger animation
        this.triggerStaggerAnimation(nextSection);

        // Update footer visibility
        this.updateFooterVisibility();

        // Update ARIA
        this.updateAria();

        this.isTransitioning = false;

        // Fire transition end callbacks
        this.fireCallbacks('onTransitionEnd', { index: this.currentIndex });
      }, this.transitionDuration);
    }

    next() {
      if (this.currentIndex < this.sections.length - 1) {
        this.goToSection(this.currentIndex + 1);
      }
    }

    prev() {
      if (this.currentIndex > 0) {
        this.goToSection(this.currentIndex - 1);
      }
    }

    updateNavHighlight() {
      const currentSectionId = this.sections[this.currentIndex].id;

      this.navItems.forEach(item => {
        const sectionId = item.getAttribute('data-section');
        if (sectionId === currentSectionId) {
          item.classList.add('active');
        } else {
          item.classList.remove('active');
        }
      });
    }

    updateFooterVisibility() {
      if (!this.footer) return;

      // Show footer only on contact section (last section)
      const isLastSection = this.currentIndex === this.sections.length - 1;
      this.footer.classList.toggle('visible', isLastSection);
    }

    updateAria() {
      this.sections.forEach((section, index) => {
        section.setAttribute('aria-hidden', index !== this.currentIndex);
      });
    }

    triggerStaggerAnimation(section) {
      const elements = section.querySelectorAll('.stagger-animate');
      elements.forEach((el, index) => {
        el.style.setProperty('--stagger-delay', index);
        // Small delay to ensure CSS transition triggers
        requestAnimationFrame(() => {
          el.classList.add('animate-in');
        });
      });
    }

    resetStaggerAnimation(section) {
      const elements = section.querySelectorAll('.stagger-animate');
      elements.forEach(el => {
        el.classList.remove('animate-in');
      });
    }

    isTyping(target) {
      return target.tagName === 'INPUT' ||
             target.tagName === 'TEXTAREA' ||
             target.isContentEditable;
    }

    isModalOpen() {
      const modal = document.getElementById('flipbookModal');
      return modal && modal.classList.contains('active');
    }

    // Callback system
    onTransitionStart(callback) {
      this.callbacks.onTransitionStart.push(callback);
    }

    onTransitionEnd(callback) {
      this.callbacks.onTransitionEnd.push(callback);
    }

    fireCallbacks(event, data) {
      this.callbacks[event].forEach(callback => callback(data));
    }

    // Get current section index
    getCurrentIndex() {
      return this.currentIndex;
    }
  }

  // Initialize on DOM ready
  function init() {
    window.snapScroll = new SnapScroll();
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  // Expose for external use
  window.SnapScroll = SnapScroll;
})();