@websline/cms-view-utils 0.2.0 → 0.4.0

package/package.json

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

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/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,23 @@
+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);
+};
+
+export { insertDropZones };

package/src/utils/iframeDragHandler.js

@@ -42,6 +42,7 @@ class IframeDragHandler {
 		this.addMouseFollowerToDOM();
 		this.addMouseFollowerHandler();
 		this.highlightDropzone();
+		this.addDropListeners();
 		window.addEventListener("scroll", this.handleScroll, true);
 	}
 
@@ -50,6 +51,7 @@ class IframeDragHandler {
 		this.removeMouseFollowerFromDOM();
 		this.removeMouseFollowerHandler();
 		this.unhighlightDropzone();
+		this.removeDropListeners();
 		window.removeEventListener("scroll", this.handleScroll, true);
 		this.lastMouseEvent = null;
 	}
@@ -161,8 +163,35 @@ class IframeDragHandler {
 		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(".cms-block-dropzones");
+		const dropzones = document.querySelectorAll("[data-drop-zone]");
 
 		dropzones.forEach((dropzone) => {
 			dropzone.classList.add("highlight");
@@ -170,7 +199,7 @@ class IframeDragHandler {
 	}
 
 	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";