@websline/cms-view-utils 0.3.0 → 0.5.0

package/dist/data/index.js

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

package/dist/data/pageData.js

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

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

package/dist/styles/dropZone.css

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

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

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

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

package/package.json

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

package/src/components/PageRenderer.astro

@@ -14,10 +14,18 @@ await fetchPageData(Astro.locals, lang, slug);
 
 {
 	isPreviewMode && (
-		<script type="module">
-			import IframeDragHandler from
-			"https://unpkg.com/@websline/cms-view-utils@latest/src/utils/iframeDragHandler.js";
-			new IframeDragHandler();
-		</script>
+		<>
+			<link
+				rel="stylesheet"
+				href="https://unpkg.com/@websline/cms-view-utils@0.3.0/src/styles/dropZone.css"
+			/>
+			<script type="module">
+				import IframeDragHandler from
+				"https://unpkg.com/@websline/cms-view-utils@latest/src/utils/iframeDragHandler.js";
+				import {insertDropZones} from
+				"https://unpkg.com/@websline/cms-view-utils@latest/src/utils/dropZoneUtils.js";
+				new IframeDragHandler(); insertDropZones();
+			</script>
+		</>
 	)
 }

package/src/data/index.js

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

package/src/data/pageData.js

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

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

package/src/styles/dropZone.css

@@ -1,12 +0,0 @@
-[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, #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/src/utils/dropZoneUtils.js

@@ -1,16 +0,0 @@
-export function insertDropZones(blockAreaSelector = "[data-block-area]") {
-	const blockArea = document.querySelector(blockAreaSelector);
-	if (!blockArea) return;
-
-	const children = Array.from(blockArea.children);
-
-	children.forEach((child) => {
-		const dropZone = document.createElement("div");
-		dropZone.setAttribute("data-drop-zone", "");
-		blockArea.insertBefore(dropZone, child);
-	});
-
-	const finalDropZone = document.createElement("div");
-	finalDropZone.setAttribute("data-drop-zone", "");
-	blockArea.appendChild(finalDropZone);
-}

package/src/utils/iframeDragHandler.js

@@ -1,181 +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();
-		window.addEventListener("scroll", this.handleScroll, true);
-	}
-
-	disableDragging() {
-		this.removeStopDraggingHandler();
-		this.removeMouseFollowerFromDOM();
-		this.removeMouseFollowerHandler();
-		this.unhighlightDropzone();
-		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, "*");
-	}
-
-	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

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