57 lines
1.8 KiB
JavaScript
57 lines
1.8 KiB
JavaScript
// ===============================
|
||
// PANNELLO INFO + MAPPA
|
||
// ===============================
|
||
const infoPanel = document.getElementById('infoPanel');
|
||
const infoBtn = document.getElementById('modalInfoBtn');
|
||
|
||
infoBtn.addEventListener('click', () => {
|
||
if (!currentPhoto) return;
|
||
|
||
const gps = currentPhoto.gps || { lat: '-', lng: '-', alt: '-' };
|
||
const folder = currentPhoto.path.split('/').slice(2, -1).join('/');
|
||
|
||
infoPanel.innerHTML = `
|
||
<h3>Informazioni</h3>
|
||
|
||
<div class="info-row"><b>Nome:</b> ${currentPhoto.name}</div>
|
||
<div class="info-row"><b>Data:</b> ${currentPhoto.taken_at}</div>
|
||
|
||
<div class="info-row"><b>Latitudine:</b> ${gps.lat}</div>
|
||
<div class="info-row"><b>Longitudine:</b> ${gps.lng}</div>
|
||
<div class="info-row"><b>Altitudine:</b> ${gps.alt} m</div>
|
||
|
||
<div class="info-row"><b>Dimensioni:</b> ${currentPhoto.width} × ${currentPhoto.height}</div>
|
||
<div class="info-row"><b>Peso:</b> ${(currentPhoto.size_bytes / 1024 / 1024).toFixed(2)} MB</div>
|
||
<div class="info-row"><b>Tipo:</b> ${currentPhoto.mime_type}</div>
|
||
|
||
<div class="info-row"><b>Cartella:</b> ${folder}</div>
|
||
|
||
${gps.lat !== '-' ? '<div id="infoMap" class="info-map"></div>' : ''}
|
||
`;
|
||
|
||
infoPanel.classList.add('open');
|
||
|
||
if (gps.lat !== '-' && gps.lng !== '-') {
|
||
setTimeout(() => {
|
||
const map = L.map('infoMap', {
|
||
zoomControl: false,
|
||
attributionControl: false
|
||
}).setView([gps.lat, gps.lng], 13);
|
||
|
||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||
maxZoom: 19
|
||
}).addTo(map);
|
||
|
||
L.marker([gps.lat, gps.lng]).addTo(map);
|
||
}, 50);
|
||
}
|
||
});
|
||
|
||
document.addEventListener('click', (e) => {
|
||
if (!infoPanel.classList.contains('open')) return;
|
||
|
||
const inside = infoPanel.contains(e.target);
|
||
const btn = infoBtn.contains(e.target);
|
||
|
||
if (!inside && !btn) infoPanel.classList.remove('open');
|
||
});
|