Imagesbyolofsson.se/imagesbyolofsson-se
7
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Portfolio: multi-select filter (flera ar + manader samtidigt)

Browse Source
This commit is contained in:
imagesbyolofsson
2026-09-15 00:49:41 +00:00
parent d2de8d6c7e
commit e78ac3a4c6
1 changed files with 17 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/portfolio.astro
+17 -10
View File
@@ -176,8 +176,9 @@ const uniqueMonths = [...new Map(allMonths.map(item => [item.name, item])).value
<script> <script>
// --- FILTER LOGIK --- // --- FILTER LOGIK ---
let currentYear = 'all'; // MULTI-select: flera ar + manader samtidigt. 'all' = samtligt.
let currentMonth = 'all'; let selectedYears = new Set(['all']);
let selectedMonths = new Set(['all']);
const items = Array.from(document.querySelectorAll('.gallery-item')) as HTMLElement[]; const items = Array.from(document.querySelectorAll('.gallery-item')) as HTMLElement[];
const buttons = document.querySelectorAll('.filter-btn'); const buttons = document.querySelectorAll('.filter-btn');
@@ -189,8 +190,8 @@ const uniqueMonths = [...new Map(allMonths.map(item => [item.name, item])).value
items.forEach((el) => { items.forEach((el) => {
const itemYear = el.dataset.year; const itemYear = el.dataset.year;
const itemMonth = el.dataset.month; const itemMonth = el.dataset.month;
const matchYear = currentYear === 'all' || itemYear === currentYear; const matchYear = selectedYears.has('all') || selectedYears.has(itemYear);
const matchMonth = currentMonth === 'all' || itemMonth === currentMonth; const matchMonth = selectedMonths.has('all') || selectedMonths.has(itemMonth);
if (matchYear && matchMonth) { if (matchYear && matchMonth) {
el.style.display = 'block'; el.style.display = 'block';
@@ -303,17 +304,23 @@ const uniqueMonths = [...new Map(allMonths.map(item => [item.name, item])).value
const value = target.dataset.filter; const value = target.dataset.filter;
if (!type || !value) return; if (!type || !value) return;
document.querySelectorAll(`.filter-btn[data-type="${type}"]`).forEach(b => b.classList.remove('active')); const sel = type === 'year' ? selectedYears : selectedMonths;
target.classList.add('active'); if (value === 'all') { sel.clear(); sel.add('all'); }
if (type === 'year') currentYear = value; else {
if (type === 'month') currentMonth = value; sel.delete('all');
sel.has(value) ? sel.delete(value) : sel.add(value);
if (sel.size === 0) sel.add('all');
}
document.querySelectorAll(`.filter-btn[data-type="${type}"]`).forEach(b => {
b.classList.toggle('active', b.dataset.filter === 'all' ? sel.has('all') : sel.has(b.dataset.filter));
});
filterImages(); filterImages();
}); });
}); });
resetBtn?.addEventListener('click', () => { resetBtn?.addEventListener('click', () => {
currentYear = 'all'; selectedYears = new Set(['all']);
currentMonth = 'all'; selectedMonths = new Set(['all']);
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active')); document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
document.querySelector('.filter-btn[data-filter="all"][data-type="year"]')?.classList.add('active'); document.querySelector('.filter-btn[data-filter="all"][data-type="year"]')?.classList.add('active');
document.querySelector('.filter-btn[data-filter="all"][data-type="month"]')?.classList.add('active'); document.querySelector('.filter-btn[data-filter="all"][data-type="month"]')?.classList.add('active');