From e78ac3a4c60d60b0e2268a1148ccd3c0fae6f23b Mon Sep 17 00:00:00 2001
From: Linus Olofsson <Admin@imagesbyolofsson.se>
Date: Tue, 15 Sep 2026 00:49:41 +0000
Subject: [PATCH] Portfolio: multi-select filter (flera ar + manader samtidigt)

---
 src/pages/portfolio.astro | 27 +++++++++++++++++----------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/pages/portfolio.astro b/src/pages/portfolio.astro
index e746b1e..4c5a6de 100644
--- a/src/pages/portfolio.astro
+++ b/src/pages/portfolio.astro
@@ -176,8 +176,9 @@ const uniqueMonths = [...new Map(allMonths.map(item => [item.name, item])).value
 
 <script>
   // --- FILTER LOGIK ---
-  let currentYear = 'all';
-  let currentMonth = 'all';
+  // MULTI-select: flera ar + manader samtidigt. 'all' = samtligt.
+  let selectedYears = new Set(['all']);
+  let selectedMonths = new Set(['all']);
   
   const items = Array.from(document.querySelectorAll('.gallery-item')) as HTMLElement[];
   const buttons = document.querySelectorAll('.filter-btn');
@@ -189,8 +190,8 @@ const uniqueMonths = [...new Map(allMonths.map(item => [item.name, item])).value
     items.forEach((el) => {
       const itemYear = el.dataset.year;
       const itemMonth = el.dataset.month;
-      const matchYear = currentYear === 'all' || itemYear === currentYear;
-      const matchMonth = currentMonth === 'all' || itemMonth === currentMonth;
+      const matchYear = selectedYears.has('all') || selectedYears.has(itemYear);
+      const matchMonth = selectedMonths.has('all') || selectedMonths.has(itemMonth);
 
       if (matchYear && matchMonth) {
         el.style.display = 'block';
@@ -303,17 +304,23 @@ const uniqueMonths = [...new Map(allMonths.map(item => [item.name, item])).value
       const value = target.dataset.filter;
       if (!type || !value) return;
 
-      document.querySelectorAll(`.filter-btn[data-type="${type}"]`).forEach(b => b.classList.remove('active'));
-      target.classList.add('active');
-      if (type === 'year') currentYear = value;
-      if (type === 'month') currentMonth = value;
+      const sel = type === 'year' ? selectedYears : selectedMonths;
+      if (value === 'all') { sel.clear(); sel.add('all'); }
+      else {
+        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();
     });
   });
 
   resetBtn?.addEventListener('click', () => {
-    currentYear = 'all';
-    currentMonth = 'all';
+    selectedYears = new Set(['all']);
+    selectedMonths = new Set(['all']);
     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="month"]')?.classList.add('active');