kaubuntu.re/js/main.js

document.addEventListener('DOMContentLoaded', function() {
    // Gestion du menu mobile
    const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
    const mobileMenu = document.querySelector('.mobile-menu');
    const mobileMenuClose = document.querySelector('.mobile-menu-close');
    
    if (mobileMenuToggle) {
        mobileMenuToggle.addEventListener('click', function() {
            mobileMenu.classList.add('active');
            document.body.style.overflow = 'hidden'; // Empêche le défilement de la page
        });
    }
    
    if (mobileMenuClose) {
        mobileMenuClose.addEventListener('click', function() {
            mobileMenu.classList.remove('active');
            document.body.style.overflow = ''; // Réactive le défilement
        });
    }
    
    // Gestion du mode sombre
    const darkModeToggle = document.querySelector('.dark-mode-toggle');
    const body = document.body;
    
    if (darkModeToggle) {
        darkModeToggle.addEventListener('click', function() {
            body.classList.toggle('dark-mode');
            
            // Changer l'icône
            const icon = darkModeToggle.querySelector('i');
            if (body.classList.contains('dark-mode')) {
                icon.classList.remove('fa-moon');
                icon.classList.add('fa-sun');
            } else {
                icon.classList.remove('fa-sun');
                icon.classList.add('fa-moon');
            }
        });
    }
    
    // Gestion des carousels
    const carousels = document.querySelectorAll('.carousel');
    
    carousels.forEach(carousel => {
        const container = carousel.querySelector('.carousel-container');
        const dots = carousel.querySelectorAll('.carousel-dot');
        const items = carousel.querySelectorAll('.carousel-item');
        
        if (dots.length > 0 && items.length > 0) {
            dots.forEach((dot, index) => {
                dot.addEventListener('click', function() {
                    // Calculer la distance à translater
                    const itemWidth = items[0].offsetWidth + parseInt(getComputedStyle(items[0]).marginRight);
                    const newTransform = -index * itemWidth;
                    
                    // Appliquer la transformation
                    container.style.transform = `translateX(${newTransform}px)`;
                    
                    // Mettre à jour les dots
                    dots.forEach(d => d.classList.remove('active'));
                    dot.classList.add('active');
                });
            });
        }
    });
    
    // Gestion des clics sur les vidéos
    const videoCards = document.querySelectorAll('.video-card');
    
    videoCards.forEach(card => {
        card.addEventListener('click', function() {
            const videoId = this.dataset.videoId;
            if (videoId) {
                window.location.href = 'video.php?id=' + videoId;
            }
        });
    });
    
    // Lazy loading des images
    if ('IntersectionObserver' in window) {
        const imageObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    const src = img.getAttribute('data-src');
                    if (src) {
                        img.src = src;
                        img.removeAttribute('data-src');
                    }
                    observer.unobserve(img);
                }
            });
        });
        
        document.querySelectorAll('img[data-src]').forEach(img => {
            imageObserver.observe(img);
        });
    } else {
        // Fallback pour les navigateurs qui ne supportent pas IntersectionObserver
        document.querySelectorAll('img[data-src]').forEach(img => {
            const src = img.getAttribute('data-src');
            if (src) {
                img.src = src;
                img.removeAttribute('data-src');
            }
        });
    }
    
    // Gestion des boutons "Voir plus"
    const viewMoreButtons = document.querySelectorAll('.view-more');
    
    viewMoreButtons.forEach(button => {
        button.addEventListener('click', function() {
            // Dans un vrai projet, cela chargerait plus de contenu via AJAX
            // Pour cet exemple, on simule juste un clic
            button.innerText = 'Chargement...';
            setTimeout(() => {
                button.innerText = 'Voir plus';
            }, 1000);
        });
    });
});