7
This commit is contained in:
parent
4d11fee0cd
commit
9cfdef19df
3 changed files with 107 additions and 3 deletions
65
app.js
65
app.js
|
|
@ -6,6 +6,10 @@ const API_URL = 'https://prova.patachina.it/photos';
|
||||||
let photosData = [];
|
let photosData = [];
|
||||||
let currentPhoto = null;
|
let currentPhoto = null;
|
||||||
|
|
||||||
|
// Mappa globale
|
||||||
|
let globalMap = null;
|
||||||
|
let globalMarkers = null;
|
||||||
|
|
||||||
// ===============================
|
// ===============================
|
||||||
// DEBUG INIZIALE
|
// DEBUG INIZIALE
|
||||||
// ===============================
|
// ===============================
|
||||||
|
|
@ -93,7 +97,6 @@ function renderGallery(photos) {
|
||||||
// MODALE (FOTO + VIDEO)
|
// MODALE (FOTO + VIDEO)
|
||||||
// ===============================
|
// ===============================
|
||||||
const modal = document.getElementById('modal');
|
const modal = document.getElementById('modal');
|
||||||
const modalImg = document.getElementById('modalImage'); // NON USATO PIÙ
|
|
||||||
const modalClose = document.getElementById('modalClose');
|
const modalClose = document.getElementById('modalClose');
|
||||||
|
|
||||||
function openModal(srcOriginal, srcPreview, photo) {
|
function openModal(srcOriginal, srcPreview, photo) {
|
||||||
|
|
@ -103,7 +106,6 @@ function openModal(srcOriginal, srcPreview, photo) {
|
||||||
container.innerHTML = ""; // pulizia
|
container.innerHTML = ""; // pulizia
|
||||||
|
|
||||||
if (photo.mime_type.startsWith("video/")) {
|
if (photo.mime_type.startsWith("video/")) {
|
||||||
// VIDEO
|
|
||||||
const video = document.createElement("video");
|
const video = document.createElement("video");
|
||||||
video.src = srcOriginal;
|
video.src = srcOriginal;
|
||||||
video.controls = true;
|
video.controls = true;
|
||||||
|
|
@ -112,7 +114,6 @@ function openModal(srcOriginal, srcPreview, photo) {
|
||||||
video.style.maxHeight = "100%";
|
video.style.maxHeight = "100%";
|
||||||
container.appendChild(video);
|
container.appendChild(video);
|
||||||
} else {
|
} else {
|
||||||
// FOTO
|
|
||||||
const img = document.createElement("img");
|
const img = document.createElement("img");
|
||||||
img.src = srcPreview;
|
img.src = srcPreview;
|
||||||
img.style.maxWidth = "100%";
|
img.style.maxWidth = "100%";
|
||||||
|
|
@ -202,6 +203,64 @@ document.addEventListener('click', (e) => {
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// ===============================
|
||||||
|
// MAPPA GLOBALE
|
||||||
|
// ===============================
|
||||||
|
document.getElementById("openMapBtn").addEventListener("click", openGlobalMap);
|
||||||
|
|
||||||
|
function openGlobalMap() {
|
||||||
|
const mapDiv = document.getElementById("globalMap");
|
||||||
|
const gallery = document.getElementById("gallery");
|
||||||
|
|
||||||
|
// TOGGLE
|
||||||
|
const isOpen = mapDiv.classList.contains("open");
|
||||||
|
|
||||||
|
if (isOpen) {
|
||||||
|
// Chiudi mappa → mostra gallery
|
||||||
|
mapDiv.classList.remove("open");
|
||||||
|
gallery.classList.remove("hidden");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apri mappa → nascondi gallery
|
||||||
|
mapDiv.classList.add("open");
|
||||||
|
gallery.classList.add("hidden");
|
||||||
|
|
||||||
|
// Inizializza mappa solo la prima volta
|
||||||
|
if (!globalMap) {
|
||||||
|
globalMap = L.map("globalMap").setView([42.5, 12.5], 6);
|
||||||
|
|
||||||
|
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
||||||
|
maxZoom: 19
|
||||||
|
}).addTo(globalMap);
|
||||||
|
|
||||||
|
globalMarkers = L.markerClusterGroup();
|
||||||
|
globalMap.addLayer(globalMarkers);
|
||||||
|
|
||||||
|
photosData.forEach(photo => {
|
||||||
|
if (!photo.gps || !photo.gps.lat || !photo.gps.lng) return;
|
||||||
|
|
||||||
|
const marker = L.marker([photo.gps.lat, photo.gps.lng]);
|
||||||
|
|
||||||
|
marker.on("click", () => {
|
||||||
|
openModal(
|
||||||
|
`https://prova.patachina.it/${photo.path}`,
|
||||||
|
photo.thub2
|
||||||
|
? `https://prova.patachina.it/${photo.thub2}`
|
||||||
|
: `https://prova.patachina.it/${photo.thub1}`,
|
||||||
|
photo
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
globalMarkers.addLayer(marker);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fix dimensioni mappa quando appare
|
||||||
|
setTimeout(() => globalMap.invalidateSize(), 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// ===============================
|
// ===============================
|
||||||
// AVVIO
|
// AVVIO
|
||||||
// ===============================
|
// ===============================
|
||||||
|
|
|
||||||
11
index.html
11
index.html
|
|
@ -9,16 +9,24 @@
|
||||||
|
|
||||||
<!-- Leaflet CSS -->
|
<!-- Leaflet CSS -->
|
||||||
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
||||||
|
|
||||||
|
<!-- MarkerCluster CSS -->
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css" />
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<h1>Galleria Foto</h1>
|
<h1>Galleria Foto</h1>
|
||||||
|
<button id="openMapBtn" class="map-btn">🗺️ Mappa</button>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<div id="gallery" class="gallery"></div>
|
<div id="gallery" class="gallery"></div>
|
||||||
|
|
||||||
|
<!-- Mappa globale -->
|
||||||
|
<div id="globalMap" class="global-map"></div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<!-- Modal Media (foto + video) -->
|
<!-- Modal Media (foto + video) -->
|
||||||
|
|
@ -39,6 +47,9 @@
|
||||||
<!-- Leaflet JS -->
|
<!-- Leaflet JS -->
|
||||||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||||
|
|
||||||
|
<!-- MarkerCluster JS -->
|
||||||
|
<script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
|
||||||
|
|
||||||
<!-- Eruda Debug Console -->
|
<!-- Eruda Debug Console -->
|
||||||
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
|
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
34
style.css
34
style.css
|
|
@ -178,3 +178,37 @@ header {
|
||||||
background: #ddd;
|
background: #ddd;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.map-btn {
|
||||||
|
margin-left: 10px;
|
||||||
|
padding: 6px 12px;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.global-map {
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh - 60px);
|
||||||
|
z-index: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.global-map.open {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.global-map {
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh - 60px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.global-map.open {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue