+
+
+
+
diff --git a/js/data.js b/js/data.js
index 14c0af2..713e899 100644
--- a/js/data.js
+++ b/js/data.js
@@ -22,5 +22,8 @@ async function loadPhotos() {
return;
}
- renderGallery(photosData);
+ // 🔥 IMPORTANTE:
+ // Ora la galleria deve essere costruita tramite refreshGallery(),
+ // che applica filtri, ordinamento e raggruppamento.
+ refreshGallery();
}
diff --git a/js/gallery.js b/js/gallery.js
index 298b585..92862ea 100644
--- a/js/gallery.js
+++ b/js/gallery.js
@@ -1,40 +1,149 @@
// ===============================
-// RENDER GALLERIA
+// ORDINAMENTO
// ===============================
-function renderGallery(photos) {
- const gallery = document.getElementById('gallery');
- gallery.innerHTML = '';
+function sortByDate(photos, direction = "desc") {
+ return photos.slice().sort((a, b) => {
+ const da = new Date(a.taken_at);
+ const db = new Date(b.taken_at);
- photos.forEach(photo => {
- const thumbDiv = document.createElement('div');
- thumbDiv.className = 'thumb';
-
- const img = document.createElement('img');
- img.src = `https://prova.patachina.it/${photo.thub1}`;
- img.alt = photo.name || '';
- img.loading = "lazy";
-
- thumbDiv.appendChild(img);
-
- if (photo.mime_type.startsWith("video/")) {
- const play = document.createElement("div");
- play.className = "play-icon";
- play.textContent = "▶";
- thumbDiv.appendChild(play);
- }
-
- const preview = photo.thub2
- ? `https://prova.patachina.it/${photo.thub2}`
- : `https://prova.patachina.it/${photo.thub1}`;
-
- thumbDiv.addEventListener('click', () => {
- openModal(
- `https://prova.patachina.it/${photo.path}`,
- preview,
- photo
- );
- });
-
- gallery.appendChild(thumbDiv);
+ return direction === "asc" ? da - db : db - da;
+ });
+}
+
+// ===============================
+// FILTRI (base, estendibili)
+// ===============================
+function applyFilters(photos) {
+ if (!currentFilter) return photos;
+
+ switch (currentFilter) {
+ case "folder":
+ return photos.filter(p => p.folder); // da migliorare
+ case "location":
+ return photos.filter(p => p.gps && p.gps.lat);
+ case "type":
+ return photos.filter(p => p.mime_type.startsWith("image/"));
+ default:
+ return photos;
+ }
+}
+
+// ===============================
+// RAGGRUPPAMENTO STILE GOOGLE PHOTOS
+// ===============================
+function groupByDate(photos, mode = "auto") {
+ const sections = [];
+ const now = new Date();
+
+ function getLabel(photo) {
+ const date = new Date(photo.taken_at);
+ const diffDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));
+
+ if (mode === "day") return formatDay(date);
+ if (mode === "month") return formatMonth(date);
+ if (mode === "year") return date.getFullYear().toString();
+
+ // modalità AUTO (Google Photos)
+ if (diffDays === 0) return "Oggi";
+ if (diffDays === 1) return "Ieri";
+ if (diffDays <= 7) return "Questa settimana";
+ if (diffDays <= 14) return "La settimana scorsa";
+ if (diffDays <= 30) return "Questo mese";
+ if (diffDays <= 60) return "Mese scorso";
+
+ // stesso anno → raggruppa per mese
+ if (date.getFullYear() === now.getFullYear()) {
+ return formatMonth(date);
+ }
+
+ // anni precedenti → raggruppa per anno
+ return date.getFullYear().toString();
+ }
+
+ photos.forEach(photo => {
+ const label = getLabel(photo);
+
+ let section = sections.find(s => s.label === label);
+ if (!section) {
+ section = { label, photos: [] };
+ sections.push(section);
+ }
+
+ section.photos.push(photo);
+ });
+
+ return sections;
+}
+
+// ===============================
+// FORMATTATORI
+// ===============================
+function formatDay(date) {
+ return date.toLocaleDateString("it-IT", {
+ weekday: "long",
+ day: "numeric",
+ month: "long"
+ });
+}
+
+function formatMonth(date) {
+ return date.toLocaleDateString("it-IT", {
+ month: "long",
+ year: "numeric"
+ });
+}
+
+// ===============================
+// RENDER GALLERIA A SEZIONI
+// ===============================
+function renderGallery(sections) {
+ const gallery = document.getElementById("gallery");
+ gallery.innerHTML = "";
+
+ sections.forEach(section => {
+ // HEADER DELLA SEZIONE
+ const h = document.createElement("h2");
+ h.className = "gallery-section-title";
+ h.textContent = section.label;
+ gallery.appendChild(h);
+
+ // CONTENITORE DELLE FOTO
+ const container = document.createElement("div");
+ container.className = "gallery-section";
+
+ section.photos.forEach(photo => {
+ const thumbDiv = document.createElement("div");
+ thumbDiv.className = "thumb";
+
+ const img = document.createElement("img");
+ img.src = `https://prova.patachina.it/${photo.thub1}`;
+ img.alt = photo.name || "";
+ img.loading = "lazy";
+
+ thumbDiv.appendChild(img);
+
+ if (photo.mime_type.startsWith("video/")) {
+ const play = document.createElement("div");
+ play.className = "play-icon";
+ play.textContent = "▶";
+ thumbDiv.appendChild(play);
+ }
+
+ const preview = photo.thub2
+ ? `https://prova.patachina.it/${photo.thub2}`
+ : `https://prova.patachina.it/${photo.thub1}`;
+
+ thumbDiv.addEventListener("click", () => {
+ openModal(
+ `https://prova.patachina.it/${photo.path}`,
+ preview,
+ photo
+ );
+ });
+
+ container.appendChild(thumbDiv);
+ });
+
+ gallery.appendChild(container);
});
}
diff --git a/js/main.js b/js/main.js
index 1f5ae9b..1d64f75 100644
--- a/js/main.js
+++ b/js/main.js
@@ -2,4 +2,76 @@
// AVVIO
// ===============================
console.log("main.js avviato");
+
+// Carica le foto iniziali
loadPhotos();
+
+// ===============================
+// VARIABILI GLOBALI PER LE OPZIONI
+// ===============================
+let currentSort = "desc"; // "desc" = più recenti prima
+let currentGroup = "auto"; // auto = Oggi, Ieri, Settimana...
+let currentFilter = null; // folder / location / type
+
+// ===============================
+// APERTURA / CHIUSURA OPTIONS SHEET
+// ===============================
+const optionsBtn = document.getElementById("optionsBtn");
+const optionsSheet = document.getElementById("optionsSheet");
+
+optionsBtn.addEventListener("click", () => {
+ optionsSheet.classList.add("open");
+});
+
+function closeOptionsSheet() {
+ optionsSheet.classList.remove("open");
+}
+
+// Chiudi se clicchi fuori
+optionsSheet.addEventListener("click", (e) => {
+ if (e.target === optionsSheet) closeOptionsSheet();
+});
+
+// ===============================
+// GESTIONE PULSANTI DEL BOTTOM SHEET OPZIONI
+// ===============================
+document.querySelectorAll("#optionsSheet .sheet-btn").forEach(btn => {
+ btn.addEventListener("click", () => {
+
+ if (btn.dataset.sort) {
+ currentSort = btn.dataset.sort;
+ }
+
+ if (btn.dataset.group) {
+ currentGroup = btn.dataset.group;
+ }
+
+ if (btn.dataset.filter) {
+ currentFilter = btn.dataset.filter;
+ }
+
+ closeOptionsSheet();
+ refreshGallery();
+ });
+});
+
+// ===============================
+// FUNZIONE CENTRALE DI AGGIORNAMENTO GALLERIA
+// ===============================
+function refreshGallery() {
+ console.log("Aggiornamento galleria...");
+
+ let photos = [...photosData];
+
+ // 1) Filtri
+ photos = applyFilters(photos);
+
+ // 2) Ordinamento
+ photos = sortByDate(photos, currentSort);
+
+ // 3) Raggruppamento
+ const sections = groupByDate(photos, currentGroup);
+
+ // 4) Rendering
+ renderGallery(sections);
+}
diff --git a/style.css b/style.css
index cad5927..f928901 100644
--- a/style.css
+++ b/style.css
@@ -341,3 +341,85 @@ header {
height: 100%;
object-fit: cover;
}
+
+.top-buttons {
+ display: flex;
+ gap: 10px;
+}
+
+.icon-btn {
+ background: none;
+ border: none;
+ font-size: 22px;
+ padding: 6px 10px;
+ cursor: pointer;
+ border-radius: 6px;
+}
+
+.icon-btn:hover {
+ background: rgba(0,0,0,0.1);
+}
+
+#optionsSheet .sheet-content {
+ padding: 20px;
+}
+
+#optionsSheet h3 {
+ margin-top: 20px;
+ margin-bottom: 10px;
+ font-size: 16px;
+ color: #444;
+}
+
+.sheet-btn {
+ width: 100%;
+ padding: 12px;
+ margin-bottom: 8px;
+ text-align: left;
+ background: #f5f5f5;
+ border: none;
+ border-radius: 8px;
+ font-size: 15px;
+ cursor: pointer;
+}
+
+.sheet-btn:hover {
+ background: #e8e8e8;
+}
+
+.gallery-section-title {
+ font-size: 20px;
+ font-weight: 600;
+ margin: 20px 10px 10px;
+ color: #444;
+}
+
+.gallery-section {
+ column-count: 3;
+ column-gap: 10px;
+ padding: 0 10px;
+}
+
+@media (max-width: 900px) {
+ .gallery-section { column-count: 2; }
+}
+
+@media (max-width: 600px) {
+ .gallery-section { column-count: 1; }
+}
+
+.thumb {
+ break-inside: avoid;
+ margin-bottom: 10px;
+ border-radius: 10px;
+ overflow: hidden;
+ box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+}
+
+.thumb img {
+ width: 100%;
+ display: block;
+ object-fit: cover;
+}
+
+
+
+
+