133 lines
No EOL
3.4 KiB
JavaScript
133 lines
No EOL
3.4 KiB
JavaScript
// ===============================
|
|
// BOTTOM SHEET — strip multi-foto (2+); singola → modal diretto
|
|
// Regola: aprendo qualcosa di nuovo, chiudo il precedente
|
|
// ===============================
|
|
|
|
const bottomSheet = document.getElementById("bottomSheet");
|
|
const sheetGallery = document.getElementById("sheetGallery");
|
|
let optionsSheetRef = document.getElementById("optionsSheet");
|
|
|
|
// Overlay (creazione difensiva)
|
|
let sheetOverlay = document.getElementById("sheetOverlay");
|
|
if (!sheetOverlay) {
|
|
sheetOverlay = document.createElement("div");
|
|
sheetOverlay.id = "sheetOverlay";
|
|
sheetOverlay.className = "sheet-overlay";
|
|
document.body.appendChild(sheetOverlay);
|
|
}
|
|
|
|
function openBottomSheet(photoList) {
|
|
const list = Array.isArray(photoList) ? photoList : [];
|
|
|
|
// 0 o 1 foto → MODAL diretto, nessuna bottom-zone
|
|
if (list.length <= 1) {
|
|
const p = list[0];
|
|
if (p) {
|
|
const thumbUrl = absUrl(
|
|
p.thub2 || p.thub1 || p.path,
|
|
p.user,
|
|
"thumbs",
|
|
p.cartella
|
|
);
|
|
|
|
const originalUrl = absUrl(
|
|
p.path,
|
|
p.user,
|
|
"original",
|
|
p.cartella
|
|
);
|
|
|
|
closeBottomSheet();
|
|
|
|
if (typeof window.openModalFromList === "function") {
|
|
window.openModalFromList([p], 0);
|
|
} else {
|
|
window.openModal?.(originalUrl, thumbUrl, p);
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
|
|
// 2+ foto → strip in basso
|
|
sheetGallery.innerHTML = "";
|
|
|
|
list.forEach((photo, index) => {
|
|
const thumbUrl = absUrl(
|
|
photo.thub2 || photo.thub1,
|
|
photo.user,
|
|
"thumbs",
|
|
photo.cartella
|
|
);
|
|
|
|
const originalUrl = absUrl(
|
|
photo.path,
|
|
photo.user,
|
|
"original",
|
|
photo.cartella
|
|
);
|
|
|
|
const div = document.createElement("div");
|
|
div.className = "sheet-item";
|
|
div.tabIndex = 0;
|
|
|
|
const img = document.createElement("img");
|
|
img.className = "sheet-thumb";
|
|
img.src = thumbUrl;
|
|
img.alt = photo?.name || "";
|
|
img.loading = "lazy";
|
|
|
|
const openFromIndex = () => {
|
|
closeBottomSheet();
|
|
if (typeof window.openModalFromList === "function") {
|
|
window.openModalFromList(list, index);
|
|
} else {
|
|
window.openModal?.(originalUrl, thumbUrl, photo);
|
|
}
|
|
};
|
|
|
|
div.addEventListener("click", openFromIndex);
|
|
div.addEventListener("keydown", (e) => {
|
|
if (e.key === "Enter" || e.key === " ") { e.preventDefault(); openFromIndex(); }
|
|
});
|
|
|
|
div.appendChild(img);
|
|
sheetGallery.appendChild(div);
|
|
});
|
|
|
|
bottomSheet.classList.add("open");
|
|
sheetOverlay.classList.add("open");
|
|
}
|
|
|
|
function closeBottomSheet() {
|
|
bottomSheet.classList.remove("open");
|
|
sheetOverlay.classList.remove("open");
|
|
}
|
|
|
|
function openOptionsSheet() {
|
|
optionsSheetRef?.classList.add("open");
|
|
sheetOverlay.classList.add("open");
|
|
}
|
|
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();
|
|
});
|
|
});
|
|
|
|
// Export
|
|
window.openBottomSheet = openBottomSheet;
|
|
window.closeBottomSheet = closeBottomSheet;
|
|
window.openOptionsSheet = openOptionsSheet;
|
|
window.closeOptionsSheet = closeOptionsSheet; |