@websline/cms-view-utils 0.8.0 → 0.10.0

package/package.json

@@ -1,23 +1,17 @@
 {
   "name": "@websline/cms-view-utils",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "type": "module",
   "exports": {
-    ".": "./dist/index.js"
+    ".": "./src/index.js"
   },
   "files": [
-    "dist"
+    "src"
   ],
   "sideEffects": false,
   "peerDependencies": {
     "astro": "^5.8.0",
-    "svelte": "^5.33.2"
+    "svelte": "^5.33.3"
   },
-  "devDependencies": {
-    "esbuild": "^0.25.4",
-    "csso": "^5.0.5"
-  },
-  "scripts": {
-    "build": "node build.js"
-  }
+  "scripts": {}
 }

package/src/components/Block.astro

@@ -0,0 +1,23 @@
+---
+const isPreviewMode = Astro.url.searchParams.get("editable") === "true";
+
+// ! do not use tailwind classes here
+---
+
+{
+	isPreviewMode ? (
+		<div data-edit-block>
+			<div data-edit-block-menu>
+				<div data-edit-block-item data-edit-block-item-edit>
+					Bearbeiten...
+				</div>
+				<div data-edit-block-item data-edit-block-item-delete>
+					Löschen...
+				</div>
+			</div>
+			<slot />
+		</div>
+	) : (
+		<slot />
+	)
+}

package/src/components/PageRenderer.astro

@@ -0,0 +1,38 @@
+---
+import { fetchPageData } from "../data/pageData";
+
+const { lang, slug } = Astro.params;
+const isPreviewMode = Astro.url.searchParams.get("editable") === "true";
+
+await fetchPageData(Astro.locals, lang, slug);
+---
+
+<slot />
+
+{
+	isPreviewMode && (
+		<>
+			<link
+				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"
+			/>
+		</>
+	)
+}
+{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>}

package/src/data/index.js

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

package/src/data/pageData.js

@@ -0,0 +1,34 @@
+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]) {
+		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."
+		);
+	}
+
+	return locals[key];
+}

package/src/index.js

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,51 @@
+[data-drop-zone] {
+	transition: all 0.2s ease-in-out;
+	height: 0px;
+}
+[data-drop-zone].highlight {
+	border: 1.5px dashed var(--cms-drop-zone-border, #000);
+	height: 60px;
+	margin: 24px 0;
+}
+[data-drop-zone].highlight:hover {
+	background-color: var(--cms-drop-zone-background, rgba(0, 0, 0, 0.5));
+}
+
+[edit-block] {
+	position: relative;
+	user-select: none;
+}
+[data-edit-block-hover] {
+	outline: 1.5px solid var(--cms-edit-block-border, #000);
+}
+[data-edit-block-hover] > [data-edit-block-menu] {
+	display: flex;
+}
+[data-edit-block-menu] {
+	background: var(--cms-edit-block-menu-bg, #000000);
+	border-radius: 4px;
+	display: none;
+	color: inherit;
+	position: absolute;
+	top: 0;
+	left: 16px;
+	overflow: hidden;
+	transform: translate(0, -50%);
+}
+[data-edit-block-item] {
+	color: var(--cms-edit-block-menu-color, #fff);
+	cursor: pointer;
+	font-family: "Ancizar Sans", sans-serif;
+	font-weight: 400;
+	font-size: 14px;
+	padding: 8px 8px 8px 12px;
+
+	&:hover {
+		background: var(--cms-edit-block-menu-bg-hover, #1b1726);
+		color: var(--cms-edit-block-menu-color-hover, #fff);
+	}
+}
+[data-edit-block-item-delete] {
+	padding-left: 8px;
+	padding-right: 12px;
+}

package/src/utils/dragDropUtils.js

@@ -0,0 +1,63 @@
+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, index) => {
+		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", () => {
+			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

@@ -0,0 +1,210 @@
+// 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();
+		window.addEventListener("scroll", this.handleScroll, true);
+	}
+
+	disableDragging() {
+		this.removeStopDraggingHandler();
+		this.removeMouseFollowerFromDOM();
+		this.removeMouseFollowerHandler();
+		this.unhighlightDropzone();
+		this.removeDropListeners();
+		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 = event.target.getAttribute("data-drop-zone-index");
+
+		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");
+		});
+	}
+}
+
+export default IframeDragHandler;

package/src/utils/index.js

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

package/dist/components/PageRenderer.astro

@@ -1,31 +0,0 @@
----
-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 && (
-		<>
-			<link
-				rel="stylesheet"
-				href="https://unpkg.com/@websline/cms-view-utils@latest/dist/styles/dropZone.css"
-			/>
-			<script type="module">
-				import IframeDragHandler from
-				"https://unpkg.com/@websline/cms-view-utils@latest/dist/utils/iframeDragHandler.js";
-				import {insertDropZones} from
-				"https://unpkg.com/@websline/cms-view-utils@latest/dist/utils/dropZoneUtils.js";
-				new IframeDragHandler(); insertDropZones();
-			</script>
-		</>
-	)
-}

package/dist/data/index.js

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

package/dist/data/pageData.js

@@ -1 +0,0 @@
-async function u(e,t,n){const _=import.meta.env.PUBLIC_API_URL?.replace(/\/+$/,"");if(!_)throw new Error("PUBLIC_API_URL ist nicht gesetzt.");const r=`__pageData__${t}__${n}`;if(!e[r]){const o=`${_}/${t}/pages/${n}`,a=await fetch(o);if(!a.ok)throw new Error(`Fehler beim Abrufen der Seite: ${a.status} ${a.statusText}`);e[r]=await a.json()}return e.__currentPageKey=r,e[r]}function f(e){const t=e.__currentPageKey;if(!t||!e[t])throw new Error("getPageData() wurde aufgerufen, bevor fetchPageData() ausgef\xFChrt wurde.");return e[t]}export{u as fetchPageData,f as getPageData};

package/dist/index.js

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

package/dist/styles/dropZone.css

@@ -1 +0,0 @@
-[data-drop-zone]{transition:all .2s ease-in-out;height:0}[data-drop-zone].highlight{border:1.5px dashed var(--cms-drop-zone-border, #00f);height:60px;margin:24px 0}[data-drop-zone].highlight:hover{background-color:var(--cms-drop-zone-background, rgba(0, 0, 255, 0.5))}

package/dist/utils/dropZoneUtils.js

@@ -1 +0,0 @@
-const i=(n="[data-block-area]")=>{const e=document.querySelector(n);if(!e)return;const d=Array.from(e.children);let t=0;d.forEach((a,c)=>{const r=document.createElement("div");r.setAttribute("data-drop-zone",""),r.setAttribute("data-drop-zone-index",t.toString()),e.insertBefore(r,a),t++});const o=document.createElement("div");o.setAttribute("data-drop-zone",""),o.setAttribute("data-drop-zone-index",t.toString()),e.appendChild(o)};export{i as insertDropZones};

package/dist/utils/iframeDragHandler.js

@@ -1 +0,0 @@
-class r{constructor(){this.mouseFollowerWidth=48,this.mouseFollowerHeight=48,this.handleMouseMove=e=>{this.lastMouseEvent=e,this.updateMouseFollowerPosition(e),this.checkMouseLeaveFrame()},this.handleScroll=()=>{this.lastMouseEvent&&this.updateMouseFollowerPosition(this.lastMouseEvent)},window.addEventListener("message",e=>{const{owner:o,type:t}=e.data;o==="dragging"&&(t==="startDragging"&&this.enableDragging(),t==="stopDragging"&&this.disableDragging(),t==="enterIframeWhileDragging"&&this.showMouseFollower(),t==="leaveIframeWhileDragging"&&this.hideMouseFollower())})}enableDragging(){this.addStopDraggingHandler(),this.addMouseFollowerToDOM(),this.addMouseFollowerHandler(),this.highlightDropzone(),this.addDropListeners(),window.addEventListener("scroll",this.handleScroll,!0)}disableDragging(){this.removeStopDraggingHandler(),this.removeMouseFollowerFromDOM(),this.removeMouseFollowerHandler(),this.unhighlightDropzone(),this.removeDropListeners(),window.removeEventListener("scroll",this.handleScroll,!0),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 e=document.createElement("div");e.className="mouse-follower",Object.assign(e.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(e)}addMouseFollowerHandler(){window.addEventListener("mousemove",this.handleMouseMove)}removeMouseFollowerHandler(){window.removeEventListener("mousemove",this.handleMouseMove)}updateMouseFollowerPosition(e){const o=this.getMouseFollower();o&&(o.style.left=`${e.clientX+window.scrollX-this.mouseFollowerWidth/2}px`,o.style.top=`${e.clientY+window.scrollY-this.mouseFollowerHeight/2}px`)}checkMouseLeaveFrame(){const e=this.getMouseFollower();if(!e)return;const o=e.getBoundingClientRect(),t=1,s=o.left<-t||o.top<-t||o.right>window.innerWidth+t||o.bottom>window.innerHeight+t;s&&!e.dataset._wasOutside?(e.dataset._wasOutside="true",this.hideMouseFollower(),this.sendParentMessage({owner:"iframe",type:"leaveIframe"})):!s&&e.dataset._wasOutside==="true"&&delete e.dataset._wasOutside}hideMouseFollower(){const e=this.getMouseFollower();e&&(e.style.display="none")}showMouseFollower(){const e=this.getMouseFollower();e&&(e.style.display="block")}removeMouseFollowerFromDOM(){const e=this.getMouseFollower();e&&e.remove()}mouseFollowerInDOM(){return!!this.getMouseFollower()}getMouseFollower(){return document.querySelector(".mouse-follower")}sendParentMessage(e){window.parent.postMessage(e,"*")}addDropListeners(){document.querySelectorAll("[data-drop-zone]").forEach(o=>{o.addEventListener("mouseup",this.commitDrop)})}removeDropListeners(){document.querySelectorAll("[data-drop-zone]").forEach(o=>{o.removeEventListener("mouseup",this.commitDrop)})}commitDrop=e=>{e.preventDefault();const o=e.target.getAttribute("data-drop-zone-index");this.sendParentMessage({owner:"iframe",position:o,type:"commitDrop"})};highlightDropzone(){document.querySelectorAll("[data-drop-zone]").forEach(o=>{o.classList.add("highlight")})}unhighlightDropzone(){document.querySelectorAll("[data-drop-zone]").forEach(o=>{o.classList.remove("highlight")})}}var n=r;export{n as default};

package/dist/utils/index.js

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