{ const cb = document.querySelector(`.filter-checkbox[value="${val}"]`); if (cb) cb.checked = true; }); function getFilteredCards() { const selected = checkboxes.filter(cb => cb.checked).map(cb => cb.value); return allCards.filter(card => { const types = card.querySelector('.content-card').dataset.filter.split(' '); return !selected.length || selected.some(s => types.includes(s)); }); } function renderPagination(totalItems) { const totalPages = Math.max(1, Math.ceil(totalItems / itemsPerPage)); numbersContainer.innerHTML = ''; for (let i = 1; i <= totalPages; i++) { const btn = document.createElement('button'); btn.textContent = i; if (i === currentPage) btn.classList.add('active'); btn.addEventListener('click', () => { currentPage = i; updateDisplay(); }); const li = document.createElement('li'); li.appendChild(btn); numbersContainer.appendChild(li); } prevBtn.disabled = currentPage === 1; nextBtn.disabled = currentPage === totalPages; } function updateDisplay() { const filtered = getFilteredCards(); const total = filtered.length; const start = (currentPage - 1) * itemsPerPage; const end = start + itemsPerPage; allCards.forEach(c => c.style.display = 'none'); filtered.slice(start, end).forEach(c => c.style.display = 'block'); const endItem = Math.min(end, total); summaryText.textContent = `${total ? start + 1 : 0} - ${endItem} of ${total} items`; renderPagination(total); } function updateURL() { const sel = checkboxes.filter(cb => cb.checked).map(cb => cb.value); const base = location.pathname; if (sel.length) { // first param gets "filter=", rest are just "&value" const qs = '?filter=' + sel.join('&'); history.replaceState(null, '', base + qs); } else { history.replaceState(null, '', base); } } // ✅ only bind dropdowns if they exist (fine either way) document.querySelectorAll('.dropdown-filter').forEach(dd => { const toggle = dd.querySelector('.dropdown-toggle'); if (!toggle) return; toggle.addEventListener('click', e => { e.stopPropagation(); dd.classList.toggle('open'); }); document.addEventListener('click', e => { if (!dd.contains(e.target)) dd.classList.remove('open'); }); }); // ✅ only bind reset if button exists if (resetBtn) { resetBtn.addEventListener('click', () => { checkboxes.forEach(cb => cb.checked = false); currentPage = 1; updateDisplay(); history.replaceState(null, '', window.location.pathname); }); } // Filter change → update display + URL + reset to page 1 checkboxes.forEach(cb => cb.addEventListener('change', () => { currentPage = 1; updateDisplay(); updateURL(); })); // Pagination buttons prevBtn.addEventListener('click', () => { if (currentPage > 1) { currentPage--; updateDisplay(); } }); nextBtn.addEventListener('click', () => { const max = Math.ceil(getFilteredCards().length / itemsPerPage); if (currentPage < max) { currentPage++; updateDisplay(); } }); // Initial render updateDisplay(); });