13
This commit is contained in:
parent
4dec824b41
commit
81d31c6839
3 changed files with 115 additions and 31 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
25
index.html
25
index.html
|
|
@ -15,7 +15,6 @@
|
|||
<link rel="stylesheet" href="css/map.css">
|
||||
<link rel="stylesheet" href="css/utils.css">
|
||||
|
||||
|
||||
<!-- Leaflet CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
||||
|
||||
|
|
@ -46,31 +45,41 @@
|
|||
<div id="globalMap" class="global-map"></div>
|
||||
</main>
|
||||
|
||||
<!-- Modal Media (foto + video) -->
|
||||
<!-- =============================== -->
|
||||
<!-- MODAL FOTO/VIDEO -->
|
||||
<!-- =============================== -->
|
||||
<div id="modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-close" id="modalClose">×</div>
|
||||
|
||||
<!-- CONTENITORE DINAMICO -->
|
||||
<div id="modalMediaContainer"></div>
|
||||
|
||||
<div class="modal-info-btn" id="modalInfoBtn">ℹ️</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pannello Info -->
|
||||
<!-- =============================== -->
|
||||
<!-- PANNELLO INFO -->
|
||||
<!-- =============================== -->
|
||||
<div id="infoPanel" class="info-panel"></div>
|
||||
|
||||
<!-- Bottom Sheet stile Google Photos Web (foto/cluster) -->
|
||||
<div id="bottomSheet" class="bottom-sheet">
|
||||
<!-- =============================== -->
|
||||
<!-- PANNELLO OVERLAY -->
|
||||
<!-- =============================== -->
|
||||
<div id="sheetOverlay" class="sheet-overlay"></div>
|
||||
|
||||
<!-- =============================== -->
|
||||
<!-- BOTTOM SHEET FOTO (MAPPA) -->
|
||||
<!-- =============================== -->
|
||||
<div id="bottomSheet" class="bottom-sheet photo-strip">
|
||||
<div class="sheet-header"></div>
|
||||
<div class="sheet-gallery" id="sheetGallery"></div>
|
||||
</div>
|
||||
|
||||
<!-- =============================== -->
|
||||
<!-- BOTTOM SHEET OPZIONI (ordinamento + raggruppamento + filtri) -->
|
||||
<!-- BOTTOM SHEET OPZIONI (⋮) -->
|
||||
<!-- =============================== -->
|
||||
<div id="optionsSheet" class="bottom-sheet">
|
||||
<div id="optionsSheet" class="bottom-sheet options-sheet">
|
||||
<div class="sheet-header"></div>
|
||||
|
||||
<div class="sheet-content">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue