No facts added yet. Use the form above to add some!
';
return;
}
const ul = document.createElement('ul');
factsData.forEach(fact => {
const li = document.createElement('li');
const factText = document.createElement('span');
factText.textContent = `${fact.title} (Civilization: ${fact.civilization}, Category: ${fact.category})`;
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.classList.add('acfd-button', 'acfd-button-delete');
deleteButton.addEventListener('click', () => deleteFact(fact.id));
li.appendChild(factText);
li.appendChild(deleteButton);
ul.appendChild(li);
});
currentFactsListDiv.appendChild(ul);
}
function handleAddFactFormSubmit(event) {
event.preventDefault();
const newFact = {
id: generateId(),
civilization: civilizationInput.value.trim(),
title: factTitleInput.value.trim(),
detail: factDetailInput.value.trim(),
category: categoryInput.value.trim(),
timePeriod: timePeriodInput.value.trim(),
source: sourceInput.value.trim()
};
factsData.push(newFact);
saveFactsToLocalStorage();
renderCurrentFactsList();
updateDatalists(); // Update suggestions
addFactForm.reset();
civilizationInput.focus();
}
function deleteFact(factId) {
factsData = factsData.filter(fact => fact.id !== factId);
saveFactsToLocalStorage();
renderCurrentFactsList();
// If on browse tab, refresh filters and view
if (document.getElementById('browseExport').classList.contains('active')) {
populateFilterDropdowns();
renderFilteredFacts();
}
updateDatalists();
}
function updateDatalists() {
const uniqueCivilizations = [...new Set(factsData.map(f => f.civilization))];
const uniqueCategories = [...new Set(factsData.map(f => f.category))];
civilizationSuggestions.innerHTML = uniqueCivilizations.map(c => `
`).join('');
categorySuggestions.innerHTML = uniqueCategories.map(c => `
`).join('');
}
// --- Browse, Customize & Export (Tab 2) ---
function populateFilterDropdowns() {
const uniqueCivilizations = ['', ...new Set(factsData.map(fact => fact.civilization).filter(Boolean))];
const uniqueCategories = ['', ...new Set(factsData.map(fact => fact.category).filter(Boolean))];
filterCivilizationSelect.innerHTML = uniqueCivilizations.map(civ =>
`
`
).join('');
filterCategorySelect.innerHTML = uniqueCategories.map(cat =>
`
`
).join('');
}
function getFilteredFacts() {
const civFilter = filterCivilizationSelect.value;
const catFilter = filterCategorySelect.value;
const keyword = filterKeywordInput.value.toLowerCase();
return factsData.filter(fact => {
const matchCiv = !civFilter || fact.civilization === civFilter;
const matchCat = !catFilter || fact.category === catFilter;
const matchKeyword = !keyword ||
fact.title.toLowerCase().includes(keyword) ||
fact.detail.toLowerCase().includes(keyword);
return matchCiv && matchCat && matchKeyword;
});
}
function renderFilteredFacts() {
updateCssVariables(); // Ensure colors are current
browseFactsViewDiv.innerHTML = '';
const filteredFacts = getFilteredFacts();
if (filteredFacts.length === 0) {
browseFactsViewDiv.innerHTML = '
No facts match your current filters, or no facts have been added yet.
';
return;
}
filteredFacts.forEach(fact => {
const card = document.createElement('div');
card.classList.add('acfd-fact-card');
card.innerHTML = `
${fact.title}
Civilization: ${fact.civilization}
Category: ${fact.category}
${fact.timePeriod ? `
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
});
