// ===============================
// PANNELLO INFO + MAPPA (toggle affidabile + auto-refresh su cambio foto)
// ===============================
const infoPanel = document.getElementById('infoPanel');
let infoMapInstance = null; // tieni traccia della mappa per pulizia
// -------------------------------
// Helpers UI / stato
// -------------------------------
function isPanelOpen() {
return infoPanel.classList.contains('open') ||
infoPanel.getAttribute('aria-hidden') === 'false' ||
infoPanel.getAttribute('data-open') === '1' ||
infoPanel.style.display === 'block';
}
function markButtonActive(active) {
const btn = document.getElementById('modalInfoBtn');
if (btn) btn.classList.toggle('active', !!active);
}
// -------------------------------
// Render contenuti + (ri)creazione mappa
// -------------------------------
function renderInfo(photo) {
if (!photo) return;
const gps = photo.gps || { lat: '-', lng: '-', alt: '-' };
const folder = photo.path?.split('/').slice(2, -1).join('/') || '-';
const loc = photo.location || {};
// Inietta contenuti
infoPanel.innerHTML = `
Informazioni
Nome: ${photo.name ?? '-'}
Data: ${photo.taken_at ?? '-'}
Latitudine: ${gps.lat ?? '-'}
Longitudine: ${gps.lng ?? '-'}
Altitudine: ${gps.alt ?? '-'} m
Dimensioni: ${photo.width ?? '-'} × ${photo.height ?? '-'}
Peso: ${photo.size_bytes ? (photo.size_bytes / 1024 / 1024).toFixed(2) + ' MB' : '-'}
Tipo: ${photo.mime_type ?? '-'}
Cartella: ${folder}
Mappa
${gps.lat !== '-' && gps.lng !== '-' ? '' : ''}
Location
${loc.continent ? `Continente: ${loc.continent}
` : ''}
${loc.country ? `Nazione: ${loc.country}
` : ''}
${loc.region ? `Regione: ${loc.region}
` : ''}
${loc.city ? `Città: ${loc.city}
` : ''}
${loc.address ? `Indirizzo: ${loc.address}
` : ''}
${loc.postcode ? `CAP: ${loc.postcode}
` : ''}
${loc.county_code ? `Provincia: ${loc.county_code}
` : ''}
${loc.timezone ? `Timezone: ${loc.timezone}
` : ''}
${loc.time ? `Offset: ${loc.time}
` : ''}
`;
// (Ri)crea la mappa se ci sono coordinate
// 1) Pulisci istanza precedente (evita "Map container is already initialized")
try { infoMapInstance?.remove(); } catch {}
infoMapInstance = null;
if (gps.lat !== '-' && gps.lng !== '-') {
setTimeout(() => {
try {
infoMapInstance = 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(infoMapInstance);
L.marker([gps.lat, gps.lng]).addTo(infoMapInstance);
} catch (err) {
console.warn('Errore creazione mappa info:', err);
}
}, 50);
}
}
// -------------------------------
// API pubbliche: apri / chiudi / toggle
// -------------------------------
window.openInfoPanel = function openInfoPanel(photo) {
renderInfo(photo || window.currentPhoto);
infoPanel.classList.add('open');
infoPanel.setAttribute('aria-hidden', 'false');
infoPanel.setAttribute('data-open', '1');
markButtonActive(true);
};
window.closeInfoPanel = function closeInfoPanel() {
infoPanel.classList.remove('open');
infoPanel.setAttribute('aria-hidden', 'true');
infoPanel.setAttribute('data-open', '0');
markButtonActive(false);
// pulizia mappa
try { infoMapInstance?.remove(); } catch {}
infoMapInstance = null;
};
window.toggleInfoPanel = function toggleInfoPanel(photo) {
if (isPanelOpen()) window.closeInfoPanel();
else window.openInfoPanel(photo || window.currentPhoto);
};
// -------------------------------
// Delegation: click su ℹ️ = TOGGLE vero
// -------------------------------
document.addEventListener('click', (e) => {
if (e.target.id !== 'modalInfoBtn') return;
e.stopPropagation(); // evita side-effects (es. navigazione ai bordi)
window.toggleInfoPanel(window.currentPhoto);
});
// Chiudi pannello cliccando FUORI (non su ℹ️)
document.addEventListener('click', (e) => {
if (!isPanelOpen()) return;
const inside = infoPanel.contains(e.target);
const isBtn = e.target.id === 'modalInfoBtn';
if (!inside && !isBtn) window.closeInfoPanel();
});
// -------------------------------
/* Auto-refresh: se cambia il media nel modal e l'info è aperto, aggiorna */
(() => {
const mediaContainer = document.getElementById('modalMediaContainer');
if (!mediaContainer) return;
const refreshIfOpen = () => {
if (!isPanelOpen()) return;
const photo = window.currentPhoto;
if (photo) renderInfo(photo);
};
// 1) Osserva la sostituzione del media (immagine/video) nel modal
const mo = new MutationObserver(() => {
// Debounce minimo per evitare doppi render durante il replace
setTimeout(refreshIfOpen, 0);
});
mo.observe(mediaContainer, { childList: true });
// 2) (Extra robustezza) ascolta le frecce se esistono
document.getElementById('modalPrev')?.addEventListener('click', () => setTimeout(refreshIfOpen, 0));
document.getElementById('modalNext')?.addEventListener('click', () => setTimeout(refreshIfOpen, 0));
// 3) (Extra) tastiera ←/→
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
setTimeout(refreshIfOpen, 0);
}
});
})();