@websline/cms-view-utils 0.25.0 → 0.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/cms-view-utils",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "type": "module",
   "exports": {
     ".": "./src/index.js"

package/src/components/Block.astro

@@ -2,12 +2,12 @@
 const editToken = Astro.url.searchParams.get("edit_token") || null;
 const isPreviewMode = editToken !== null && editToken !== "";
 
-const { class: classes, style } = Astro.props;
+const { class: classes, style, ...rest } = Astro.props;
 ---
 
 {
 	isPreviewMode ? (
-		<div class={classes} data-edit-block {style}>
+		<div class={classes} data-edit-block {style} {...rest}>
 			<div data-edit-block-menu>
 				<div data-edit-block-item data-edit-block-item-edit>
 					Bearbeiten...

package/src/components/PageRenderer.astro

@@ -6,6 +6,28 @@ const editToken = Astro.url.searchParams.get("edit_token") || null;
 const isPreviewMode = editToken !== null && editToken !== "";
 
 await fetchPageData({ editToken, locals: Astro.locals, locale, slug });
+
+const CMS_URL = import.meta.env.PUBLIC_CMS_URL?.replace(/\/+$/, "");
+
+const styleURL = `${CMS_URL}/api/static/styles/drag-drop-blocks.css`;
+const scriptDragHandlerURL = `${CMS_URL}/api/static/scripts/iframeDragHandler.js`;
+const scriptDragDropUtilsURL = `${CMS_URL}/api/static/scripts/dragDropUtils.js`;
+
+const previewScript = `
+  import IframeDragHandler from "${scriptDragHandlerURL}";
+  import {
+    disableLinks,
+    enableEditBlocks,
+    insertDropZones,
+  } from "${scriptDragDropUtilsURL}";
+
+  new IframeDragHandler();
+  insertDropZones();
+  disableLinks();
+  enableEditBlocks();
+
+  window.CMS_URL = "${CMS_URL}";
+`;
 ---
 
 <slot />
@@ -17,23 +39,9 @@ await fetchPageData({ editToken, locals: Astro.locals, locale, slug });
 				href="https://fonts.googleapis.com/css2?family=Ancizar+Sans:ital,wght@0,100..1000;1,100..1000&display=swap"
 				rel="stylesheet"
 			/>
-			<link
-				rel="stylesheet"
-				href="https://unpkg.com/@websline/cms-view-utils@latest/src/styles/drag-drop-blocks.css"
-			/>
+			<link rel="stylesheet" href={styleURL} />
 		</>
 	)
 }
-{isPreviewMode && <script type="module">
-	import IframeDragHandler from "https://unpkg.com/@websline/cms-view-utils@latest/src/utils/iframeDragHandler.js";
-	import {
-		disableLinks,
-		enableEditBlocks,
-		insertDropZones,
-	} from "https://unpkg.com/@websline/cms-view-utils@latest/src/utils/dragDropUtils.js";
-
-	new IframeDragHandler();
-	insertDropZones();
-	disableLinks();
-	enableEditBlocks();
-</script>}
+
+{isPreviewMode && <script type="module" set:html={previewScript} />}

package/src/data/pageData.js

@@ -1,11 +1,13 @@
 const fetchPageData = async ({ editToken, locals, locale, slug }) => {
-	const API_BASE = import.meta.env.PUBLIC_API_URL?.replace(/\/+$/, ""); // Remove trailing slashes
-	if (!API_BASE) throw new Error("PUBLIC_API_URL ist nicht gesetzt.");
+	const CMS_URL = import.meta.env.PUBLIC_CMS_URL?.replace(/\/+$/, ""); // Remove trailing slashes
+	if (!CMS_URL) throw new Error("PUBLIC_CMS_URL ist nicht gesetzt.");
+
+	const API_URL = CMS_URL + "/api/public";
 
 	const key = `__pageData__${locale}__${slug}`;
 
 	if (!locals[key]) {
-		let url = `${API_BASE}/${locale}/pages/${slug}`;
+		let url = `${API_URL}/${locale}/pages/${slug}`;
 
 		if (editToken) {
 			url += `?edit_token=${editToken}`;

package/src/index.js

@@ -1,4 +1,3 @@
 export { default as Block } from "./components/Block.astro";
 export { default as PageRenderer } from "./components/PageRenderer.astro";
 export * from "./data";
-export * from "./utils";

package/src/styles/drag-drop-blocks.css

@@ -1,64 +0,0 @@
-[data-drop-zone] {
-	height: 0px;
-	margin-left: auto;
-	margin-right: auto;
-	max-width: min(1440px, calc(100% - 48px));
-	transition: all 0.2s ease-in-out;
-	width: 100%;
-}
-[data-drop-zone].highlight {
-	border: 1.5px dashed var(--cms-drop-zone-border, #1168af);
-	height: 60px;
-	margin-top: 24px;
-	margin-bottom: 24px;
-}
-[data-drop-zone].highlight:hover {
-	background-color: var(--cms-drop-zone-background, rgba(17, 104, 175, 0.5));
-}
-
-[data-edit-block] {
-	min-height: 40px;
-	position: relative;
-	user-select: none;
-}
-[data-edit-block-hover] {
-	&:after {
-		background: var(--cms-edit-block-background, #5aaff48c);
-		border-radius: 8px;
-		bottom: 0;
-		content: "";
-		display: block;
-		left: 0;
-		pointer-events: none;
-		position: absolute;
-		right: 0;
-		top: 0;
-		z-index: 1;
-	}
-}
-[data-edit-block-hover] > [data-edit-block-menu] {
-	display: flex;
-}
-[data-edit-block-menu] {
-	background: var(--cms-edit-block-menu-bg, #1168af);
-	border-radius: 4px;
-	display: none;
-	left: 0;
-	overflow: hidden;
-	position: absolute;
-	top: -5px;
-	transform: translate(0, -100%);
-}
-[data-edit-block-item] {
-	color: var(--cms-edit-block-menu-color, #fff);
-	cursor: pointer;
-	font-family: "Ancizar Sans", sans-serif;
-	font-size: 14px;
-	font-weight: 400;
-	padding: 8px;
-
-	&:hover {
-		background: var(--cms-edit-block-menu-bg-hover, #0d5d9e);
-		color: var(--cms-edit-block-menu-color-hover, #fff);
-	}
-}

package/src/utils/dragDropUtils.js

@@ -1,67 +0,0 @@
-const insertDropZones = (blockAreaSelector = "[data-block-area]") => {
-	const blockArea = document.querySelector(blockAreaSelector);
-	if (!blockArea) return;
-
-	const children = Array.from(blockArea.children);
-	let lastIndex = 0;
-
-	children.forEach((child) => {
-		const dropZone = document.createElement("div");
-		dropZone.setAttribute("data-drop-zone", "");
-		dropZone.setAttribute("data-drop-zone-index", lastIndex.toString());
-		blockArea.insertBefore(dropZone, child);
-
-		lastIndex++;
-	});
-
-	const finalDropZone = document.createElement("div");
-	finalDropZone.setAttribute("data-drop-zone", "");
-	finalDropZone.setAttribute("data-drop-zone-index", lastIndex.toString());
-	blockArea.appendChild(finalDropZone);
-};
-
-const disableLinks = () => {
-	const hrefs = document.querySelectorAll("a");
-
-	hrefs.forEach((a) => {
-		a.addEventListener("click", (e) => {
-			alert("Vorschau-Modus: Links sind deaktiviert.");
-			e.preventDefault();
-		});
-	});
-};
-
-const enableEditBlocks = () => {
-	const editBlocks = document.querySelectorAll("[data-edit-block]");
-	let activeBlock = null;
-	let timeoutId;
-
-	editBlocks.forEach((el) => {
-		el.addEventListener("mouseover", () => {
-			if (document.body.classList.contains("cms-editor-is-dragging")) {
-				return;
-			}
-
-			clearTimeout(timeoutId);
-
-			if (activeBlock && activeBlock !== el) {
-				activeBlock.removeAttribute("data-edit-block-hover");
-			}
-
-			activeBlock = el;
-			el.setAttribute("data-edit-block-hover", "");
-		});
-
-		el.addEventListener("mouseout", () => {
-			timeoutId = setTimeout(() => {
-				el.removeAttribute("data-edit-block-hover");
-
-				if (activeBlock === el) {
-					activeBlock = null;
-				}
-			}, 150);
-		});
-	});
-};
-
-export { disableLinks, enableEditBlocks, insertDropZones };

package/src/utils/iframeDragHandler.js

@@ -1,222 +0,0 @@
-// Handler for mouse follower behavior inside the iframe
-class IframeDragHandler {
-	constructor() {
-		this.mouseFollowerWidth = 48;
-		this.mouseFollowerHeight = 48;
-
-		this.handleMouseMove = (event) => {
-			this.lastMouseEvent = event;
-			this.updateMouseFollowerPosition(event);
-			this.checkMouseLeaveFrame();
-		};
-
-		this.handleScroll = () => {
-			if (!this.lastMouseEvent) return;
-			this.updateMouseFollowerPosition(this.lastMouseEvent);
-		};
-
-		window.addEventListener("message", (event) => {
-			const { owner, type } = event.data;
-			if (owner !== "dragging") return;
-
-			if (type === "startDragging") {
-				this.enableDragging();
-			}
-
-			if (type === "stopDragging") {
-				this.disableDragging();
-			}
-
-			if (type === "enterIframeWhileDragging") {
-				this.showMouseFollower();
-			}
-
-			if (type === "leaveIframeWhileDragging") {
-				this.hideMouseFollower();
-			}
-		});
-	}
-
-	enableDragging() {
-		this.addStopDraggingHandler();
-		this.addMouseFollowerToDOM();
-		this.addMouseFollowerHandler();
-		this.highlightDropzone();
-		this.addDropListeners();
-		this.addDraggingClass();
-		window.addEventListener("scroll", this.handleScroll, true);
-	}
-
-	disableDragging() {
-		this.removeStopDraggingHandler();
-		this.removeMouseFollowerFromDOM();
-		this.removeMouseFollowerHandler();
-		this.unhighlightDropzone();
-		this.removeDropListeners();
-		this.removeDraggingClass();
-		window.removeEventListener("scroll", this.handleScroll, true);
-		this.lastMouseEvent = null;
-	}
-
-	addStopDraggingHandler() {
-		window.addEventListener("mouseup", this.stopDragging);
-	}
-
-	removeStopDraggingHandler() {
-		window.removeEventListener("mouseup", this.stopDragging);
-	}
-
-	stopDragging = () => {
-		this.sendParentMessage({
-			owner: "iframe",
-			type: "stopDragging",
-		});
-		this.removeStopDraggingHandler();
-	};
-
-	addMouseFollowerToDOM() {
-		if (this.mouseFollowerInDOM()) return;
-
-		const div = document.createElement("div");
-		div.className = "mouse-follower";
-
-		Object.assign(div.style, {
-			position: "absolute",
-			zIndex: "9999",
-			pointerEvents: "none",
-			left: `-${this.mouseFollowerWidth}px`,
-			top: `-${this.mouseFollowerHeight}px`,
-			width: this.mouseFollowerWidth + "px",
-			height: this.mouseFollowerHeight + "px",
-			background: "url(/drag-component.svg) no-repeat center center",
-		});
-
-		document.body.appendChild(div);
-	}
-
-	addMouseFollowerHandler() {
-		window.addEventListener("mousemove", this.handleMouseMove);
-	}
-
-	removeMouseFollowerHandler() {
-		window.removeEventListener("mousemove", this.handleMouseMove);
-	}
-
-	updateMouseFollowerPosition(event) {
-		const div = this.getMouseFollower();
-		if (div) {
-			div.style.left = `${event.clientX + window.scrollX - this.mouseFollowerWidth / 2}px`;
-			div.style.top = `${event.clientY + window.scrollY - this.mouseFollowerHeight / 2}px`;
-		}
-	}
-
-	checkMouseLeaveFrame() {
-		const follower = this.getMouseFollower();
-		if (!follower) return;
-
-		const rect = follower.getBoundingClientRect();
-		const margin = 1;
-
-		const outOfBounds =
-			rect.left < -margin ||
-			rect.top < -margin ||
-			rect.right > window.innerWidth + margin ||
-			rect.bottom > window.innerHeight + margin;
-
-		if (outOfBounds && !follower.dataset._wasOutside) {
-			follower.dataset._wasOutside = "true";
-			this.hideMouseFollower();
-			this.sendParentMessage({ owner: "iframe", type: "leaveIframe" });
-		} else if (!outOfBounds && follower.dataset._wasOutside === "true") {
-			delete follower.dataset._wasOutside;
-		}
-	}
-
-	hideMouseFollower() {
-		const div = this.getMouseFollower();
-		if (div) {
-			div.style.display = "none";
-		}
-	}
-
-	showMouseFollower() {
-		const div = this.getMouseFollower();
-		if (div) {
-			div.style.display = "block";
-		}
-	}
-
-	removeMouseFollowerFromDOM() {
-		const div = this.getMouseFollower();
-		if (div) {
-			div.remove();
-		}
-	}
-
-	mouseFollowerInDOM() {
-		return !!this.getMouseFollower();
-	}
-
-	getMouseFollower() {
-		return document.querySelector(".mouse-follower");
-	}
-
-	sendParentMessage(message) {
-		window.parent.postMessage(message, "*");
-	}
-
-	addDropListeners() {
-		const dropzones = document.querySelectorAll("[data-drop-zone]");
-
-		dropzones.forEach((dropzone) => {
-			dropzone.addEventListener("mouseup", this.commitDrop);
-		});
-	}
-
-	removeDropListeners() {
-		const dropzones = document.querySelectorAll("[data-drop-zone]");
-
-		dropzones.forEach((dropzone) => {
-			dropzone.removeEventListener("mouseup", this.commitDrop);
-		});
-	}
-
-	commitDrop = (event) => {
-		event.preventDefault();
-		const dropPosition = parseInt(
-			event.target.getAttribute("data-drop-zone-index") || "0"
-		);
-
-		this.sendParentMessage({
-			owner: "iframe",
-			position: dropPosition,
-			type: "commitDrop",
-		});
-	};
-
-	highlightDropzone() {
-		const dropzones = document.querySelectorAll("[data-drop-zone]");
-
-		dropzones.forEach((dropzone) => {
-			dropzone.classList.add("highlight");
-		});
-	}
-
-	unhighlightDropzone() {
-		const dropzones = document.querySelectorAll("[data-drop-zone]");
-
-		dropzones.forEach((dropzone) => {
-			dropzone.classList.remove("highlight");
-		});
-	}
-
-	addDraggingClass() {
-		document.body.classList.add("cms-editor-is-dragging");
-	}
-
-	removeDraggingClass() {
-		document.body.classList.remove("cms-editor-is-dragging");
-	}
-}
-
-export default IframeDragHandler;

package/src/utils/index.js

@@ -1,2 +0,0 @@
-export * from "./iframeDragHandler";
-export * from "./dragDropUtils";