Significance: ${site.significance}
${site.key_features && site.key_features.length > 0 ? `
Key Features:${site.key_features.map(f => `- ${f}
`).join('')}
` : ''}
`;
// Highlight in list
document.querySelectorAll('#fasf_sites_list li').forEach(li => {
li.classList.toggle('fasf-selected', li.dataset.siteId === site.id);
});
// Pan map to selected site
leafletMap.setView([site.latitude, site.longitude], 10); // Zoom in a bit more
// Open its popup
currentMarkers.find(m => m.siteId === site.id)?.openPopup();
downloadPdfButton.disabled = false;
// Capture map snapshot for PDF (delay for map to settle)
currentMapSnapshot = null;
setTimeout(() => {
const mapCanvasElement = document.getElementById('fasf_map_canvas');
if (mapCanvasElement && leafletMap) { // Ensure map container is visible
html2canvas(mapCanvasElement, { useCORS: true, logging: false, allowTaint: true, scale: 0.7 }).then(canvas => { // Scale down for smaller PDF image
currentMapSnapshot = canvas.toDataURL('image/png');
}).catch(err => {
console.error("Error capturing map for PDF:", err);
currentMapSnapshot = null; // Ensure it's null if error
});
}
}, 1500);
}
// --- Event Listeners ---
continentFilter.addEventListener('change', displaySites);
typeFilter.addEventListener('change', displaySites);
civilizationFilter.addEventListener('change', displaySites);
searchInput.addEventListener('input', displaySites);
// --- PDF Generation ---
downloadPdfButton.addEventListener('click', async () => {
if (!selectedSite) {
alert("Please select an archaeological site first.");
return;
}
// Ensure map snapshot is captured if it wasn't ready
if (!currentMapSnapshot) {
const mapCanvasElement = document.getElementById('fasf_map_canvas');
if (mapCanvasElement && leafletMap) {
try {
const canvas = await html2canvas(mapCanvasElement, { useCORS: true, logging: false, allowTaint: true, scale: 0.7 });
currentMapSnapshot = canvas.toDataURL('image/png');
} catch (e) { console.error("Error capturing map on demand for PDF:", e); currentMapSnapshot = null; }
}
}
const { jsPDF } = window.jspdf;
const doc = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' });
const primaryColor = '#795548'; // Deeper Brown/Terracotta
const textColor = '#5D4037'; // Earthy Brown
const pageMargin = 15;
const pageWidth = doc.internal.pageSize.getWidth();
const contentWidth = pageWidth - (2 * pageMargin);
let currentY = pageMargin;
doc.setFontSize(18);
doc.setTextColor(primaryColor);
doc.text(selectedSite.name, pageWidth / 2, currentY, { align: 'center' });
currentY += 10;
doc.setFontSize(10);
doc.setTextColor(textColor);
doc.text(`Location: ${selectedSite.country}, ${selectedSite.continent}`, pageMargin, currentY); currentY += 5;
doc.text(`Civilization: ${selectedSite.civilization} | Period: ${selectedSite.period}`, pageMargin, currentY); currentY += 5;
doc.text(`Type: ${selectedSite.type}`, pageMargin, currentY); currentY += 7;
// Site Image (if available and Base64 or simple path)
const siteImageElement = document.querySelector('#fasf_site_detail_panel img');
if (siteImageElement && siteImageElement.src && siteImageElement.src !== selectedSite.image_placeholder) { // check it's a real image src
try {
const imgDataUrl = siteImageElement.src; // Assuming it's base64 or accessible URL
const imgProps = doc.getImageProperties(imgDataUrl);
const imgMaxHeight = 50;
let imgHeight = (imgProps.height * contentWidth) / imgProps.width;
let imgWidth = contentWidth;
if (imgHeight > imgMaxHeight) {
imgHeight = imgMaxHeight;
imgWidth = (imgProps.width * imgHeight) / imgProps.height;
}
if (currentY + imgHeight > doc.internal.pageSize.getHeight() - pageMargin) { doc.addPage(); currentY = pageMargin; }
doc.addImage(imgDataUrl, imgProps.fileType || 'JPEG', pageMargin + (contentWidth - imgWidth)/2 , currentY, imgWidth, imgHeight);
currentY += imgHeight + 7;
} catch (e) {
console.warn("PDF: Could not add site image. Error:", e);
doc.text(`Image: ${selectedSite.image_placeholder}`, pageMargin, currentY); currentY += 7;
}
} else if (selectedSite.image_placeholder && !selectedSite.image_placeholder.includes("[IMG:")) {
// If placeholder is a URL, attempt to use it (might fail due to CORS in jsPDF directly)
doc.text(`Image URL: ${selectedSite.image_placeholder}`, pageMargin, currentY); currentY += 7;
} else {
doc.text(selectedSite.image_placeholder, pageMargin, currentY); currentY +=7;
}
const addSectionToPdf = (title, textContent) => {
if (currentY + 10 > doc.internal.pageSize.getHeight() - pageMargin) { doc.addPage(); currentY = pageMargin; }
doc.setFontSize(12); doc.setTextColor(primaryColor);
doc.text(title, pageMargin, currentY); currentY += 5;
doc.setFontSize(10); doc.setTextColor(textColor);
let splitText = doc.splitTextToSize(textContent, contentWidth);
doc.text(splitText, pageMargin, currentY);
currentY += (splitText.length * 4.5) + 5;
};
addSectionToPdf("Description:", selectedSite.description);
addSectionToPdf("Significance:", selectedSite.significance);
if (selectedSite.key_features && selectedSite.key_features.length > 0) {
if (currentY + 10 + (selectedSite.key_features.length * 5) > doc.internal.pageSize.getHeight() - pageMargin) { doc.addPage(); currentY = pageMargin; }
doc.setFontSize(12); doc.setTextColor(primaryColor);
doc.text("Key Features:", pageMargin, currentY); currentY += 5;
doc.setFontSize(10); doc.setTextColor(textColor);
selectedSite.key_features.forEach(feature => {
doc.text(`• ${feature}`, pageMargin + 5, currentY); currentY += 4.5;
if (currentY > doc.internal.pageSize.getHeight() - pageMargin -5) { doc.addPage(); currentY = pageMargin; }
});
currentY += 5;
}
// Map Snapshot
if (currentMapSnapshot) {
if (currentY + 50 > doc.internal.pageSize.getHeight() - pageMargin) { doc.addPage(); currentY = pageMargin; }
doc.setFontSize(12); doc.setTextColor(primaryColor);
doc.text("Location Map Snapshot:", pageMargin, currentY); currentY += 5;
try {
const imgProps = doc.getImageProperties(currentMapSnapshot);
const mapHeight = 45;
const mapWidth = (imgProps.width * mapHeight) / imgProps.height;
const finalMapWidth = Math.min(mapWidth, contentWidth * 0.7); // Smaller map in PDF
const finalMapHeight = (imgProps.height * finalMapWidth) / imgProps.width;
doc.addImage(currentMapSnapshot, 'PNG', pageMargin + (contentWidth - finalMapWidth)/2 , currentY, finalMapWidth, finalMapHeight);
} catch (e) { console.error("Error adding map snapshot to PDF:", e); }
}
doc.save(`${selectedSite.name.replace(/\s+/g, '_')}_Details.pdf`);
});
// --- Initial Setup ---
initializeMap();
populateFilters();
displaySites(); // Initial display of all sites (or based on default filters)
// Placeholder for detail panel initially
siteDetailPanel.innerHTML = '
Select a site from the map or list to view details.
';
});
