photo_server_json_con_aves22/public/js/infoPanel.js

// ===============================
// PANNELLO INFO + MAPPA
// ===============================

const infoPanel = document.getElementById("infoPanel");
let infoMapInstance = null;

// -------------------------------
// 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 loc = photo.location || {};
  const folder = photo.cartella || "-";

  infoPanel.innerHTML = `
    <h3>Informazioni</h3>

    <div class="info-row"><b>Nome:</b> ${photo.name ?? "-"}</div>
    <div class="info-row"><b>Data:</b> ${photo.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> ${photo.width ?? "-"} × ${photo.height ?? "-"}</div>
    <div class="info-row"><b>Peso:</b> ${
      photo.size_bytes
        ? (photo.size_bytes / 1024 / 1024).toFixed(2) + " MB"
        : "-"
    }</div>
    <div class="info-row"><b>Tipo:</b> ${photo.mime_type ?? "-"}</div>

    <div class="info-row"><b>Cartella:</b> ${folder}</div>

    <div class="info-spacer"></div>

    <h3>Mappa</h3>
    ${
      gps.lat !== "-" && gps.lng !== "-"
        ? '<div id="infoMap" class="info-map"></div>'
        : ""
    }

    <div class="info-spacer"></div>

    <h3>Location</h3>
    ${loc.continent   ? `<div class="info-row"><b>Continente:</b> ${loc.continent}</div>` : ""}
    ${loc.country     ? `<div class="info-row"><b>Nazione:</b> ${loc.country}</div>` : ""}
    ${loc.region      ? `<div class="info-row"><b>Regione:</b> ${loc.region}</div>` : ""}
    ${loc.city        ? `<div class="info-row"><b>Città:</b> ${loc.city}</div>` : ""}
    ${loc.address     ? `<div class="info-row"><b>Indirizzo:</b> ${loc.address}</div>` : ""}
    ${loc.postcode    ? `<div class="info-row"><b>CAP:</b> ${loc.postcode}</div>` : ""}
    ${loc.county_code ? `<div class="info-row"><b>Provincia:</b> ${loc.county_code}</div>` : ""}
    ${loc.timezone    ? `<div class="info-row"><b>Timezone:</b> ${loc.timezone}</div>` : ""}
    ${loc.time        ? `<div class="info-row"><b>Offset:</b> ${loc.time}</div>` : ""}
  `;

  // Reset mappa precedente
  try { infoMapInstance?.remove(); } catch {}
  infoMapInstance = null;

  // Crea nuova mappa se ci sono coordinate
  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(photo) {
  renderInfo(photo || window.currentPhoto);
  infoPanel.classList.add("open");
  infoPanel.setAttribute("aria-hidden", "false");
  infoPanel.setAttribute("data-open", "1");
  markButtonActive(true);
};

window.closeInfoPanel = function() {
  infoPanel.classList.remove("open");
  infoPanel.setAttribute("aria-hidden", "true");
  infoPanel.setAttribute("data-open", "0");
  markButtonActive(false);

  try { infoMapInstance?.remove(); } catch {}
  infoMapInstance = null;
};

window.toggleInfoPanel = function(photo) {
  if (isPanelOpen()) window.closeInfoPanel();
  else window.openInfoPanel(photo || window.currentPhoto);
};

// -------------------------------
// Chiudi pannello cliccando FUORI
// -------------------------------
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 su cambio media nel modal
// -------------------------------
(() => {
  const mediaContainer = document.getElementById("modalMediaContainer");
  if (!mediaContainer) return;

  const refreshIfOpen = () => {
    if (!isPanelOpen()) return;
    const photo = window.currentPhoto;
    if (photo) renderInfo(photo);
  };

  const mo = new MutationObserver(() => {
    setTimeout(refreshIfOpen, 0);
  });
  mo.observe(mediaContainer, { childList: true });

  document.getElementById("modalPrev")?.addEventListener("click", () =>
    setTimeout(refreshIfOpen, 0)
  );
  document.getElementById("modalNext")?.addEventListener("click", () =>
    setTimeout(refreshIfOpen, 0)
  );

  document.addEventListener("keydown", (e) => {
    if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
      setTimeout(refreshIfOpen, 0);
    }
  });
})();