Infographic Builder
${block.subtitle}
`;
break;
case 'kpi':
blockDiv.innerHTML = `
${block.title}
${block.value}
`;
break;
case 'icon_text':
blockDiv.innerHTML = `
${ICONS[block.icon] || ''}
${block.title}
${block.text}
`;
break;
case 'chart':
const chartId = `chart-${block.id}`;
blockDiv.innerHTML = `
${block.title}
`;
setTimeout(() => renderDonutChart(chartId, block.data), 0);
break;
}
container.appendChild(blockDiv);
});
}
function renderDonutChart(canvasId, dataString) {
const ctx = document.getElementById(canvasId)?.getContext('2d');
if(!ctx) return;
const labels = [];
const data = [];
dataString.split(';').forEach(pair => {
const [label, value] = pair.split(',');
if(label && value) {
labels.push(label.trim());
data.push(parseFloat(value) || 0);
}
});
new Chart(ctx, {
type: 'doughnut',
data: { labels, datasets: [{ data, backgroundColor: ['#4f46e5', '#818cf8', '#a78bfa', '#c4b5fd', '#e0e7ff'] }] },
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom' } } }
});
}
function handleEditorEvents(e) {
const target = e.target; if (!target) return;
const id = parseInt(target.closest('.ig-editor-card')?.dataset.id); if (!id) return;
if (target.classList.contains('remove-block-btn')) {
blocksData = blocksData.filter(b => b.id !== id);
} else if (target.tagName === 'INPUT' || target.tagName === 'SELECT' || target.tagName === 'TEXTAREA') {
const key = target.dataset.key;
const block = blocksData.find(b => b.id === id);
if(block) block[key] = target.value;
}
renderAll();
}
document.getElementById('add-block-btn').addEventListener('click', () => {
const type = document.getElementById('add-block-select').value;
let newBlock = { id: Date.now(), type };
switch(type) {
case 'headline': newBlock = {...newBlock, title: 'Main Headline', subtitle: 'Supporting text goes here'}; break;
case 'kpi': newBlock = {...newBlock, title: 'Key Metric', value: '1,234'}; break;
case 'icon_text': newBlock = {...newBlock, icon: 'user', title: 'Feature Title', text: 'Describe the feature or benefit here.'}; break;
case 'chart': newBlock = {...newBlock, title: 'Data Breakdown', data: 'Category A,50;Category B,30;Category C,20'}; break;
}
blocksData.push(newBlock);
renderAll();
});
document.getElementById('content-editor-container').addEventListener('input', handleEditorEvents);
document.getElementById('content-editor-container').addEventListener('click', handleEditorEvents);
function initialize() {
blocksData = [
{ id: 1, type: 'headline', title: 'Quarterly Business Review', subtitle: 'A summary of our performance in Q2 2025' },
{ id: 2, type: 'kpi', title: 'New Customers Acquired', value: '1,284' },
{ id: 3, type: 'icon_text', icon: 'dollar', title: 'Increased Revenue', text: 'We saw a 15% increase in total revenue compared to the previous quarter.'},
{ id: 4, type: 'chart', title: 'New Customer Source', data: 'Organic Search,45;Paid Ads,30;Referrals,25'}
];
renderAll();
}
initialize();
});
