66 lines
2.7 KiB
JavaScript
66 lines
2.7 KiB
JavaScript
// public/js/editor-bridge.js
|
|
(function () {
|
|
// Bridge nur im Preview-Modus aktivieren
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
if (urlParams.get('preview') !== 'draft') return;
|
|
|
|
console.log('[N&D Editor Bridge] Active on preview canvas');
|
|
|
|
// Optischer Hinweis-Banner im Bearbeitungsmodus
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const banner = document.createElement('div');
|
|
banner.id = 'editor-preview-banner';
|
|
banner.style.cssText = 'position: fixed; top: 0; left: 0; right: 0; z-index: 99999; background: #d97706; color: #0f172a; text-align: center; padding: 6px 12px; font-size: 12px; font-weight: 700; font-family: monospace; letter-spacing: 0.5px; box-shadow: 0 2px 10px rgba(0,0,0,0.3); pointer-events: none; opacity: 0.95;';
|
|
banner.innerHTML = '🛠️ BEARBEITUNGSMODUS (VORSCHAU / ENTWURF) — Änderungen sind noch nicht live!';
|
|
document.body.appendChild(banner);
|
|
const currentPadding = parseInt(document.body.style.paddingTop || '0', 10);
|
|
document.body.style.paddingTop = (currentPadding + 30) + 'px';
|
|
});
|
|
|
|
window.addEventListener('message', (event) => {
|
|
const { type, payload } = event.data || {};
|
|
|
|
if (type === 'THEME_UPDATE') {
|
|
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') {
|
|
// Sanfter Reload des Iframes bei Strukturänderungen
|
|
window.location.reload();
|
|
}
|
|
});
|
|
})();
|
|
|