diff --git a/css/bottomSheet.css b/css/bottomSheet.css index e3b0bb0..9a65d16 100644 --- a/css/bottomSheet.css +++ b/css/bottomSheet.css @@ -1,5 +1,5 @@ /* =============================== - BOTTOM SHEET (menu ⋮) + STRUTTURA BASE (comune) =============================== */ .bottom-sheet { @@ -8,10 +8,6 @@ left: 0; width: 100%; - /* 🔥 Altezza dinamica: abbastanza grande per mostrare tutto */ - height: 60vh; - max-height: 80vh; - background: rgba(255,255,255,0.95); backdrop-filter: blur(6px); border-top: 1px solid #ddd; @@ -20,15 +16,13 @@ display: none; flex-direction: column; z-index: 9999; - - overflow-y: auto; /* 🔥 Scroll verticale */ } .bottom-sheet.open { display: flex; } -/* Header con la "maniglia" */ +/* Maniglia superiore */ .sheet-header { height: 16px; display: flex; @@ -44,12 +38,18 @@ border-radius: 4px; } -/* Contenuto del menu (ordinamento, filtri, ecc.) */ -.sheet-content { - padding: 20px; +/* =============================== + BOTTOM SHEET FOTO (MAPPA) + BASSO — SOLO STRISCIA FOTO + =============================== */ + +.photo-strip { + height: 140px; /* altezza originale */ + overflow-y: hidden; /* niente scroll verticale */ + overflow-x: auto; /* scroll orizzontale per le foto */ } -/* Miniature (usate nel bottom sheet delle foto, non in quello delle opzioni) */ +/* Miniature della striscia foto */ .sheet-gallery { display: flex; flex-direction: row; @@ -74,6 +74,21 @@ object-fit: cover; } +/* =============================== + BOTTOM SHEET OPZIONI (⋮) + ALTO — MENU COMPLETO + =============================== */ + +.options-sheet { + height: auto; /* grande */ + max-height: 80vh; + overflow-y: auto; /* scroll verticale */ +} + +.sheet-content { + padding: 20px; +} + /* Pulsanti del menu ⋮ */ .sheet-btn { width: 100%; @@ -91,10 +106,22 @@ background: #e8e8e8; } -/* Titoli delle sezioni */ +/* Titoli delle sezioni del menu ⋮ */ #optionsSheet h3 { margin-top: 20px; margin-bottom: 10px; font-size: 16px; color: #444; } + +.sheet-overlay { + position: fixed; + inset: 0; + background: rgba(0,0,0,0.0); /* invisibile */ + display: none; + z-index: 9998; /* appena sotto il bottom sheet */ +} + +.sheet-overlay.open { + display: block; +} diff --git a/index.html b/index.html index 56b94f9..dac06d1 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,6 @@ - @@ -46,31 +45,41 @@
- + + + - + + +
- -
+ + + +
+ + + + +
- + -
+
diff --git a/js/bottomSheet.js b/js/bottomSheet.js index 7e5359b..b4c1de3 100644 --- a/js/bottomSheet.js +++ b/js/bottomSheet.js @@ -2,10 +2,26 @@ // BOTTOM SHEET (Google Photos Web) // =============================== +// Striscia foto (MAPPA) const bottomSheet = document.getElementById("bottomSheet"); const sheetGallery = document.getElementById("sheetGallery"); -// Apri il bottom sheet con una lista di foto +// Menu ⋮ (OPZIONI) — NON usare const se già definito altrove +let optionsSheetRef = document.getElementById("optionsSheet"); + +// Overlay per chiudere i bottom sheet +let sheetOverlay = document.getElementById("sheetOverlay"); +if (!sheetOverlay) { + sheetOverlay = document.createElement("div"); + sheetOverlay.id = "sheetOverlay"; + sheetOverlay.className = "sheet-overlay"; + document.body.appendChild(sheetOverlay); +} + +// =============================== +// STRISCIA FOTO (MAPPA) +// =============================== + function openBottomSheet(photoList) { sheetGallery.innerHTML = ""; @@ -31,21 +47,53 @@ function openBottomSheet(photoList) { }); bottomSheet.classList.add("open"); + sheetOverlay.classList.add("open"); } -// Chiudi il bottom sheet function closeBottomSheet() { bottomSheet.classList.remove("open"); + sheetOverlay.classList.remove("open"); } -// Chiudi cliccando fuori dal bottom sheet -document.addEventListener("click", (e) => { - if (!bottomSheet.classList.contains("open")) return; +// =============================== +// MENU ⋮ (OPZIONI) +// =============================== - const clickedInside = bottomSheet.contains(e.target); - const clickedMarker = e.target.closest(".photo-marker, .photo-cluster"); +function openOptionsSheet() { + optionsSheetRef.classList.add("open"); + sheetOverlay.classList.add("open"); +} - if (!clickedInside && !clickedMarker) { - closeBottomSheet(); - } +function closeOptionsSheet() { + optionsSheetRef.classList.remove("open"); + sheetOverlay.classList.remove("open"); +} + +// =============================== +// CHIUSURA CLICCANDO FUORI +// =============================== + +sheetOverlay.addEventListener("click", () => { + closeBottomSheet(); + closeOptionsSheet(); }); + +// =============================== +// CHIUSURA TOCCANDO LA MANIGLIA +// =============================== + +document.querySelectorAll(".sheet-header").forEach(header => { + header.addEventListener("click", () => { + closeBottomSheet(); + closeOptionsSheet(); + }); +}); + +// =============================== +// ESPORTIAMO LE FUNZIONI +// =============================== + +window.openBottomSheet = openBottomSheet; +window.closeBottomSheet = closeBottomSheet; +window.openOptionsSheet = openOptionsSheet; +window.closeOptionsSheet = closeOptionsSheet;