122 lines
4.5 KiB
JavaScript
122 lines
4.5 KiB
JavaScript
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);
|
|
});
|
|
});
|
|
});
|