DieteticRodri/ruby-bloom-studios

1// Initialize Feather Icons2document.addEventListener('DOMContentLoaded', function() {3    feather.replace();4    5    // Initialize all functionality6    initVideoPlayer();7    initPortfolioFilter();8    initTestimonialSlider();9    initScrollReveal();10    initSmoothScroll();11});12 13// Video Player Functionality14function initVideoPlayer() {15    const playOverlay = document.getElementById('playOverlay');16    const video = document.getElementById('showreelVideo');17    const thumbnail = document.getElementById('videoThumbnail');18    19    if (!playOverlay || !video) return;20    21    playOverlay.addEventListener('click', function() {22        thumbnail.style.display = 'none';23        playOverlay.style.display = 'none';24        video.classList.remove('hidden');25        video.play();26    });27    28    // Reset when video ends29    video.addEventListener('ended', function() {30        video.classList.add('hidden');31        thumbnail.style.display = 'block';32        playOverlay.style.display = 'flex';33    });34}35 36// Portfolio Filter Functionality37function initPortfolioFilter() {38    const filterBtns = document.querySelectorAll('.filter-btn');39    const portfolioItems = document.querySelectorAll('.portfolio-item');40    41    filterBtns.forEach(btn => {42        btn.addEventListener('click', function() {43            // Update active button44            filterBtns.forEach(b => {45                b.classList.remove('active', 'bg-primary-600', 'text-white');46                b.classList.add('bg-gray-100', 'dark:bg-gray-800', 'text-gray-600', 'dark:text-gray-300');47            });48            this.classList.add('active', 'bg-primary-600', 'text-white');49            this.classList.remove('bg-gray-100', 'dark:bg-gray-800', 'text-gray-600', 'dark:text-gray-300');50            51            const filter = this.getAttribute('data-filter');52            53            portfolioItems.forEach(item => {54                const category = item.getAttribute('data-category');55                56                if (filter === 'all' || category === filter) {57                    item.classList.remove('hidden');58                    setTimeout(() => {59                        item.style.opacity = '1';60                        item.style.transform = 'scale(1)';61                    }, 10);62                } else {63                    item.style.opacity = '0';64                    item.style.transform = 'scale(0.9)';65                    setTimeout(() => {66                        item.classList.add('hidden');67                    }, 400);68                }69            });70        });71    });72}73 74// Testimonial Slider Functionality75function initTestimonialSlider() {76    const slides = document.querySelectorAll('.testimonial-slide');77    const dots = document.querySelectorAll('.slider-dot');78    let currentSlide = 0;79    let autoSlideInterval;80    81    function showSlide(index) {82        slides.forEach((slide, i) => {83            slide.classList.remove('active');84            dots[i].classList.remove('active', 'bg-primary-600', 'dark:bg-primary-400');85            dots[i].classList.add('bg-gray-300', 'dark:bg-gray-600');86        });87        88        slides[index].classList.add('active');89        dots[index].classList.add('active', 'bg-primary-600', 'dark:bg-primary-400');90        dots[index].classList.remove('bg-gray-300', 'dark:bg-gray-600');91        currentSlide = index;92        93        // Re-render icons in the active slide94        feather.replace();95    }96    97    function nextSlide() {98        const next = (currentSlide + 1) % slides.length;99        showSlide(next);100    }101    102    // Manual navigation103    dots.forEach((dot, index) => {104        dot.addEventListener('click', () => {105            showSlide(index);106            resetAutoSlide();107        });108    });109    110    // Auto-slide111    function startAutoSlide() {112        autoSlideInterval = setInterval(nextSlide, 6000);113    }114    115    function resetAutoSlide() {116        clearInterval(autoSlideInterval);117        startAutoSlide();118    }119    120    // Initialize121    showSlide(0);122    startAutoSlide();123    124    // Pause on hover125    const sliderContainer = document.getElementById('testimonialSlider');126    if (sliderContainer) {127        sliderContainer.addEventListener('mouseenter', () => clearInterval(autoSlideInterval));128        sliderContainer.addEventListener('mouseleave', startAutoSlide);129    }130}131 132// Scroll Reveal Animation133function initScrollReveal() {134    const reveals = document.querySelectorAll('.service-card, .portfolio-item, .testimonial-slide');135    136    const revealObserver = new IntersectionObserver((entries) => {137        entries.forEach((entry, index) => {138            if (entry.isIntersecting) {139                setTimeout(() => {140                    entry.target.classList.add('active');141                }, index * 100);142            }143        });144    }, {145        threshold: 0.1,146        rootMargin: '0px 0px -50px 0px'147    });148    149    reveals.forEach(el => {150        el.classList.add('reveal');151        revealObserver.observe(el);152    });153    154    // Header scroll effect155    const header = document.querySelector('nav');156    if (header) {157        window.addEventListener('scroll', () => {158            if (window.scrollY > 100) {159                header.classList.add('shadow-lg');160                header.classList.add('bg-white', 'dark:bg-gray-900');161                header.classList.remove('bg-transparent');162            } else {163                header.classList.remove('shadow-lg');164                header.classList.remove('bg-white', 'dark:bg-gray-900');165                header.classList.add('bg-transparent');166            }167        });168    }169}170 171// Smooth Scroll with Offset172function initSmoothScroll() {173    document.querySelectorAll('a[href^="#"]').forEach(anchor => {174        anchor.addEventListener('click', function(e) {175            e.preventDefault();176            const target = document.querySelector(this.getAttribute('href'));177            if (target) {178                const offset = 80; // Account for fixed header179                const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - offset;180                181                window.scrollTo({182                    top: targetPosition,183                    behavior: 'smooth'184                });185            }186        });187    });188}189 190// Utility function: Throttle191function throttle(func, limit) {192    let inThrottle;193    return function() {194        const args = arguments;195        const context = this;196        if (!inThrottle) {197            func.apply(context, args);198            inThrottle = true;199            setTimeout(() => inThrottle = false, limit);200        }201    };202}203 204// Utility function: Debounce205function debounce(func, wait) {206    let timeout;207    return function executedFunction(...args) {208        const later = () => {209            clearTimeout(timeout);210            func(...args);211        };212        clearTimeout(timeout);213        timeout = setTimeout(later, wait);214    };215}