${fmg_escapeHTML(text)}

`; }; /** * Switches the active tab */ function fmg_switchTab(tabIndex) { if (fmg_currentTab === 1) { fmg_updateDataFromConfig(); } fmg_currentTab = tabIndex; fmg_tabPanes.forEach((pane, index) => { pane.classList.toggle('hidden', index !== tabIndex); pane.classList.toggle('fmg-active', index === tabIndex); }); fmg_tabLinks.forEach((link, index) => { TAB_CLASSES.active.forEach(cls => link.classList.remove(cls)); TAB_CLASSES.inactive.forEach(cls => link.classList.remove(cls)); if (index === tabIndex) { TAB_CLASSES.active.forEach(cls => link.classList.add(cls)); } else { TAB_CLASSES.inactive.forEach(cls => link.classList.add(cls)); } }); if (fmg_prevButton) fmg_prevButton.disabled = (tabIndex === 0); if (fmg_nextButton) fmg_nextButton.disabled = false; if(tabIndex === 0) { fmg_renderDashboard(); } else if (tabIndex === 1) { fmg_renderConfig(); } } // --- CONFIG TAB FUNCTIONS --- function fmg_renderConfig() { if (!fmg_inputConcept) return; fmg_inputConcept.value = fmg_data.concept; fmg_inputQ1.value = fmg_data.q1; fmg_inputQ2.value = fmg_data.q2; fmg_inputQ3.value = fmg_data.q3; fmg_inputQ4.value = fmg_data.q4; } function fmg_updateDataFromConfig() { if (!fmg_inputConcept) return; fmg_data.concept = fmg_inputConcept.value.trim(); fmg_data.q1 = fmg_inputQ1.value.trim(); fmg_data.q2 = fmg_inputQ2.value.trim(); fmg_data.q3 = fmg_inputQ3.value.trim(); fmg_data.q4 = fmg_inputQ4.value.trim(); } // --- DASHBOARD (MODEL GENERATION) FUNCTIONS --- function fmg_generateModelHTML(data) { // Generate the four quadrants const quadrants = [ { id: 1, title: 'Definition', content: fmg_formatContent(data.q1, 'none') }, { id: 2, title: 'Key Characteristics', content: fmg_formatContent(data.q2, 'disc') }, { id: 3, title: 'Examples', content: fmg_formatContent(data.q3, 'disc') }, { id: 4, title: 'Non-Examples', content: fmg_formatContent(data.q4, 'disc') } ]; let html = ''; quadrants.forEach(q => { html += ` `; }); // Add the centered title overlay const conceptTitle = fmg_escapeHTML(data.concept) || '[Concept Required]'; html += ``; return html; } function fmg_renderDashboard(targetDiv = fmg_modelGrid, isPDF = false) { if (!targetDiv) return; targetDiv.innerHTML = fmg_generateModelHTML(fmg_data); } // --- PDF Generation and Management --- function fmg_renderPdfClone() { const modelHTML = fmg_generateModelHTML(fmg_data); fmg_pdfRenderClone.innerHTML = ` `; } /** * Generates and downloads a PDF of the model */ async function fmg_downloadPDF() { if (!fmg_data.concept) { alert("Please enter a central concept before downloading."); return; } if (typeof jspdf === 'undefined' || typeof html2canvas === 'undefined') { alert("Error: PDF libraries failed to load."); return; } fmg_renderPdfClone(); const { jsPDF } = window.jspdf; try { // Target the specific grid clone for capture const contentDiv = fmg_pdfRenderClone.querySelector('.pdf-content'); if (!contentDiv) return; const canvas = await html2canvas(contentDiv, { scale: 1.5, useCORS: true, backgroundColor: '#ffffff' }); const imgData = canvas.toDataURL('image/png'); const imgProps = { width: canvas.width, height: canvas.height }; const pdf = new jsPDF({ orientation: 'p', unit: 'pt', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = pdf.internal.pageSize.getHeight(); const margin = 40; const contentWidth = pdfWidth - (margin * 2); const contentHeight = (contentWidth * imgProps.height) / imgProps.width; let heightLeft = contentHeight; let position = 0; pdf.addImage(imgData, 'PNG', margin, position + margin, contentWidth, contentHeight); heightLeft -= (pdfHeight - margin * 2); while (heightLeft > 0) { position -= (pdfHeight - margin * 2); pdf.addPage(); pdf.addImage(imgData, 'PNG', margin, position + margin, contentWidth, contentHeight); heightLeft -= (pdfHeight - margin * 2); } const safeName = (fmg_data.concept || 'frayer_model').replace(/[^a-z0-9]/gi, '_').toLowerCase(); pdf.save(`${safeName}_Frayer_Model.pdf`); } catch (error) { console.error("PDF generation failed:", error); alert("An error occurred while generating the PDF."); } } // --- EVENT LISTENERS --- // Tab link clicks fmg_tabLinks.forEach((link, index) => { link.addEventListener('click', () => fmg_switchTab(index)); }); // Next/Prev button clicks if (fmg_prevButton) { fmg_prevButton.addEventListener('click', () => { if (fmg_currentTab > 0) fmg_switchTab(fmg_currentTab - 1); }); } if (fmg_nextButton) { fmg_nextButton.addEventListener('click', () => { if (fmg_currentTab === fmg_tabLinks.length - 1) { fmg_updateDataFromConfig(); fmg_switchTab(0); } else { if (fmg_currentTab < fmg_tabLinks.length - 1) fmg_switchTab(fmg_currentTab + 1); } }); } // PDF download if (fmg_downloadPdfButton) { fmg_downloadPdfButton.addEventListener('click', fmg_downloadPDF); } // --- Initialization --- fmg_renderConfig(); fmg_renderDashboard(); // Set initial tab state fmg_tabPanes.forEach((pane, index) => { pane.classList.toggle('hidden', index !== 0); pane.classList.toggle('fmg-active', index === 0); }); fmg_tabLinks.forEach((link, index) => { TAB_CLASSES.active.forEach(cls => link.classList.remove(cls)); TAB_CLASSES.inactive.forEach(cls => link.classList.remove(cls)); if (index === 0) { TAB_CLASSES.active.forEach(cls => link.classList.add(cls)); } else { TAB_CLASSES.inactive.forEach(cls => link.classList.add(cls)); } }); });