kaubuntu.re/js/main.js

document.addEventListener('DOMContentLoaded', function() {
    // Détection de l'état de connexion
    function updateOnlineStatus() {
        const offlineIndicator = document.querySelector('.offline-indicator');
        
        if (!navigator.onLine) {
            if (!offlineIndicator) {
                const indicator = document.createElement('div');
                indicator.className = 'offline-indicator show';
                indicator.textContent = 'Mode hors ligne - Fonctionnalités limitées';
                document.body.insertBefore(indicator, document.body.firstChild);
            }
        } else {
            if (offlineIndicator) {
                offlineIndicator.remove();
            }
        }
    }
    
    // Écouter les changements de connexion
    window.addEventListener('online', updateOnlineStatus);
    window.addEventListener('offline', updateOnlineStatus);
    
    // Vérifier l'état initial
    updateOnlineStatus();
    // 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
    function initVideoCardClicks() {
        const videoCards = document.querySelectorAll('.video-card');
        
        videoCards.forEach(card => {
            if (!card.hasAttribute('data-click-initialized')) {
                card.setAttribute('data-click-initialized', 'true');
                card.addEventListener('click', function() {
                    const videoId = this.dataset.videoId;
                    if (videoId) {
                        window.location.href = 'video.php?id=' + videoId;
                    }
                });
            }
        });
    }
    
    // Initialiser les clics sur les vidéos existantes
    initVideoCardClicks();
    
    // Lazy loading des images
    function initLazyLoading() {
        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');
                }
            });
        }
    }
    
    // Initialiser le lazy loading
    initLazyLoading();
    
    // Gestion des boutons "Voir plus"
    const viewMoreButtons = document.querySelectorAll('.view-more');
    
    viewMoreButtons.forEach(button => {
        // Déterminer le type de vidéos à charger
        const section = button.closest('.video-section');
        const sectionTitle = section.querySelector('.section-title').textContent.trim().toLowerCase();
        const videoGrid = section.querySelector('.video-grid');
        let videoType = '';
        let categoryId = null;
        
        if (sectionTitle.includes('dernières')) {
            videoType = 'recent';
        } else if (sectionTitle.includes('tendances')) {
            videoType = 'trending';
        } else if (sectionTitle.includes('indépendance')) {
            videoType = 'independence';
        } else {
            // Vérifier si c'est une section de catégorie
            const categorySection = section.querySelector('[data-category-id]');
            if (categorySection) {
                videoType = 'category';
                categoryId = categorySection.dataset.categoryId;
            } else if (section.hasAttribute('data-category-id')) {
                videoType = 'category';
                categoryId = section.dataset.categoryId;
            }
        }
        
        // Si aucun type reconnu, ne pas configurer l'événement
        if (!videoType) return;
        
        // Stocker le numéro de page actuel
        button.dataset.page = '1';
        
        button.addEventListener('click', function() {
            const page = parseInt(this.dataset.page);
            
            // Changer le texte du bouton pendant le chargement
            button.textContent = 'Chargement...';
            button.disabled = true;
            
            // Préparer l'URL avec les paramètres
            let url = `ajax/load-more-videos.php?type=${videoType}&page=${page}`;
            if (videoType === 'category' && categoryId) {
                url += `&category=${categoryId}`;
            }
            
            // Préparer les données avec token CSRF
            const formData = new FormData();
            formData.append('csrf_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
            
            // Faire la requête AJAX
            fetch(url, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Ajouter les nouvelles vidéos à la grille
                    const tempDiv = document.createElement('div');
                    tempDiv.innerHTML = data.html;
                    
                    // Ajouter chaque vidéo à la grille
                    while (tempDiv.firstChild) {
                        videoGrid.appendChild(tempDiv.firstChild);
                    }
                    
                    // Mettre à jour le numéro de page
                    this.dataset.page = data.page + 1;
                    
                    // Réinitialiser le texte du bouton
                    button.textContent = 'Voir plus';
                    button.disabled = false;
                    
                    // Si plus de vidéos à charger, masquer le bouton
                    if (!data.hasMore) {
                        button.style.display = 'none';
                    }
                    
                    // Initialiser les clics sur les nouvelles vidéos
                    initVideoCardClicks();
                    // Initialiser le lazy loading pour les nouvelles images
                    initLazyLoading();
                } else {
                    // En cas d'erreur, afficher un message et réactiver le bouton
                    console.error('Erreur lors du chargement des vidéos:', data.error);
                    button.textContent = 'Voir plus';
                    button.disabled = false;
                }
            })
            .catch(error => {
                console.error('Erreur lors de la requête AJAX:', error);
                button.textContent = 'Voir plus';
                button.disabled = false;
            });
        });
    });
    
    // Scroll vers le haut avec effet moderne quand on clique sur le logo du footer
    const footerLogo = document.querySelector('.footer-logo');
    if (footerLogo) {
        footerLogo.addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    }
});