@websline/cms-view-utils 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/cms-view-utils",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "exports": {
     ".": "./src/index.js"

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

@@ -162,7 +162,7 @@ class IframeDragHandler {
 	}
 
 	highlightDropzone() {
-		const dropzones = document.querySelectorAll(".cms-block-dropzones");
+		const dropzones = document.querySelectorAll("[data-drop-zone]");
 
 		dropzones.forEach((dropzone) => {
 			dropzone.classList.add("highlight");
@@ -170,7 +170,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";