jukka/tykkaa.fi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Allow selecting multiple subcategories simultaneously

Browse Source 
Click toggles subcategory on/off, enabling combos like Vegaaniset + Jälkiruuat.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jukka Lampikoski
2026-03-08 15:23:46 +02:00
parent 5d09f5b333
commit 9c4d222e9d
1 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
script.js
View File

@@ -268,11 +268,11 @@ function renderCards() {
// FILTER & SEARCH // FILTER & SEARCH
// =========================== // ===========================
let currentFilter = 'all'; let currentFilter = 'all';
let currentSubFilter = 'all'; let activeSubFilters = new Set();
function setFilter(category, btn) { function setFilter(category, btn) {
currentFilter = category; currentFilter = category;
currentSubFilter = 'all'; activeSubFilters.clear();
visibleCount = POSTS_PER_PAGE; visibleCount = POSTS_PER_PAGE;
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active')); document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active'); btn.classList.add('active');
@@ -281,10 +281,20 @@ function setFilter(category, btn) {
} }
function setSubFilter(sub, btn) { function setSubFilter(sub, btn) {
currentSubFilter = sub;
visibleCount = POSTS_PER_PAGE; visibleCount = POSTS_PER_PAGE;
document.querySelectorAll('.sub-filter-btn').forEach(b => b.classList.remove('active')); if (sub === 'all') {
btn.classList.add('active'); activeSubFilters.clear();
} else {
if (activeSubFilters.has(sub)) {
activeSubFilters.delete(sub);
} else {
activeSubFilters.add(sub);
}
}
document.querySelectorAll('.sub-filter-btn').forEach(b => {
const id = b.dataset.sub;
b.classList.toggle('active', id === 'all' ? activeSubFilters.size === 0 : activeSubFilters.has(id));
});
filterPosts(); filterPosts();
} }
@@ -296,8 +306,8 @@ function renderSubFilters() {
const subs = sortSubcategories((cat?.subcategories || []).filter(s => countPostsInSubcategory(currentFilter, s.id) > 0)); const subs = sortSubcategories((cat?.subcategories || []).filter(s => countPostsInSubcategory(currentFilter, s.id) > 0));
if (!subs.length) { container.innerHTML = ''; return; } if (!subs.length) { container.innerHTML = ''; return; }
container.innerHTML = container.innerHTML =
`<button class="sub-filter-btn ${currentSubFilter === 'all' ? 'active' : ''}" onclick="setSubFilter('all',this)">Kaikki</button>` + `<button class="sub-filter-btn ${activeSubFilters.size === 0 ? 'active' : ''}" data-sub="all" onclick="setSubFilter('all',this)">Kaikki</button>` +
subs.map(s => `<button class="sub-filter-btn ${currentSubFilter === s.id ? 'active' : ''}" onclick="setSubFilter('${s.id}',this)">${s.fi}</button>`).join(''); subs.map(s => `<button class="sub-filter-btn ${activeSubFilters.has(s.id) ? 'active' : ''}" data-sub="${s.id}" onclick="setSubFilter('${s.id}',this)">${s.fi}</button>`).join('');
} }
function filterPosts() { function filterPosts() {
@@ -308,7 +318,7 @@ function filterPosts() {
cards.forEach(card => { cards.forEach(card => {
const matchesCat = currentFilter === 'all' || card.dataset.category === currentFilter; const matchesCat = currentFilter === 'all' || card.dataset.category === currentFilter;
const postSubs = (card.dataset.subcategory || '').split(',').filter(Boolean); const postSubs = (card.dataset.subcategory || '').split(',').filter(Boolean);
const matchesSub = currentSubFilter === 'all' || postSubs.includes(currentSubFilter); const matchesSub = activeSubFilters.size === 0 || postSubs.some(s => activeSubFilters.has(s));
const title = (card.querySelector('h3')?.textContent || '').toLowerCase(); const title = (card.querySelector('h3')?.textContent || '').toLowerCase();
const desc = (card.querySelector('p:not(.card-author)')?.textContent || '').toLowerCase(); const desc = (card.querySelector('p:not(.card-author)')?.textContent || '').toLowerCase();
const subLbl = (card.dataset.subcategory || '').toLowerCase(); const subLbl = (card.dataset.subcategory || '').toLowerCase();