126 lines
3.9 KiB
JavaScript
126 lines
3.9 KiB
JavaScript
// public/js/galleryRenderer.js
|
|
// Creazione degli elementi DOM per foto e attività.
|
|
|
|
(() => {
|
|
"use strict";
|
|
|
|
const INITIAL_EAGER_IMAGES = 20;
|
|
const HIGH_PRIORITY_IMAGES = 8;
|
|
|
|
function createPhotoTile(item, sectionItems, itemIndex, globalIndex) {
|
|
const tile = document.createElement("div");
|
|
tile.className = "thumb";
|
|
tile.id = `photo_${item.id}`;
|
|
if (item.deleted_at) tile.classList.add("soft-deleted");
|
|
|
|
const gridThumb = window.toAbsoluteUrl(
|
|
item.thub1 || item.thub2 || item.path,
|
|
item.name,
|
|
"thumbs",
|
|
item.cartella
|
|
);
|
|
const modalPreview = window.toAbsoluteUrl(
|
|
item.thub2 || item.thub1 || item.path,
|
|
item.name,
|
|
"thumbs",
|
|
item.cartella
|
|
);
|
|
const original = window.toAbsoluteUrl(
|
|
item.path,
|
|
item.name,
|
|
"original",
|
|
item.cartella
|
|
);
|
|
|
|
const image = document.createElement("img");
|
|
image.src = gridThumb;
|
|
image.alt = item?.name || "";
|
|
image.loading = globalIndex < INITIAL_EAGER_IMAGES ? "eager" : "lazy";
|
|
image.decoding = "async";
|
|
if (globalIndex < HIGH_PRIORITY_IMAGES) image.fetchPriority = "high";
|
|
tile.appendChild(image);
|
|
|
|
if (item?.mime_type?.startsWith("video/")) {
|
|
const play = document.createElement("div");
|
|
play.className = "play-icon";
|
|
play.textContent = "▶";
|
|
tile.appendChild(play);
|
|
}
|
|
|
|
tile.addEventListener("click", () => {
|
|
window.closeBottomSheet?.();
|
|
if (typeof window.openModalFromList === "function") {
|
|
window.openModalFromList(sectionItems, itemIndex);
|
|
} else {
|
|
window.openModal?.(original, modalPreview, item);
|
|
}
|
|
});
|
|
|
|
return tile;
|
|
}
|
|
|
|
function createActivityTile(item, sectionItems, itemIndex) {
|
|
const tile = document.createElement("div");
|
|
tile.className = "activity-tile";
|
|
tile.id = `activity_${String(item.id || "").replaceAll("/", "_")}`;
|
|
if (item.deleted_at) tile.classList.add("soft-deleted");
|
|
|
|
const routeBox = document.createElement("div");
|
|
routeBox.className = "activity-route-thumb loading";
|
|
routeBox.innerHTML = '<div class="activity-route-placeholder"><span>Caricamento percorso...</span></div>';
|
|
tile.appendChild(routeBox);
|
|
window.ActivityThumbs?.renderRouteThumb(routeBox, item);
|
|
|
|
const label = document.createElement("div");
|
|
label.className = "activity-label";
|
|
label.textContent = item.display_name || item.route_name || item.title || item.name || "(senza nome)";
|
|
tile.appendChild(label);
|
|
|
|
const metaText = window.GalleryUtils?.formatActivityMeta(item) || "";
|
|
if (metaText) {
|
|
const meta = document.createElement("div");
|
|
meta.className = "activity-meta";
|
|
meta.textContent = metaText;
|
|
tile.appendChild(meta);
|
|
}
|
|
|
|
tile.addEventListener("click", () => {
|
|
window.closeBottomSheet?.();
|
|
window.openActivityModal?.(item, sectionItems, itemIndex);
|
|
});
|
|
|
|
return tile;
|
|
}
|
|
|
|
function renderGallery(sections) {
|
|
const gallery = document.getElementById("gallery");
|
|
if (!gallery) return;
|
|
|
|
const fragment = document.createDocumentFragment();
|
|
let globalPhotoIndex = 0;
|
|
|
|
for (const section of sections) {
|
|
const heading = document.createElement("h2");
|
|
heading.className = "gallery-section-title";
|
|
heading.textContent = section.label;
|
|
fragment.appendChild(heading);
|
|
|
|
const container = document.createElement("div");
|
|
container.className = "gallery-section";
|
|
|
|
section.items.forEach((item, itemIndex) => {
|
|
const tile = window.state?.mode === "photos"
|
|
? createPhotoTile(item, section.items, itemIndex, globalPhotoIndex++)
|
|
: createActivityTile(item, section.items, itemIndex);
|
|
container.appendChild(tile);
|
|
});
|
|
|
|
fragment.appendChild(container);
|
|
}
|
|
|
|
gallery.replaceChildren(fragment);
|
|
}
|
|
|
|
window.GalleryRenderer = Object.freeze({ renderGallery });
|
|
window.renderGallery = renderGallery;
|
|
})();
|