@websline/cms-view-utils 0.9.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/cms-view-utils",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "type": "module",
   "exports": {
     ".": "./src/index.js"
@@ -11,6 +11,7 @@
   "sideEffects": false,
   "peerDependencies": {
     "astro": "^5.8.0",
-    "svelte": "^5.33.1"
-  }
+    "svelte": "^5.33.3"
+  },
+  "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

@@ -2,30 +2,37 @@
 import { fetchPageData } from "../data/pageData";
 
 const { lang, slug } = Astro.params;
-const url = new URL(Astro.request.url);
-const searchParams = url.searchParams;
+const isPreviewMode = Astro.url.searchParams.get("editable") === "true";
 
-const isPreviewMode = searchParams.get("editable") === "true";
-
-// await fetchPageData(Astro.locals, lang, slug);
-
-console.log(1);
+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"
-				href="https://unpkg.com/@websline/cms-view-utils@latest/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>
+			<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/index.js

@@ -1,3 +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/index.js

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

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,23 +0,0 @@
-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 };