| 1 |
(function () { |
| 2 |
function initVideoGrid(wrapper) { |
| 3 |
var filterBtns = wrapper.querySelectorAll('.bkbg-vg-filter-btn'); |
| 4 |
var cards = wrapper.querySelectorAll('.bkbg-vg-card'); |
| 5 |
var modal = wrapper.querySelector('.bkbg-vg-modal'); |
| 6 |
var modalClose = modal ? modal.querySelector('.bkbg-vg-modal-close') : null; |
| 7 |
var iframeWrap = modal ? modal.querySelector('.bkbg-vg-modal-iframe-wrap') : null; |
| 8 |
var overlay = modal ? modal.querySelector('.bkbg-vg-modal-overlay') : null; |
| 9 |
|
| 10 |
/* ── Filter ─────────────────────────────────────────────────── */ |
| 11 |
filterBtns.forEach(function (btn) { |
| 12 |
btn.addEventListener('click', function () { |
| 13 |
var cat = btn.dataset.category || ''; |
| 14 |
|
| 15 |
filterBtns.forEach(function (b) { b.classList.remove('is-active'); }); |
| 16 |
btn.classList.add('is-active'); |
| 17 |
|
| 18 |
cards.forEach(function (card) { |
| 19 |
if (!cat || card.dataset.category === cat) { |
| 20 |
card.classList.remove('is-hidden'); |
| 21 |
} else { |
| 22 |
card.classList.add('is-hidden'); |
| 23 |
} |
| 24 |
}); |
| 25 |
}); |
| 26 |
}); |
| 27 |
|
| 28 |
/* ── Staggered entrance animation ───────────────────────────── */ |
| 29 |
var observer = new IntersectionObserver(function (entries) { |
| 30 |
entries.forEach(function (entry) { |
| 31 |
if (!entry.isIntersecting) return; |
| 32 |
var card = entry.target; |
| 33 |
var delay = parseInt(card.dataset.animDelay, 10) || 0; |
| 34 |
setTimeout(function () { |
| 35 |
card.style.opacity = '1'; |
| 36 |
card.style.transform = 'translateY(0)'; |
| 37 |
}, delay); |
| 38 |
observer.unobserve(card); |
| 39 |
}); |
| 40 |
}, { threshold: 0.1 }); |
| 41 |
|
| 42 |
cards.forEach(function (card, idx) { |
| 43 |
card.style.opacity = '0'; |
| 44 |
card.style.transform = 'translateY(20px)'; |
| 45 |
card.style.transition = 'opacity 0.4s ease, transform 0.4s ease'; |
| 46 |
card.dataset.animDelay = idx * 60; |
| 47 |
observer.observe(card); |
| 48 |
}); |
| 49 |
|
| 50 |
/* ── Lightbox ───────────────────────────────────────────────── */ |
| 51 |
if (!modal) return; |
| 52 |
|
| 53 |
function openModal(embedUrl) { |
| 54 |
if (!iframeWrap) return; |
| 55 |
iframeWrap.innerHTML = '<iframe src="' + embedUrl + '" allow="autoplay; fullscreen" allowfullscreen></iframe>'; |
| 56 |
modal.removeAttribute('hidden'); |
| 57 |
document.body.style.overflow = 'hidden'; |
| 58 |
if (modalClose) modalClose.focus(); |
| 59 |
} |
| 60 |
|
| 61 |
function closeModal() { |
| 62 |
modal.setAttribute('hidden', ''); |
| 63 |
document.body.style.overflow = ''; |
| 64 |
if (iframeWrap) iframeWrap.innerHTML = ''; |
| 65 |
} |
| 66 |
|
| 67 |
cards.forEach(function (card) { |
| 68 |
var playBtn = card.querySelector('.bkbg-vg-play-btn'); |
| 69 |
if (!playBtn) return; |
| 70 |
playBtn.addEventListener('click', function (e) { |
| 71 |
e.stopPropagation(); |
| 72 |
var embedUrl = card.dataset.embedUrl; |
| 73 |
if (embedUrl) openModal(embedUrl); |
| 74 |
}); |
| 75 |
card.addEventListener('click', function () { |
| 76 |
var embedUrl = card.dataset.embedUrl; |
| 77 |
if (embedUrl) openModal(embedUrl); |
| 78 |
}); |
| 79 |
}); |
| 80 |
|
| 81 |
if (modalClose) { |
| 82 |
modalClose.addEventListener('click', closeModal); |
| 83 |
} |
| 84 |
if (overlay) { |
| 85 |
overlay.addEventListener('click', closeModal); |
| 86 |
} |
| 87 |
document.addEventListener('keydown', function (e) { |
| 88 |
if (e.key === 'Escape' && !modal.hasAttribute('hidden')) { |
| 89 |
closeModal(); |
| 90 |
} |
| 91 |
}); |
| 92 |
} |
| 93 |
|
| 94 |
function init() { |
| 95 |
var wrappers = document.querySelectorAll('.bkbg-vg-wrapper'); |
| 96 |
wrappers.forEach(initVideoGrid); |
| 97 |
} |
| 98 |
|
| 99 |
if (document.readyState === 'loading') { |
| 100 |
document.addEventListener('DOMContentLoaded', init); |
| 101 |
} else { |
| 102 |
init(); |
| 103 |
} |
| 104 |
})(); |
| 105 |
|
