`; const skeleton = track.children[index]; if (skeleton) { track.replaceChild(card, skeleton); } else { track.appendChild(card); } if (index === links.length - 1) { totalSlides = track.querySelectorAll(".press-card").length; buildDots(totalSlides); updateMeasurements(); updateControls(); } }) .catch(err => { console.error("Failed to load article:", err); const skeleton = track.children[index]; if (skeleton) { track.removeChild(skeleton); } totalSlides = track.querySelectorAll(".press-card").length; buildDots(totalSlides); updateMeasurements(); updateControls(); }); }); // --- Arrow controls --- prevBtn.addEventListener("click", () => scrollToIndex(currentIndex - 1)); nextBtn.addEventListener("click", () => scrollToIndex(currentIndex + 1)); window.addEventListener("resize", () => { updateMeasurements(); }); // --- Drag / swipe support --- let isDown = false; let startX; let scrollLeft; track.addEventListener("pointerdown", (e) => { isDown = true; track.setPointerCapture(e.pointerId); startX = e.clientX; scrollLeft = track.scrollLeft; }); track.addEventListener("pointermove", (e) => { if (!isDown) return; const dx = e.clientX - startX; track.scrollLeft = scrollLeft - dx; }); track.addEventListener("pointerup", (e) => { isDown = false; const newIndex = Math.round(track.scrollLeft / cardWidth); currentIndex = newIndex; scrollToIndex(newIndex); }); track.addEventListener("pointercancel", () => { isDown = false; }); // Support trackpad horizontal scroll snapping track.addEventListener("scroll", () => { if (!cardWidth) return; const approxIndex = Math.round(track.scrollLeft / cardWidth); if (approxIndex !== currentIndex) { currentIndex = approxIndex; updateControls(); } }, { passive: true }); /* Extracted Scripts */ function openModal(imgSrc, captionText) { const modal = document.getElementById('imageModal'); const modalImg = document.getElementById('modalImg'); const caption = document.getElementById('modalCaption'); modal.style.display = 'block'; modalImg.src = imgSrc; modalImg.alt = captionText; caption.innerHTML = captionText; document.body.style.overflow = 'hidden'; } function closeModal() { document.getElementById('imageModal').style.display = 'none'; document.body.style.overflow = 'auto'; } // Close modal when clicking outside image or on close button window.onclick = function(event) { const modal = document.getElementById('imageModal'); const modalContent = document.getElementById('modalImg'); if (event.target === modal || event.target === modalContent) { closeModal(); } } // Close modal with escape key document.addEventListener('keydown', function(event) { if (event.key === 'Escape') { closeModal(); } }); // Close button document.querySelector('.close').onclick = function(e) { e.stopPropagation(); closeModal(); }; /* Extracted Scripts */ document.addEventListener("DOMContentLoaded", function() { const videos = [ { id:'1', title:'Event Highlights Reel', src:'https://events.eai-construction.com/wp-content/uploads/2025/02/VID-20250209-WA0002.mp4', thumbnail:'https://events.eai-construction.com/wp-content/uploads/2025/02/1.jpg' }, { id:'2', title:'Networking Sessions', src:'https://events.eai-construction.com/wp-content/uploads/2025/02/VID-20250209-WA0003.mp4', thumbnail:'https://events.eai-construction.com/wp-content/uploads/2025/02/2.jpg' }, { id:'3', title:'Design Showcase', src:'https://events.eai-construction.com/wp-content/uploads/2025/02/VID-20250209-WA0004.mp4', thumbnail:'https://events.eai-construction.com/wp-content/uploads/2025/02/3.jpg' }, { id:'6', title:'Innovation Panel', src:'https://events.eai-construction.com/wp-content/uploads/2025/02/alouala.mp4', thumbnail:'https://events.eai-construction.com/wp-content/uploads/2025/02/4.jpg' }, { id:'7', title:'Workshop Moments', src:'https://events.eai-construction.com/wp-content/uploads/2025/02/WhatsApp-Video-2025-02-08-at-14.04.11_206f1df2.mp4', thumbnail:'https://events.eai-construction.com/wp-content/uploads/2025/02/5.jpg' }, { id:'8', title:'Exhibition Floor', src:'https://events.eai-construction.com/wp-content/uploads/2025/02/WhatsApp-Video-2025-02-08-at-14.10.03_926746d4.mp4', thumbnail:'https://events.eai-construction.com/wp-content/uploads/2025/02/6.jpg' }, { id:'12', title:'Evening Gala', src:'https://events.eai-construction.com/wp-content/uploads/2025/02/WhatsApp-Video-2025-02-08-at-22.49.18_46605ab3.mp4', thumbnail:'https://events.eai-construction.com/wp-content/uploads/2025/02/1.jpg' }, { id:'13', title:'Keynote Address', src:'https://events.eai-construction.com/wp-content/uploads/2025/02/WhatsApp-Video-2025-02-09-at-13.12.46_eb9cd8f3.mp4', thumbnail:'https://events.eai-construction.com/wp-content/uploads/2025/02/8.jpg' }, { id:'14', title:'Behind the Scenes', src:'https://events.eai-construction.com/wp-content/uploads/2025/02/WhatsApp-Video-2025-02-11-at-18.04.53_32d6b103.mp4', thumbnail:'https://events.eai-construction.com/wp-content/uploads/2025/08/logo.webp' }, { id:'15', title:'FIDI 2023 Recap', src:'https://events.eai-construction.com/wp-content/uploads/2023/10/FNDI.mp4', thumbnail:'https://events.eai-construction.com/wp-content/uploads/2025/03/test-fidi-23.jpg' }, { id:'16', title:'Testimonial - Didier', src:'https://events.eai-construction.com/wp-content/uploads/2023/10/testimonial-4.mp4', thumbnail:'https://events.eai-construction.com/wp-content/uploads/2023/10/didier.jpg' }, { id:'17', title:'Testimonial - Ibrahim', src:'https://events.eai-construction.com/wp-content/uploads/2023/10/testimonial-3.mp4', thumbnail:'https://events.eai-construction.com/wp-content/uploads/2023/10/ibrahim.jpg' }, { id:'18', title:'Testimonial - Seifeddine', src:'https://events.eai-construction.com/wp-content/uploads/2023/10/testimonial-2.mp4', thumbnail:'https://events.eai-construction.com/wp-content/uploads/2023/10/seifeddine.jpg' }, { id:'19', title:'Testimonial - Todi', src:'https://events.eai-construction.com/wp-content/uploads/2023/10/testimonial-1.mp4', thumbnail:'https://events.eai-construction.com/wp-content/uploads/2023/10/todi.jpg' } ]; const sliderContainer = document.getElementById('sliderContainer'); const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); const modal = document.getElementById('videoModal'); const modalVideo = document.getElementById('modalVideo'); const closeBtn = document.getElementById('closeBtn'); // Initialize the active bottom archive slider when its controls are present. if (!sliderContainer || !prevBtn || !nextBtn || !modal || !modalVideo || !closeBtn) return; let currentIndex = 0; const slidesToShow = 3; videos.forEach(v => { const slide = document.createElement('div'); slide.className = 'video-slide'; slide.innerHTML = ` `; slide.addEventListener('click', () => openVideo(v.src)); sliderContainer.appendChild(slide); }); function updateSlider() { sliderContainer.style.transform = `translateX(-${currentIndex * (100/3)}%)`; prevBtn.disabled = currentIndex === 0; nextBtn.disabled = currentIndex >= videos.length - slidesToShow; } prevBtn.addEventListener('click', () => { if (currentIndex > 0) currentIndex--; updateSlider(); }); nextBtn.addEventListener('click', () => { if (currentIndex < videos.length - slidesToShow) currentIndex++; updateSlider(); }); function openVideo(src) { modal.classList.add('active'); modalVideo.src = src; modalVideo.play().catch(()=>{}); document.body.style.overflow = 'hidden'; } function closeVideo() { try { modalVideo.pause(); } catch (err) { console.warn("Pause failed:", err); } // Smooth fade-out before hiding modal.style.opacity = "0"; modal.style.pointerEvents = "none"; document.body.style.overflow = "auto"; // Wait for the fade to complete, then hide and reset setTimeout(() => { modal.classList.remove("active"); modal.style.opacity = ""; modal.style.pointerEvents = ""; modalVideo.src = ""; }, 250); // 250ms = same as fade time } // Handle close button and background click closeBtn.addEventListener("click", (e) => { e.stopPropagation(); closeVideo(); }); modal.addEventListener("click", (e) => { if (e.target === modal) closeVideo(); }); // Handle ESC key document.addEventListener("keydown", (e) => { if (e.key === "Escape" && modal.classList.contains("active")) { closeVideo(); } }); modal.onclick = e => { if (e.target === modal) closeVideo(); }; document.onkeydown = e => { if (e.key === 'Escape' && modal.classList.contains('active')) closeVideo(); }; updateSlider(); });