script.js

/**
 * Ice Age Animals - Swipe Navigation
 * Handles dot navigation updates and keyboard navigation
 */

(function() {
    'use strict';

    // DOM Elements
    const slidesContainer = document.querySelector('.slides');
    const dots = document.querySelectorAll('.dot');
    const slides = document.querySelectorAll('.slide');
    const swipeHint = document.getElementById('swipeHint');

    // State
    let currentSlide = 0;
    const totalSlides = slides.length;

    /**
     * Update the active dot indicator
     * @param {number} index - The index of the current slide
     */
    function updateActiveDot(index) {
        dots.forEach((dot, i) => {
            if (i === index) {
                dot.classList.add('active');
                dot.setAttribute('aria-current', 'true');
            } else {
                dot.classList.remove('active');
                dot.removeAttribute('aria-current');
            }
        });
    }

    /**
     * Navigate to a specific slide
     * @param {number} index - The index of the slide to navigate to
     */
    function goToSlide(index) {
        if (index < 0 || index >= totalSlides) return;

        const slideWidth = slides[0].offsetWidth;
        slidesContainer.scrollTo({
            left: slideWidth * index,
            behavior: 'smooth'
        });
        currentSlide = index;
        updateActiveDot(index);
    }

    /**
     * Handle scroll events to update dots
     */
    function handleScroll() {
        const slideWidth = slides[0].offsetWidth;
        const scrollPosition = slidesContainer.scrollLeft;
        const newSlide = Math.round(scrollPosition / slideWidth);

        if (newSlide !== currentSlide && newSlide >= 0 && newSlide < totalSlides) {
            currentSlide = newSlide;
            updateActiveDot(currentSlide);
        }
    }

    /**
     * Handle keyboard navigation
     * @param {KeyboardEvent} event
     */
    function handleKeyboard(event) {
        switch (event.key) {
            case 'ArrowLeft':
            case 'ArrowUp':
                event.preventDefault();
                goToSlide(currentSlide - 1);
                break;
            case 'ArrowRight':
            case 'ArrowDown':
                event.preventDefault();
                goToSlide(currentSlide + 1);
                break;
            case 'Home':
                event.preventDefault();
                goToSlide(0);
                break;
            case 'End':
                event.preventDefault();
                goToSlide(totalSlides - 1);
                break;
        }
    }

    /**
     * Handle dot click navigation
     * @param {MouseEvent} event
     */
    function handleDotClick(event) {
        const slideIndex = parseInt(event.target.dataset.slide, 10);
        if (!isNaN(slideIndex)) {
            goToSlide(slideIndex);
        }
    }

    /**
     * Hide swipe hint after animation or user interaction
     */
    function hideSwipeHint() {
        if (swipeHint) {
            swipeHint.classList.add('hidden');
        }
    }

    /**
     * Initialize the slider
     */
    function init() {
        // Set up scroll listener with throttling
        let scrollTimeout;
        slidesContainer.addEventListener('scroll', () => {
            if (scrollTimeout) {
                window.cancelAnimationFrame(scrollTimeout);
            }
            scrollTimeout = window.requestAnimationFrame(handleScroll);
        }, { passive: true });

        // Set up dot click listeners
        dots.forEach(dot => {
            dot.addEventListener('click', handleDotClick);
        });

        // Set up keyboard navigation
        document.addEventListener('keydown', handleKeyboard);

        // Hide swipe hint after timeout or first scroll
        if (swipeHint) {
            setTimeout(hideSwipeHint, 3500);
            slidesContainer.addEventListener('scroll', hideSwipeHint, { once: true });
        }

        // Handle window resize
        let resizeTimeout;
        window.addEventListener('resize', () => {
            if (resizeTimeout) {
                clearTimeout(resizeTimeout);
            }
            resizeTimeout = setTimeout(() => {
                // Maintain position after resize
                goToSlide(currentSlide);
            }, 100);
        }, { passive: true });

        // Preload adjacent images for smoother experience
        preloadImages();

        // Initial state
        updateActiveDot(0);

        console.log('Ice Age Animals slider initialized with', totalSlides, 'slides');
    }

    /**
     * Preload images for smoother transitions
     */
    function preloadImages() {
        slides.forEach(slide => {
            const bgImage = slide.style.backgroundImage;
            if (bgImage) {
                const url = bgImage.replace(/url\(['"]?/, '').replace(/['"]?\)$/, '');
                const img = new Image();
                img.src = url;
            }
        });
    }

    // Initialize when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();