123 lines
No EOL
3.3 KiB
JavaScript
123 lines
No EOL
3.3 KiB
JavaScript
// ===============================
|
|
// BOTTOM SHEET — strip multi-foto (2+); singola → modal diretto
|
|
// ===============================
|
|
|
|
const bottomSheet = document.getElementById("bottomSheet");
|
|
const sheetGallery = document.getElementById("sheetGallery");
|
|
let optionsSheetRef = document.getElementById("optionsSheet");
|
|
|
|
// Overlay difensivo
|
|
let sheetOverlay = document.getElementById("sheetOverlay");
|
|
if (!sheetOverlay) {
|
|
sheetOverlay = document.createElement("div");
|
|
sheetOverlay.id = "sheetOverlay";
|
|
sheetOverlay.className = "sheet-overlay";
|
|
document.body.appendChild(sheetOverlay);
|
|
}
|
|
|
|
// ===============================
|
|
// APRI BOTTOM SHEET
|
|
// ===============================
|
|
function openBottomSheet(photoList) {
|
|
const list = Array.isArray(photoList) ? photoList : [];
|
|
|
|
// 0 o 1 foto → apri modal direttamente
|
|
if (list.length <= 1) {
|
|
const p = list[0];
|
|
if (p) {
|
|
closeBottomSheet();
|
|
window.openModalFromList?.([p], 0);
|
|
}
|
|
return;
|
|
}
|
|
|
|
// 2+ foto → strip
|
|
sheetGallery.innerHTML = "";
|
|
|
|
list.forEach((photo, index) => {
|
|
const { original, preview } = mediaUrlsFromPhoto(photo);
|
|
|
|
const div = document.createElement("div");
|
|
div.className = "sheet-item";
|
|
div.tabIndex = 0;
|
|
|
|
const img = document.createElement("img");
|
|
img.className = "sheet-thumb";
|
|
img.src = preview;
|
|
img.alt = photo?.name || "";
|
|
img.loading = "lazy";
|
|
|
|
const openFromIndex = () => {
|
|
closeBottomSheet();
|
|
window.openModalFromList?.(list, index);
|
|
};
|
|
|
|
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");
|
|
}
|
|
|
|
// ===============================
|
|
// CHIUDI BOTTOM SHEET
|
|
// ===============================
|
|
function closeBottomSheet() {
|
|
bottomSheet.classList.remove("open");
|
|
sheetOverlay.classList.remove("open");
|
|
}
|
|
|
|
// ===============================
|
|
// OPTIONS SHEET (versione bottomSheet)
|
|
// ===============================
|
|
// ⚠️ RINOMINATE per evitare conflitti con optionsSheet.js
|
|
function openOptionsSheetFromBottom() {
|
|
optionsSheetRef?.classList.add("open");
|
|
sheetOverlay.classList.add("open");
|
|
}
|
|
|
|
function closeOptionsSheetFromBottom() {
|
|
optionsSheetRef?.classList.remove("open");
|
|
sheetOverlay.classList.remove("open");
|
|
}
|
|
|
|
// ===============================
|
|
// CHIUSURA CLICCANDO FUORI
|
|
// ===============================
|
|
sheetOverlay.addEventListener("click", () => {
|
|
closeBottomSheet();
|
|
closeOptionsSheetFromBottom();
|
|
});
|
|
|
|
// Chiudi toccando la maniglia
|
|
document.querySelectorAll(".sheet-header").forEach(header => {
|
|
header.addEventListener("click", () => {
|
|
closeBottomSheet();
|
|
closeOptionsSheetFromBottom();
|
|
});
|
|
});
|
|
|
|
// ===============================
|
|
// EXPORT GLOBALI
|
|
// ===============================
|
|
window.openBottomSheet = openBottomSheet;
|
|
window.closeBottomSheet = closeBottomSheet;
|
|
|
|
window.openOptionsSheetFromBottom = openOptionsSheetFromBottom;
|
|
window.closeOptionsSheetFromBottom = closeOptionsSheetFromBottom;
|
|
|
|
window.BottomSheet = {
|
|
open: openBottomSheet,
|
|
close: closeBottomSheet,
|
|
openOptions: openOptionsSheetFromBottom,
|
|
closeOptions: closeOptionsSheetFromBottom
|
|
}; |