69 lines
1.4 KiB
JavaScript
69 lines
1.4 KiB
JavaScript
function updateGrid(grid) {
|
|
// Skip hidden grids
|
|
if (grid.offsetParent === null) {
|
|
return;
|
|
}
|
|
|
|
const items = [...grid.querySelectorAll('.episode-item')];
|
|
|
|
if (!items.length) {
|
|
return;
|
|
}
|
|
|
|
// Reset visibility first
|
|
items.forEach(item => {
|
|
item.style.display = '';
|
|
});
|
|
|
|
// Determine actual column count
|
|
const firstTop = items[0].offsetTop;
|
|
|
|
let columns = 0;
|
|
|
|
for (const item of items) {
|
|
if (item.offsetTop !== firstTop) {
|
|
break;
|
|
}
|
|
|
|
columns++;
|
|
}
|
|
|
|
const rows = parseInt(grid.dataset.rows || '2', 10);
|
|
|
|
const visibleItems = columns * rows;
|
|
|
|
items.forEach((item, index) => {
|
|
item.style.display = index < visibleItems
|
|
? ''
|
|
: 'none';
|
|
});
|
|
}
|
|
|
|
function updateAllEpisodeGrids() {
|
|
document.querySelectorAll('.episode-grid').forEach(updateGrid);
|
|
}
|
|
|
|
const observer = new IntersectionObserver(entries => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
updateGrid(entry.target);
|
|
}
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('.episode-grid').forEach(grid => {
|
|
observer.observe(grid);
|
|
});
|
|
|
|
let resizeTimeout;
|
|
|
|
window.addEventListener('resize', () => {
|
|
clearTimeout(resizeTimeout);
|
|
|
|
resizeTimeout = setTimeout(() => {
|
|
updateAllEpisodeGrids();
|
|
}, 100);
|
|
});
|
|
|
|
window.addEventListener('load', updateAllEpisodeGrids);
|