feat: implement instant live DOM rendering and debounced auto-save to backend
This commit is contained in:
@@ -21,13 +21,39 @@
|
||||
const { type, payload } = event.data || {};
|
||||
|
||||
if (type === 'THEME_UPDATE') {
|
||||
// Injiziert CSS-Variablen live in den DOM (<head>)
|
||||
const root = document.documentElement;
|
||||
if (payload.colors) {
|
||||
Object.entries(payload.colors).forEach(([key, val]) => {
|
||||
root.style.setProperty(`--${key}`, val);
|
||||
});
|
||||
}
|
||||
|
||||
// Live Section DOM Patching
|
||||
if (payload.sectionId && payload.settings) {
|
||||
const secElement = document.querySelector(`[data-section-id="${payload.sectionId}"], #${payload.sectionId}`) || document.querySelector('section');
|
||||
if (secElement) {
|
||||
const { title, subtitle, cta_text, bg_color, accent_color } = payload.settings;
|
||||
|
||||
if (title !== undefined) {
|
||||
const h1OrH2 = secElement.querySelector('h1, h2, h3');
|
||||
if (h1OrH2) h1OrH2.textContent = title;
|
||||
}
|
||||
if (subtitle !== undefined) {
|
||||
const p = secElement.querySelector('p');
|
||||
if (p) p.textContent = subtitle;
|
||||
}
|
||||
if (cta_text !== undefined) {
|
||||
const btn = secElement.querySelector('a, button');
|
||||
if (btn) btn.textContent = cta_text;
|
||||
}
|
||||
if (bg_color !== undefined && bg_color !== '') {
|
||||
secElement.style.backgroundColor = bg_color;
|
||||
}
|
||||
if (accent_color !== undefined && accent_color !== '') {
|
||||
secElement.style.setProperty('--accent-color', accent_color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (type === 'RELOAD_CANVAS') {
|
||||
|
||||
Reference in New Issue
Block a user