B1- Equipe (Official video)
document.addEventListener('DOMContentLoaded', () => {
const modal = document.getElementById('appletv-modal');
const modalImg = document.getElementById('modal-img');
const modalTitle = document.getElementById('modal-title');
const modalTag = document.getElementById('modal-tag');
const modalYear = document.getElementById('modal-year');
const modalDesc = document.getElementById('modal-description');
/**
* Opens the detail modal with data read from the clicked card
*/
function openModal(data) {
modalImg.src = data.img || '';
modalTitle.textContent = data.title || 'Untitled';
modalTag.textContent = data.tag || '';
modalYear.textContent = data.year || '';
modalDesc.textContent = data.description || 'No additional details available.';
modal.classList.add('active');
modal.setAttribute('aria-hidden', 'false');
}
/**
* Closes the active modal overlay
*/
function closeModal() {
modal.classList.remove('active');
modal.setAttribute('aria-hidden', 'true');
}
// Attach click listener to every project card across the page
document.querySelectorAll('.appletv-card, .appletv-hero-card').forEach(card => {
card.addEventListener('click', (e) => {
// Prevent opening modal if a specific sub-button inside the hero was clicked directly
if (e.target.closest('a') && !e.target.closest('.open-details-btn')) return;
const cardData = {
title: card.getAttribute('data-title'),
tag: card.getAttribute('data-tag'),
img: card.getAttribute('data-img'),
description: card.getAttribute('data-description'),
year: card.getAttribute('data-year')
};
openModal(cardData);
});
});
// Attach event listeners to close triggers
document.querySelectorAll('.appletv-modal-close, .modal-close-btn, .appletv-modal-overlay').forEach(btn => {
btn.addEventListener('click', closeModal);
});
// Close modal when pressing the Escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && modal.classList.contains('active')) {
closeModal();
}
});
});
