57 lines
1.8 KiB
JavaScript
57 lines
1.8 KiB
JavaScript
// public/js/editor-bridge.js
|
||
// Bridge between the editor UI (parent) and the live preview iframe.
|
||
// Listens for messages from the parent and applies updates to the preview.
|
||
|
||
(function () {
|
||
// Store current config state for quick reference
|
||
let siteConfig = {};
|
||
let themeConfig = {};
|
||
|
||
// Helper: apply theme preset CSS variables (assumes theme presets expose a JSON of variables)
|
||
function applyTheme(presetKey) {
|
||
fetch(`/theme/${presetKey}.json`)
|
||
.then((r) => r.json())
|
||
.then((vars) => {
|
||
const root = document.documentElement;
|
||
Object.entries(vars).forEach(([k, v]) => {
|
||
root.style.setProperty(`--${k}`, v);
|
||
});
|
||
})
|
||
.catch(() => console.warn('Theme preset not found:', presetKey));
|
||
}
|
||
|
||
// Helper: re-render the preview by injecting the updated HTML (simple approach).
|
||
function reloadPreview() {
|
||
// For SSR Astro we cannot re‑render inside the iframe without a full reload.
|
||
// Trigger a reload – the parent will send the latest config on load.
|
||
window.location.reload();
|
||
}
|
||
|
||
// Message dispatcher
|
||
window.addEventListener('message', (event) => {
|
||
const { type, payload } = event.data || {};
|
||
switch (type) {
|
||
case 'load':
|
||
siteConfig = payload || {};
|
||
// initial load – could trigger a render hook if needed
|
||
break;
|
||
case 'add':
|
||
// For simplicity we just reload – real implementation would manipulate DOM.
|
||
reloadPreview();
|
||
break;
|
||
case 'preset':
|
||
themeConfig.activePreset = payload;
|
||
applyTheme(payload);
|
||
break;
|
||
case 'update':
|
||
// payload contains partial siteConfig changes
|
||
Object.assign(siteConfig, payload);
|
||
reloadPreview();
|
||
break;
|
||
default:
|
||
// ignore unknown messages
|
||
break;
|
||
}
|
||
});
|
||
})();
|