@websline/cms-view-utils 0.1.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/cms-view-utils",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "type": "module",
   "exports": {
     ".": "./src/index.js"
@@ -11,7 +11,7 @@
   "sideEffects": false,
   "peerDependencies": {
     "astro": "^5.8.0",
-    "svelte": "^5.33.0"
+    "svelte": "^5.33.1"
   },
   "scripts": {}
 }

package/src/components/PageRenderer.astro

@@ -5,24 +5,19 @@ const { lang, slug } = Astro.params;
 const url = new URL(Astro.request.url);
 const searchParams = url.searchParams;
 
-// const isPreviewMode = searchParams.get("editable") === "true";
+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>
-)} -->
+{
+	isPreviewMode && (
+		<script type="module">
+			import IframeDragHandler from
+			"https://unpkg.com/@websline/cms-view-utils@latest/src/utils/iframeDragHandler.js";
+			new IframeDragHandler();
+		</script>
+	)
+}

package/src/data/pageData.js

@@ -5,7 +5,6 @@ export async function fetchPageData(locals, lang, slug) {
 	const key = `__pageData__${lang}__${slug}`;
 
 	if (!locals[key]) {
-		console.log("from fetch");
 		const url = `${API_BASE}/${lang}/pages/${slug}`;
 		const res = await fetch(url);
 
@@ -31,7 +30,5 @@ export function getPageData(locals) {
 		);
 	}
 
-	console.log("from cache");
-
 	return locals[key];
 }

package/src/styles/dropZone.css

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

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

@@ -5,10 +5,16 @@ class IframeDragHandler {
 		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;
@@ -31,33 +37,31 @@ class IframeDragHandler {
 		});
 	}
 
-	// Enables drag mode inside the iframe
 	enableDragging() {
 		this.addStopDraggingHandler();
 		this.addMouseFollowerToDOM();
 		this.addMouseFollowerHandler();
 		this.highlightDropzone();
+		window.addEventListener("scroll", this.handleScroll, true);
 	}
 
-	// Disables drag mode
 	disableDragging() {
 		this.removeStopDraggingHandler();
 		this.removeMouseFollowerFromDOM();
 		this.removeMouseFollowerHandler();
 		this.unhighlightDropzone();
+		window.removeEventListener("scroll", this.handleScroll, true);
+		this.lastMouseEvent = null;
 	}
 
-	// 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",
@@ -66,7 +70,6 @@ class IframeDragHandler {
 		this.removeStopDraggingHandler();
 	};
 
-	// Adds mouse follower element to the DOM
 	addMouseFollowerToDOM() {
 		if (this.mouseFollowerInDOM()) return;
 
@@ -87,26 +90,22 @@ class IframeDragHandler {
 		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`;
+			div.style.left = `${event.clientX + window.scrollX - this.mouseFollowerWidth / 2}px`;
+			div.style.top = `${event.clientY + window.scrollY - this.mouseFollowerHeight / 2}px`;
 		}
 	}
 
-	// Checks if the mouse follower is outside the viewport
 	checkMouseLeaveFrame() {
 		const follower = this.getMouseFollower();
 		if (!follower) return;
@@ -129,7 +128,6 @@ class IframeDragHandler {
 		}
 	}
 
-	// Hides the mouse follower
 	hideMouseFollower() {
 		const div = this.getMouseFollower();
 		if (div) {
@@ -137,7 +135,6 @@ class IframeDragHandler {
 		}
 	}
 
-	// Shows the mouse follower
 	showMouseFollower() {
 		const div = this.getMouseFollower();
 		if (div) {
@@ -145,7 +142,6 @@ class IframeDragHandler {
 		}
 	}
 
-	// Removes the mouse follower from DOM
 	removeMouseFollowerFromDOM() {
 		const div = this.getMouseFollower();
 		if (div) {
@@ -153,33 +149,28 @@ class IframeDragHandler {
 		}
 	}
 
-	// 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");
+		const dropzones = document.querySelectorAll("[data-drop-zone]");
 
 		dropzones.forEach((dropzone) => {
 			dropzone.classList.add("highlight");
 		});
 	}
 
-	// Removes highlight from dropzone
 	unhighlightDropzone() {
-		const dropzones = document.querySelectorAll(".cms-block-dropzones");
+		const dropzones = document.querySelectorAll("[data-drop-zone]");
 
 		dropzones.forEach((dropzone) => {
 			dropzone.classList.remove("highlight");

package/src/utils/index.js

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