(function(){ if (window.parent === window) return; var ORIGIN = window.location.origin; var BRIDGE_VERSION = 7; // Visueller Hover-Hinweis auf editierbare Texte (data-design-field). var hintStyle = document.createElement('style'); hintStyle.setAttribute('data-design-edit-hint', ''); hintStyle.textContent = '[data-design-field]:hover{outline:1px dashed rgba(99,102,241,0.55);outline-offset:2px;cursor:text;}' + '[data-design-field]::after{content:"";}' + '[data-design-editing="1"]:hover{outline:none;}'; document.head.appendChild(hintStyle); console.log('[design] bridge v' + BRIDGE_VERSION + ' loaded · ' + ORIGIN); // Properties, deren computedStyles wir an den Editor schicken — passend // zu den Controls in der Sidebar. var TRACKED = [ 'margin-top','margin-right','margin-bottom','margin-left', 'padding-top','padding-right','padding-bottom','padding-left', 'font-family','font-size','font-weight','line-height','letter-spacing', 'text-align','color', 'background-color','background-image', 'border-top-width','border-right-width','border-bottom-width','border-left-width', 'border-style','border-color','border-radius', 'display','flex-direction','justify-content','align-items','gap','flex-wrap', 'width','min-width','max-width','height','min-height','max-height', 'opacity' ]; function makeOverlay(){ var d = document.createElement('div'); d.style.position = 'fixed'; d.style.pointerEvents = 'none'; d.style.zIndex = '2147483646'; d.style.transition = 'top 80ms ease, left 80ms ease, width 80ms ease, height 80ms ease'; d.style.borderRadius = '4px'; d.style.boxSizing = 'border-box'; d.style.display = 'none'; return d; } var hoverBox = makeOverlay(); hoverBox.style.border = '2px dashed rgba(99,102,241,0.55)'; hoverBox.style.background = 'rgba(99,102,241,0.03)'; document.body.appendChild(hoverBox); var selectBox = makeOverlay(); selectBox.style.border = '2px solid #6366f1'; selectBox.style.background = 'rgba(99,102,241,0.05)'; document.body.appendChild(selectBox); var label = document.createElement('div'); label.style.position = 'fixed'; label.style.zIndex = '2147483647'; label.style.background = '#6366f1'; label.style.color = '#fff'; label.style.fontSize = '11px'; label.style.fontWeight = '600'; label.style.padding = '3px 8px'; label.style.borderRadius = '4px'; label.style.fontFamily = 'system-ui,sans-serif'; label.style.pointerEvents = 'none'; label.style.display = 'none'; document.body.appendChild(label); var hoverEl = null; var selectedEl = null; function isUiOverlay(el){ return el === hoverBox || el === selectBox || el === label; } function place(box, el){ var r = el.getBoundingClientRect(); box.style.top = r.top + 'px'; box.style.left = r.left + 'px'; box.style.width = r.width + 'px'; box.style.height = r.height + 'px'; box.style.display = 'block'; } function placeLabel(el, text){ var r = el.getBoundingClientRect(); label.textContent = text; label.style.top = Math.max(4, r.top - 22) + 'px'; label.style.left = r.left + 'px'; label.style.display = 'block'; } // CSS.escape Polyfill-light function cssEscape(s){ return String(s).replace(/(["\\\]\[#.:>+~*=^$|()])/g, '\\$1'); } // Selector-Pfad ab Sektion-Wrapper bauen. function selectorOf(el){ var section = el.closest('[data-section-index]'); if (!section) return null; var rootSel = '[data-section-index="' + cssEscape(section.getAttribute('data-section-index')) + '"]'; if (el === section) return rootSel; var segs = []; var cur = el; var safety = 0; while (cur && cur !== section && safety++ < 30) { var parent = cur.parentElement; if (!parent) break; var idx = Array.prototype.indexOf.call(parent.children, cur) + 1; var tag = cur.tagName ? cur.tagName.toLowerCase() : '*'; // tagged nth-child für stabilere Selectors segs.unshift(tag + ':nth-child(' + idx + ')'); cur = parent; } return rootSel + ' > ' + segs.join(' > '); } function gatherStyles(el){ var cs = window.getComputedStyle(el); var out = {}; for (var i = 0; i < TRACKED.length; i++) { out[TRACKED[i]] = cs.getPropertyValue(TRACKED[i]); } return out; } function describeElement(el){ var section = el.closest('[data-section-index]'); return { selector: selectorOf(el), tagName: el.tagName ? el.tagName.toLowerCase() : '', classList: Array.prototype.slice.call(el.classList || []), sectionIndex: section ? section.getAttribute('data-section-index') : null, sectionType: section ? (section.getAttribute('data-section-type') || '') : '', isSectionRoot: section === el, computedStyles: gatherStyles(el), text: (el.textContent || '').trim().slice(0, 60), }; } // Inline-Text-Editing: Elemente mit data-design-field werden bei Doppel- // Klick editierbar. Beim Blur landet der neue Text als Edit beim Parent. function fieldOf(el){ var cur = el; var safety = 0; while (cur && safety++ < 30) { if (cur.getAttribute && cur.getAttribute('data-design-field')) { return { node: cur, field: cur.getAttribute('data-design-field') }; } cur = cur.parentElement; } return null; } function htmlBodyOf(el){ // Für displayAs="quote" / displayAs="section" mit dangerouslySetInnerHTML // ist der Inhalt schon HTML — wir geben innerHTML zurück. Sonst (h1, p // etc. mit reinem Textinhalt) reicht textContent. var hasBlock = el.querySelector && el.querySelector('p,div,h1,h2,h3,h4,strong,em,br,ul,ol,li'); return hasBlock ? el.innerHTML : (el.textContent || '').trim(); } function makeEditable(node, field){ if (!node || node.getAttribute('data-design-editing') === '1') return; node.setAttribute('data-design-editing', '1'); node.setAttribute('contenteditable', 'true'); node.style.outline = '2px solid #6366f1'; node.style.outlineOffset = '2px'; node.style.cursor = 'text'; var original = htmlBodyOf(node); function finish(){ node.removeAttribute('contenteditable'); node.removeAttribute('data-design-editing'); node.style.outline = ''; node.style.outlineOffset = ''; node.style.cursor = ''; node.removeEventListener('blur', onBlur); node.removeEventListener('keydown', onKey); var next = htmlBodyOf(node); if (next === original) return; var sectionEl = node.closest('[data-section-index]'); var sectionIndex = sectionEl ? sectionEl.getAttribute('data-section-index') : null; window.parent.postMessage({ type: 'design:textEdit', field: field, value: next, sectionIndex: sectionIndex, }, ORIGIN); } function onBlur(){ finish(); } function onKey(ev){ if (ev.key === 'Escape') { node.innerHTML = original; node.blur(); } else if (ev.key === 'Enter' && !ev.shiftKey) { // Enter beendet die Bearbeitung bei Single-Line-Elementen. var isSingleLine = !/^DIV$/i.test(node.tagName) && node.children.length === 0; if (isSingleLine) { ev.preventDefault(); node.blur(); } } } node.addEventListener('blur', onBlur); node.addEventListener('keydown', onKey); node.focus(); // Cursor ans Ende setzen. try { var sel = window.getSelection(); var range = document.createRange(); range.selectNodeContents(node); range.collapse(false); sel.removeAllRanges(); sel.addRange(range); } catch(_){} } // Globaler Click-Handler statt per-Sektion: erlaubt Element-Auswahl // beliebiger Tiefe. Wir kapseln in capture-Phase, damit native Links // im iframe nicht navigieren. document.addEventListener('click', function(ev){ var t = ev.target; if (!t || isUiOverlay(t)) return; // Ist das Element gerade im Edit-Modus? Klick durchlassen, damit der // User den Cursor positionieren kann. if (t.closest && t.closest('[data-design-editing="1"]')) return; var section = t.closest && t.closest('[data-section-index]'); if (!section) return; ev.preventDefault(); ev.stopPropagation(); selectedEl = t; var info = describeElement(t); if (!info.selector) return; place(selectBox, t); placeLabel(t, (info.tagName || 'el') + (info.classList[0] ? '.' + info.classList[0] : '')); hoverBox.style.display = 'none'; window.parent.postMessage({ type: 'design:selectElement', element: info }, ORIGIN); }, true); // Doppel-Klick auf Element mit data-design-field aktiviert Inline-Edit. document.addEventListener('dblclick', function(ev){ var t = ev.target; if (!t || isUiOverlay(t)) return; var f = fieldOf(t); if (!f) return; ev.preventDefault(); ev.stopPropagation(); // Auswahl-Overlay abschalten während Bearbeitung selectBox.style.display = 'none'; label.style.display = 'none'; makeEditable(f.node, f.field); }, true); document.addEventListener('mouseover', function(ev){ var t = ev.target; if (!t || isUiOverlay(t)) return; var section = t.closest && t.closest('[data-section-index]'); if (!section) { hoverBox.style.display = 'none'; hoverEl = null; return; } if (selectedEl && t === selectedEl) { hoverBox.style.display = 'none'; return; } hoverEl = t; place(hoverBox, t); }, true); document.addEventListener('mouseout', function(){ if (!hoverEl) return; hoverBox.style.display = 'none'; hoverEl = null; }, true); // ESC hebt Auswahl auf document.addEventListener('keydown', function(ev){ if (ev.key === 'Escape') { selectedEl = null; selectBox.style.display = 'none'; label.style.display = 'none'; window.parent.postMessage({ type: 'design:clearSelection' }, ORIGIN); } }); function refresh(){ if (selectedEl && document.contains(selectedEl)) place(selectBox, selectedEl); else { selectBox.style.display = 'none'; label.style.display = 'none'; selectedEl = null; } if (hoverEl && document.contains(hoverEl)) place(hoverBox, hoverEl); } window.addEventListener('scroll', refresh, { passive: true }); window.addEventListener('resize', refresh); // Setzt ein Branding-Bild live im DOM. Slot identifiziert die markierten // Elemente (data-brand-image="..."). "heroImage" ist Hintergrund-CSS auf der // Hero-Section, andere Slots ersetzen img.src bzw. nehmen das Bild raus. function applyBrandImage(slot, url){ if (!slot || typeof slot !== 'string') return; if (url && typeof url === 'string') { // Nur relative Pfade und https-URLs akzeptieren (kein javascript: o. Ä.). if (!(url.charAt(0) === '/' || /^https?:\/\//.test(url))) return; } var nodes = document.querySelectorAll('[data-brand-image="' + slot + '"]'); for (var i = 0; i < nodes.length; i++) { var n = nodes[i]; if (slot === 'heroImage') { // Hintergrundbild auf der Hero-Section n.style.backgroundImage = url ? 'url("' + url + '")' : ''; } else if (n.tagName === 'IMG') { if (url) { n.setAttribute('src', url); n.style.display = ''; } else { n.removeAttribute('src'); n.style.display = 'none'; } } } } // Live-Updates vom Parent function applyCssVars(vars){ var root = document.documentElement; Object.keys(vars || {}).forEach(function(k){ if (/^[\w-]+$/.test(k)) { var val = String(vars[k]); if (!/[;{}<>]/.test(val)) { root.style.setProperty(k.startsWith('--') ? k : '--' + k, val); } } }); } // CustomStyles werden in den vom Server gerenderten -Verbot). var ccRaw = typeof msg.css === 'string' ? msg.css : ''; if (ccRaw.length > 50000 || /<\/style/i.test(ccRaw)) ccRaw = ''; ccNode.textContent = ccRaw; // Overlay nachziehen, falls Layout sich verschiebt. requestAnimationFrame(refresh); setTimeout(refresh, 80); break; case 'design:setCustomStyles': applyCustomStyles(msg.customStyles); // Layout setzt sich erst nach dem CSS-Apply neu — Overlay-Positionen // mehrfach nachziehen, damit das selectBox auch bei großen Margin- // Sprüngen wieder zum richtigen Element rückt. requestAnimationFrame(refresh); setTimeout(refresh, 80); setTimeout(refresh, 200); break; case 'design:swapSections': swapSections(msg.a, msg.b); // Auswahl aufheben — selector zeigt evtl. auf falsches Element selectedEl = null; selectBox.style.display = 'none'; label.style.display = 'none'; setTimeout(refresh, 30); break; case 'design:removeSection': removeSectionDom(msg.index); selectedEl = null; selectBox.style.display = 'none'; label.style.display = 'none'; setTimeout(refresh, 30); break; case 'design:setHeaderPosition': setHeaderPosition(msg.position); setTimeout(refresh, 30); break; case 'design:setHeaderVariant': setHeaderVariant(msg.variant); break; case 'design:setFx': setFxFor(msg.selector, msg.fx); break; case 'design:selectBySelector': var el = null; try { el = document.querySelector(msg.selector); } catch(_){} if (el) { selectedEl = el; place(selectBox, el); placeLabel(el, (el.tagName || 'el').toLowerCase()); el.scrollIntoView({ behavior: 'smooth', block: 'center' }); // Parent informieren, damit headerSelected/footerSelected etc. // im Editor anziehen und das passende Options-Panel aufgeht. window.parent.postMessage({ type: 'design:selectElement', element: describeElement(el), }, ORIGIN); } break; case 'design:clearSelection': selectedEl = null; selectBox.style.display = 'none'; label.style.display = 'none'; break; } }); // Bridge bereit window.parent.postMessage({ type: 'design:ready' }, ORIGIN); })();

Aktuelles