Poetry Form Explainer & Template
Select a form from the 'Select & Learn' tab to begin.
${form.description}
Structure: ${form.structure}
Rhyme Scheme: ${form.rhymeScheme}
Syllables: ${form.syllables}
Example:${form.example}
`;
}
function handleUseTemplate() {
const selectedKey = formSelect.value;
const form = poetryForms[selectedKey];
const title = `My ${form.name}`;
poemOutputDiv.innerHTML = form.generateTemplate(title);
downloadBtn.disabled = false;
// II.B.4: Clicking button directs user to next logical tab
workspaceTabBtn.click();
}
async function handleDownloadPDF() {
const originalBtnText = downloadBtn.textContent;
downloadBtn.textContent = "Generating PDF...";
downloadBtn.disabled = true;
// This temporary div will hold a non-editable version for PDF generation.
const printVersion = document.createElement('div');
const titleInput = poemOutputDiv.querySelector('.pfet-poem-title');
const title = titleInput ? titleInput.value : "My Poem";
const titleEl = document.createElement('h3');
titleEl.className = 'poem-title-display';
titleEl.textContent = title;
printVersion.appendChild(titleEl);
const freeVerseTextarea = poemOutputDiv.querySelector('.pfet-free-verse');
if (freeVerseTextarea) {
const lines = freeVerseTextarea.value.split('\n');
lines.forEach(lineText => {
const lineEl = document.createElement('p');
lineEl.className = 'poem-line-display';
lineEl.textContent = lineText || '\u00A0'; // Use non-breaking space for empty lines
printVersion.appendChild(lineEl);
});
} else {
const lineInputs = poemOutputDiv.querySelectorAll('input[data-line]');
lineInputs.forEach(input => {
const lineEl = document.createElement('p');
lineEl.className = 'poem-line-display';
lineEl.textContent = input.value || '\u00A0';
printVersion.appendChild(lineEl);
});
}
// Temporarily replace the interactive template with the static one
const originalContent = poemOutputDiv.innerHTML;
poemOutputDiv.innerHTML = printVersion.innerHTML;
try {
const { jsPDF } = window.jspdf;
container.classList.add("pfet-pdf-export-mode");
const canvas = await html2canvas(container.querySelector("#pfet-poem-output-wrapper"), {
scale: 2,
backgroundColor: "#ffffff",
});
container.classList.remove("pfet-pdf-export-mode");
const imgData = canvas.toDataURL("image/png");
const pdf = new jsPDF({ orientation: "p", unit: "mm", format: "a4" });
const pdfWidth = pdf.internal.pageSize.getWidth();
const margin = 15;
const contentWidth = pdfWidth - margin * 2;
const imgHeight = (canvas.height * contentWidth) / canvas.width;
let heightLeft = imgHeight;
let position = margin;
pdf.addImage(imgData, "PNG", margin, position, contentWidth, imgHeight);
heightLeft -= (pdf.internal.pageSize.getHeight() - margin*2);
while (heightLeft > 0) {
position = -heightLeft - margin;
pdf.addPage();
pdf.addImage(imgData, "PNG", margin, position, contentWidth, imgHeight);
heightLeft -= (pdf.internal.pageSize.getHeight() - margin*2);
}
pdf.save(`${title.replace(/ /g, "_")}.pdf`);
} catch (error) {
console.error("PDF Generation Error:", error);
alert("Sorry, an error occurred while creating the PDF.");
} finally {
// Restore original interactive content and button state
poemOutputDiv.innerHTML = originalContent;
downloadBtn.textContent = originalBtnText;
downloadBtn.disabled = false;
}
}
// --- Initial Setup & Event Listeners ---
populateSelect();
updateExplanation();
// IV.C: Using addEventListener
formSelect.addEventListener('change', updateExplanation);
useTemplateBtn.addEventListener('click', handleUseTemplate);
downloadBtn.addEventListener('click', handleDownloadPDF);
});