`;
// List
html += '
';
events.forEach(event => {
html += `
-
${event.year}
${event.name}
${event.desc}
`;
});
html += '
';
preview.innerHTML = html;
}
function tigLoadExample() {
if(!confirm("Overwrite current events and load example data (History of Internet)?")) return;
// Clear existing
document.getElementById('tig-events-list').innerHTML = '';
document.getElementById('inp-title').value = "Key Milestones in Internet History";
tigAddEvent(1969, "ARPANET Goes Live", "First message sent from UCLA to Stanford.");
tigAddEvent(1983, "TCP/IP Standardized", "Official adoption of the protocol that defines the modern internet.");
tigAddEvent(1991, "World Wide Web Launched", "Tim Berners-Lee publishes the first website and HTML standard.");
tigAddEvent(1994, "Netscape Navigator Released", "First commercially successful web browser, leading to mass adoption.");
tigAddEvent(1998, "Google Incorporated", "Formal start of Google, revolutionizing search.");
tigRenderTimeline();
tigSwitchTab('preview');
}
/* --- PDF Generation --- */
async function tigGeneratePDF() {
tigRenderTimeline(); // Ensure data is current
const title = document.getElementById('inp-title').value || "Timeline Report";
const timelineEl = document.getElementById('tig-timeline-preview');
if (timelineEl.offsetHeight < 100) {
alert("Please add at least one event before generating the PDF.");
return;
}
// Capture the HTML element visually using html2canvas
try {
const canvas = await html2canvas(timelineEl, {
scale: 2, // Capture at higher resolution
useCORS: true,
scrollY: -window.scrollY // Fix scrolling if necessary
});
const imgData = canvas.toDataURL('image/png');
const { jsPDF } = window.jspdf;
const doc = new jsPDF('p', 'mm', 'a4');
const pageWidth = doc.internal.pageSize.getWidth();
const pageHeight = doc.internal.pageSize.getHeight();
const imgProps = doc.getImageProperties(imgData);
// Calculate the ratio of the captured image
const imgRatio = imgProps.height / imgProps.width;
// Define PDF image width (use margins)
const pdfWidth = pageWidth - 20;
let pdfHeight = imgRatio * pdfWidth;
let position = 10;
// If the timeline is too long for one page, we handle splitting
const totalPages = Math.ceil(pdfHeight / (pageHeight - 20));
for(let i = 0; i < totalPages; i++) {
const clipHeight = pageHeight - 20;
const sourceY = i * (imgProps.height / totalPages); // Simple division of source image
if (i > 0) doc.addPage();
// Draw title on first page
if (i === 0) {
doc.setFontSize(16);
doc.setTextColor(44, 62, 80);
doc.text(title, 10, 10);
}
// Draw the clipped image portion (This is a complex approximation for long scrolling visuals)
// For robust single-page capture in a fixed-size environment, we rely on the primary view.
// For simplicity and stability in this constraint, we focus on capturing the top section clearly.
doc.addImage(imgData, 'PNG', 10, position, pdfWidth, pdfHeight, null, null, null, null, null, null, {
x: 0,
y: sourceY,
width: imgProps.width,
height: clipHeight // Simplified clipping
});
}
doc.save(`${title.replace(/\s/g, '_')}_Timeline.pdf`);
} catch (err) {
console.error(err);
alert("Error capturing timeline. Ensure all fields are filled.");
}
}
