Time Period: ${fact.timePeriod}
` : ''}
${fact.detail.replace(/\n/g, '
')}
${fact.source ? `
Source: ${fact.source}
` : ''}
`;
browseFactsViewDiv.appendChild(card);
});
}
function handlePdfDownload() {
if (!jsPDF_constructor_for_tool) {
alert("PDF library is not available. Cannot download PDF.");
return;
}
const factsToExport = getFilteredFacts();
const pdfTitle = displayTitleInput.value || "Ancient Civilization Facts";
if (factsToExport.length === 0) {
alert("No facts to export based on current filters.");
return;
}
const pdf = new jsPDF_constructor_for_tool({
orientation: 'p', unit: 'mm', format: 'a4'
});
const primaryColor = primaryColorInput.value;
const textColor = textColorInput.value;
const pageBgColor = bgColorInput.value;
// const cardBgColor = cardBgColorInput.value; // For PDF, elements drawn directly
pdf.setFillColor(pageBgColor);
pdf.rect(0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight(), 'F');
const margin = 15;
const contentWidth = pdf.internal.pageSize.getWidth() - 2 * margin;
let currentY = margin;
// PDF Title
pdf.setFontSize(18);
pdf.setTextColor(primaryColor);
const titleLines = pdf.splitTextToSize(pdfTitle, contentWidth);
pdf.text(titleLines, pdf.internal.pageSize.getWidth() / 2, currentY, { align: 'center' });
currentY += (titleLines.length * 18 * 0.35) + 10; // Adjust spacing based on font size
factsToExport.forEach(fact => {
const factBlockStartY = currentY;
let estimatedBlockHeight = 0;
// Estimate height
pdf.setFontSize(12); estimatedBlockHeight += 5; // Title
pdf.setFontSize(9); estimatedBlockHeight += (fact.civilization ? 4 : 0) + (fact.category ? 4 : 0) + (fact.timePeriod ? 4 : 0); // Meta
pdf.setFontSize(10); estimatedBlockHeight += (pdf.splitTextToSize(fact.detail, contentWidth).length * 4); // Detail
if (fact.source) { pdf.setFontSize(8); estimatedBlockHeight += 4; } // Source
estimatedBlockHeight += 10; // Spacing
if (currentY + estimatedBlockHeight > pdf.internal.pageSize.getHeight() - margin) {
pdf.addPage();
currentY = margin;
pdf.setFillColor(pageBgColor);
pdf.rect(0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight(), 'F');
}
// Fact Title
pdf.setFontSize(12);
pdf.setTextColor(primaryColor);
const factTitleWrapped = pdf.splitTextToSize(fact.title, contentWidth);
pdf.text(factTitleWrapped, margin, currentY);
currentY += (factTitleWrapped.length * 12 * 0.35) + 3;
// Meta Info
pdf.setFontSize(9);
pdf.setTextColor(textColor);
if(fact.civilization) { pdf.text(`Civilization: ${fact.civilization}`, margin, currentY); currentY += 4; }
if(fact.category) { pdf.text(`Category: ${fact.category}`, margin, currentY); currentY += 4; }
if(fact.timePeriod) { pdf.text(`Time Period: ${fact.timePeriod}`, margin, currentY); currentY += 4; }
currentY += 2; // Small space before detail
// Detail
pdf.setFontSize(10);
pdf.setTextColor(textColor);
const detailLines = pdf.splitTextToSize(fact.detail, contentWidth);
pdf.text(detailLines, margin, currentY);
currentY += (detailLines.length * 10 * 0.35) + (fact.source ? 3 : 6);
// Source
if (fact.source) {
pdf.setFontSize(8);
pdf.setTextColor(textColor); // Or a lighter grey
pdf.text(`Source: ${fact.source}`, margin, currentY);
currentY += 8; // Space after source
} else {
currentY += 4; // Space if no source
}
// Draw a separator line (optional)
// pdf.setDrawColor(primaryColor);
// pdf.line(margin, currentY -2, margin + contentWidth, currentY - 2);
// currentY += 3;
});
let safePdfTitle = pdfTitle.replace(/[^a-z0-9]/gi, '_').toLowerCase() || "ancient_civilization_facts";
if (safePdfTitle.length > 50) safePdfTitle = safePdfTitle.substring(0, 50);
pdf.save(safePdfTitle + '.pdf');
}
// --- Event Listeners ---
// Tab switching
tabs.forEach(tab => {
tab.addEventListener('click', (e) => {
const targetTabId = e.currentTarget.dataset.tab;
if (targetTabId) switchTab(targetTabId);
});
});
document.querySelectorAll('.acfd-next-tab, .acfd-prev-tab').forEach(button => {
button.addEventListener('click', (e) => {
const targetTabId = e.currentTarget.dataset.nexttab || e.currentTarget.dataset.prevtab;
if (targetTabId) {
switchTab(targetTabId);
}
});
});
// Tab 1 Listeners
if (addFactForm) addFactForm.addEventListener('submit', handleAddFactFormSubmit);
if (clearFormButton) clearFormButton.addEventListener('click', () => addFactForm.reset());
// Tab 2 Listeners
if (applyFiltersButton) applyFiltersButton.addEventListener('click', renderFilteredFacts);
if (clearFiltersButton) clearFiltersButton.addEventListener('click', () => {
filterCivilizationSelect.value = '';
filterCategorySelect.value = '';
filterKeywordInput.value = '';
renderFilteredFacts();
});
// Live update for keyword search as user types
if(filterKeywordInput) filterKeywordInput.addEventListener('input', renderFilteredFacts);
if(filterCivilizationSelect) filterCivilizationSelect.addEventListener('change', renderFilteredFacts);
if(filterCategorySelect) filterCategorySelect.addEventListener('change', renderFilteredFacts);
[displayTitleInput, primaryColorInput, textColorInput, bgColorInput, cardBgColorInput].forEach(input => {
if (input) {
input.addEventListener('input', renderFilteredFacts); // Update preview on change
if (input.type === 'color') input.addEventListener('change', renderFilteredFacts);
}
});
if (downloadPdfButton && !downloadPdfButton.disabled) {
downloadPdfButton.addEventListener('click', handlePdfDownload);
}
// --- Initialisation ---
loadFactsFromLocalStorage();
updateDatalists(); // Populate datalists from any loaded facts
renderCurrentFactsList(); // Show facts on tab 1
switchTab('factManager'); // Set initial tab and styles
// For Tab 2, initial population and rendering will happen when switched to.
// Or call them here if you want tab 2 to be ready in background
populateFilterDropdowns();
renderFilteredFacts();
updateCssVariables(); // Apply initial color settings to UI
});
