@websline/cms-view-utils 0.1.0

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@websline/cms-view-utils",
+  "version": "0.1.0",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "files": [
+    "src"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "astro": "^5.8.0",
+    "svelte": "^5.33.0"
+  },
+  "scripts": {}
+}

package/src/components/PageRenderer.astro

@@ -0,0 +1,28 @@
+---
+import { fetchPageData } from "../data/pageData";
+
+const { lang, slug } = Astro.params;
+const url = new URL(Astro.request.url);
+const searchParams = url.searchParams;
+
+// const isPreviewMode = searchParams.get("editable") === "true";
+
+await fetchPageData(Astro.locals, lang, slug);
+---
+
+<slot />
+
+<!-- 
+{isPreviewMode && (
+
+  <style>
+  	.cms-block-dropzones {
+			padding: 2rem;
+			border: 2px dashed #999;
+			min-height: 50px;
+		}
+		.cms-block-dropzones.highlight {
+			border-color: rgb(106, 106, 255);
+		}
+  </style>
+)} -->

package/src/data/index.js

@@ -0,0 +1 @@
+export * from "./pageData";

package/src/data/pageData.js

@@ -0,0 +1,37 @@
+export async function fetchPageData(locals, lang, 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 key = `__pageData__${lang}__${slug}`;
+
+	if (!locals[key]) {
+		console.log("from fetch");
+		const url = `${API_BASE}/${lang}/pages/${slug}`;
+		const res = await fetch(url);
+
+		if (!res.ok) {
+			throw new Error(
+				`Fehler beim Abrufen der Seite: ${res.status} ${res.statusText}`
+			);
+		}
+
+		locals[key] = await res.json();
+	}
+
+	locals.__currentPageKey = key;
+	return locals[key];
+}
+
+export function getPageData(locals) {
+	const key = locals.__currentPageKey;
+
+	if (!key || !locals[key]) {
+		throw new Error(
+			"getPageData() wurde aufgerufen, bevor fetchPageData() ausgeführt wurde."
+		);
+	}
+
+	console.log("from cache");
+
+	return locals[key];
+}

package/src/index.js

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

package/src/utils/iframeDragHandler.js

@@ -0,0 +1,190 @@
+// Handler for mouse follower behavior inside the iframe
+class IframeDragHandler {
+	constructor() {
+		this.mouseFollowerWidth = 48;
+		this.mouseFollowerHeight = 48;
+
+		this.handleMouseMove = (event) => {
+			this.updateMouseFollowerPosition(event);
+			this.checkMouseLeaveFrame();
+		};
+
+		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();
+			}
+		});
+	}
+
+	// Enables drag mode inside the iframe
+	enableDragging() {
+		this.addStopDraggingHandler();
+		this.addMouseFollowerToDOM();
+		this.addMouseFollowerHandler();
+		this.highlightDropzone();
+	}
+
+	// Disables drag mode
+	disableDragging() {
+		this.removeStopDraggingHandler();
+		this.removeMouseFollowerFromDOM();
+		this.removeMouseFollowerHandler();
+		this.unhighlightDropzone();
+	}
+
+	// Adds a listener for mouseup to stop dragging
+	addStopDraggingHandler() {
+		window.addEventListener("mouseup", this.stopDragging);
+	}
+
+	// Removes the mouseup listener
+	removeStopDraggingHandler() {
+		window.removeEventListener("mouseup", this.stopDragging);
+	}
+
+	// Stops dragging and notifies the parent
+	stopDragging = () => {
+		this.sendParentMessage({
+			owner: "iframe",
+			type: "stopDragging",
+		});
+		this.removeStopDraggingHandler();
+	};
+
+	// Adds mouse follower element to the DOM
+	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);
+	}
+
+	// Adds the mousemove listener
+	addMouseFollowerHandler() {
+		window.addEventListener("mousemove", this.handleMouseMove);
+	}
+
+	// Removes the mousemove listener
+	removeMouseFollowerHandler() {
+		window.removeEventListener("mousemove", this.handleMouseMove);
+	}
+
+	// Updates mouse follower position on mouse move
+	updateMouseFollowerPosition(event) {
+		const div = this.getMouseFollower();
+		if (div) {
+			div.style.left = `${event.clientX - this.mouseFollowerWidth / 2}px`;
+			div.style.top = `${event.clientY - this.mouseFollowerHeight / 2}px`;
+		}
+	}
+
+	// Checks if the mouse follower is outside the viewport
+	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;
+		}
+	}
+
+	// Hides the mouse follower
+	hideMouseFollower() {
+		const div = this.getMouseFollower();
+		if (div) {
+			div.style.display = "none";
+		}
+	}
+
+	// Shows the mouse follower
+	showMouseFollower() {
+		const div = this.getMouseFollower();
+		if (div) {
+			div.style.display = "block";
+		}
+	}
+
+	// Removes the mouse follower from DOM
+	removeMouseFollowerFromDOM() {
+		const div = this.getMouseFollower();
+		if (div) {
+			div.remove();
+		}
+	}
+
+	// Checks whether the follower is in the DOM
+	mouseFollowerInDOM() {
+		return !!this.getMouseFollower();
+	}
+
+	// Gets the follower element
+	getMouseFollower() {
+		return document.querySelector(".mouse-follower");
+	}
+
+	// Sends a message to the parent window
+	sendParentMessage(message) {
+		window.parent.postMessage(message, "*");
+	}
+
+	// Highlights the dropzone
+	highlightDropzone() {
+		const dropzones = document.querySelectorAll(".cms-block-dropzones");
+
+		dropzones.forEach((dropzone) => {
+			dropzone.classList.add("highlight");
+		});
+	}
+
+	// Removes highlight from dropzone
+	unhighlightDropzone() {
+		const dropzones = document.querySelectorAll(".cms-block-dropzones");
+
+		dropzones.forEach((dropzone) => {
+			dropzone.classList.remove("highlight");
+		});
+	}
+}
+
+export default IframeDragHandler;

package/src/utils/index.js

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