(function(){ try { var p = new URLSearchParams(window.location.search); if (p.get("__dtedit") !== "1") return; var hovered = null; function outline(el, on){ if(!el) return; el.style.outline = on ? "2px solid #0e9f8e" : ""; el.style.outlineOffset = on ? "1px" : ""; } document.addEventListener("mouseover", function(e){ var el = e.target && e.target.closest ? e.target.closest("[data-dtid]") : null; if (el === hovered) return; outline(hovered, false); hovered = el; outline(hovered, true); }, true); document.addEventListener("mouseout", function(){ outline(hovered, false); hovered = null; }, true); document.addEventListener("click", function(e){ var el = e.target && e.target.closest ? e.target.closest("[data-dtid]") : null; if (!el) return; e.preventDefault(); e.stopPropagation(); var label = (el.innerText || "").replace(/\s+/g, " ").trim().slice(0, 60); var src = el.tagName === "IMG" ? (el.getAttribute("src") || "") : ""; if (!src && !label && el.querySelector) { var innerImg = el.querySelector("img"); if (innerImg) { src = innerImg.getAttribute("src") || ""; label = innerImg.getAttribute("alt") || ""; } } window.parent.postMessage({ source: "dt-edit", type: "select", dtid: el.getAttribute("data-dtid"), tag: el.tagName.toLowerCase(), label: label, src: src }, "*"); }, true); // Editor asks "what images are on the page right now?" so it can show // thumbnails for images whose URL is resolved at runtime. function inventory(){ var out = []; var imgs = document.querySelectorAll("img"); for (var i = 0; i < imgs.length; i++) { var im = imgs[i]; var host = im.closest ? im.closest("[data-dtid]") : null; var r = im.getBoundingClientRect(); out.push({ dtid: host ? host.getAttribute("data-dtid") : "", src: im.getAttribute("src") || "", w: Math.round(r.width), h: Math.round(r.height) }); } return out; } // Proactively re-report inventory when images appear or finish loading. // A landing page renders its stock photos from a client component a beat // AFTER the bridge is ready, so a parent that asked for inventory once (on // bridge-ready) would capture an empty set and show no thumbnails. Re-posting // on each img load (and on window load) means the editor always converges on // the real image set. Duplicate inventories are harmless: the parent rebuilds // its list each time. function postInventory(){ try { window.parent.postMessage({ source: "dt-edit", type: "inventory", images: inventory() }, "*"); } catch (e) {} } var _invTimer; function scheduleInventory(){ clearTimeout(_invTimer); _invTimer = setTimeout(postInventory, 150); } // img load/error events do not bubble, so listen in the capture phase. document.addEventListener("load", function(e){ if (e && e.target && e.target.tagName === "IMG") scheduleInventory(); }, true); document.addEventListener("error", function(e){ if (e && e.target && e.target.tagName === "IMG") scheduleInventory(); }, true); if (document.readyState === "complete") scheduleInventory(); else window.addEventListener("load", scheduleInventory); // Live preview: the editor sends pending edits so the page updates on the // spot, before publishing. Colours swap a class (plus an inline style when // the editor sends a resolved hex, because the new class may not exist in // the compiled CSS); text replaces the matching text node (so nested // children are not clobbered); images swap every whose src matches. function byId(dtid){ try { return document.querySelector('[data-dtid="' + dtid + '"]'); } catch (e) { return null; } } window.addEventListener("message", function(ev){ var d = ev.data; if (!d || d.source !== "dt-edit-parent") return; if (d.type === "inventory") { window.parent.postMessage({ source: "dt-edit", type: "inventory", images: inventory() }, "*"); return; } if (d.type !== "apply") return; (d.changes || []).forEach(function(c){ if (c.kind === "image") { var list = []; if (c.matchBy === "dtid" && c.dtid) { // Dynamic images: swap every rendered by that element. var host = byId(c.dtid); if (host) { if (host.tagName === "IMG") list.push(host); else if (host.querySelectorAll) { var inner = host.querySelectorAll("img"); for (var k = 0; k < inner.length; k++) list.push(inner[k]); } } } else { // Literal images: match by current src anywhere on the page (a // gallery renders many from one data array entry). var imgs = document.querySelectorAll("img"); for (var j = 0; j < imgs.length; j++) { var s = imgs[j].getAttribute("src") || ""; if (s === c.from || (c.fromBase && s.split("?")[0] === c.fromBase)) list.push(imgs[j]); } } for (var m = 0; m < list.length; m++) { list[m].removeAttribute("srcset"); list[m].src = c.preview || c.to; } return; } if (c.kind === "focus") { // Set the focal point (object-position) of an object-cover image live. var ftargets = []; if (c.dtid) { var fhb = byId(c.dtid); if (fhb) ftargets.push(fhb.tagName === "IMG" ? fhb : (fhb.querySelector ? fhb.querySelector("img") : null)); } var fall = document.querySelectorAll("img"); for (var fi = 0; fi < fall.length; fi++) { var fs = fall[fi].getAttribute("src") || ""; if (fs === c.from || (c.fromBase && fs.split("?")[0] === c.fromBase)) ftargets.push(fall[fi]); } for (var fti = 0; fti < ftargets.length; fti++) { if (ftargets[fti]) ftargets[fti].style.objectPosition = c.value || ""; } return; } if (c.kind === "hide" || c.kind === "unhide") { // Delete (or restore) a photo live before publishing. Match the // by src (a mapped gallery shares one dtid, so src targets the exact // tile) or by dtid, then hide its closest figure/tile so the layout // reflows, exactly as the published filter will. var targets = []; if (c.dtid) { var hb = byId(c.dtid); if (hb) targets.push(hb.tagName === "IMG" ? hb : (hb.querySelector ? hb.querySelector("img") : null)); } var all = document.querySelectorAll("img"); for (var hi = 0; hi < all.length; hi++) { var hs = all[hi].getAttribute("src") || ""; if (hs === c.from || (c.fromBase && hs.split("?")[0] === c.fromBase)) targets.push(all[hi]); } for (var ti = 0; ti < targets.length; ti++) { var t = targets[ti]; if (!t) continue; var tile = (t.closest && t.closest("figure")) || t; tile.style.display = (c.kind === "hide") ? "none" : ""; } return; } var el = byId(c.dtid); if (!el) return; if (c.kind === "color") { if (c.from) el.classList.remove(c.from); if (c.to) el.classList.add(c.to); if (c.css && c.hex) { try { el.style.setProperty(c.css, c.hex); } catch (e2) {} } } else { var nodes = el.childNodes, hit = false; for (var i = 0; i < nodes.length; i++) { var n = nodes[i]; if (n.nodeType === 3 && n.nodeValue && n.nodeValue.replace(/\s+/g," ").trim() === c.from) { n.nodeValue = c.to; hit = true; break; } } if (!hit && (!el.children || el.children.length === 0)) el.textContent = c.to; } }); }); window.parent.postMessage({ source: "dt-edit", type: "ready" }, "*"); } catch (err) {} })();