@websline/cms-view-utils 1.0.2 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/cms-view-utils",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "type": "module",
   "files": [
     "src",

package/src/components/EditableBlock.svelte

@@ -13,13 +13,13 @@
 		children,
 		color = "#000fff",
 		isValidBlock = true,
+		locale = "de",
 		position,
 		textColor = "#F1F1F2",
 	} = $props();
 
 	let calcBarPosition = $derived.by(() => {
 		if (typeof barPosition === "string") return barPosition;
-
 		if (position === 0) return "inside";
 
 		return "outside";
@@ -40,7 +40,9 @@
 		return debounced;
 	};
 
-	const handleClick = (action) => {
+	const handleClick = (event, action) => {
+		event.stopPropagation();
+
 		switch (action) {
 			case CMS_ACTIONS.add:
 				notifyCMS(EVENTS.BLOCK_ADD, { position });
@@ -84,6 +86,20 @@
 
 	let toolbarVisible = $derived(isHovered || isActive);
 
+	let activeTooltip = $state(null);
+	let tooltipLeaveTimer;
+
+	const showTooltip = (name) => {
+		clearTimeout(tooltipLeaveTimer);
+		activeTooltip = name;
+	};
+
+	const hideTooltip = () => {
+		tooltipLeaveTimer = setTimeout(() => {
+			activeTooltip = null;
+		}, 200);
+	};
+
 	const handleLeave = () => {
 		handleEnterDebounced.cancel();
 		isHovered = false;
@@ -123,6 +139,33 @@
 			: "before:top-0 before:-left-4 before:shadow-[6px_-6px_0_0_var(--block-color)] " +
 					"after:top-0 after:-right-4 after:shadow-[-6px_-6px_0_0_var(--block-color)]",
 	);
+
+	let tooltipClasses = `tooltip absolute -top-9 bg-[var(--block-color)] leading-none text-xs p-1.5 rounded-tl rounded-tr left-0 whitespace-nowrap transition-opacity duration-150`;
+
+	const labels = {
+		de: {
+			add: "Hinzufügen",
+			position: "Anordnen",
+			delete: "Löschen",
+			edit: "Bearbeiten",
+			addAria: "Block hinzufügen",
+			positionAria: "Block anordnen",
+			deleteAria: "Block löschen",
+			editAria: "Block bearbeiten",
+		},
+		en: {
+			add: "Add",
+			position: "Arrange",
+			delete: "Delete",
+			edit: "Edit",
+			addAria: "Add block",
+			positionAria: "Arrange block",
+			deleteAria: "Delete block",
+			editAria: "Edit block",
+		},
+	};
+
+	let t = $derived(labels[locale] ?? labels.de);
 </script>
 
 <div
@@ -132,23 +175,28 @@
 	data-cms-editable-block
 	onmouseenter={handleEnterDebounced}
 	onmouseleave={handleLeave}
-	role="group">
+	onclick={(event) => handleClick(event, CMS_ACTIONS.edit)}
+	onkeydown={(event) => event.key === "Enter" && handleClick(event, CMS_ACTIONS.edit)}
+	role="button"
+	tabindex="0">
 	<div
-		class="pointer-events-none absolute inset-0 z-[9998] border-6 transition-opacity duration-100"
+		class="pointer-events-none absolute inset-0 z-9998 border-6 transition-opacity duration-100"
 		style="border-color: var(--block-color)"
 		class:opacity-100={toolbarVisible}
 		class:opacity-0={!toolbarVisible}>
 	</div>
 
 	<div
-		class="absolute left-1/2 z-[9999] flex h-9 -translate-x-1/2 items-center justify-center gap-1.5 px-3 transition-opacity duration-100 before:absolute before:h-4 before:w-4 before:rounded-full before:bg-transparent before:content-[''] after:absolute after:h-4 after:w-4 after:rounded-full after:bg-transparent after:content-[''] {containerShape} {cornerEdges}"
+		class="absolute left-1/2 z-9999 flex h-9 -translate-x-1/2 items-center justify-center gap-1.5 px-3 transition-opacity duration-100 before:absolute before:h-4 before:w-4 before:rounded-full before:bg-transparent before:content-[''] after:absolute after:h-4 after:w-4 after:rounded-full after:bg-transparent after:content-[''] {containerShape} {cornerEdges}"
 		style="background: var(--block-color); color: var(--block-text);"
 		class:opacity-100={toolbarVisible}
 		class:opacity-0={!toolbarVisible}>
 		<button
-			aria-label="add block"
-			class="cursor-pointer"
-			onclick={() => handleClick(CMS_ACTIONS.add)}>
+			aria-label={t.addAria}
+			class="relative cursor-pointer"
+			onmouseenter={() => showTooltip("add")}
+			onmouseleave={hideTooltip}
+			onclick={(event) => handleClick(event, CMS_ACTIONS.add)}>
 			<svg
 				width="24"
 				height="24"
@@ -162,13 +210,20 @@
 					stroke-linecap="round"
 					stroke-linejoin="round" />
 			</svg>
+			<div
+				class={tooltipClasses}
+				class:opacity-0={activeTooltip !== "add"}
+				class:opacity-100={activeTooltip === "add"}
+				class:pointer-events-none={activeTooltip !== "add"}>
+				{t.add}
+			</div>
 		</button>
 
 		<!-- {#if blockVisible}
 			<button
 				aria-label="hide block"
 				class="cursor-pointer"
-				onclick={() => handleClick(CMS_ACTIONS.hideBlock)}>
+				onclick={(event) => handleClick(event, CMS_ACTIONS.hideBlock)}>
 				<svg
 					width="24"
 					height="24"
@@ -193,7 +248,7 @@
 			<button
 				aria-label="show block"
 				class="cursor-pointer"
-				onclick={() => handleClick(CMS_ACTIONS.showBlock)}>
+				onclick={(event) => handleClick(event, CMS_ACTIONS.showBlock)}>
 				<svg
 					width="24"
 					height="24"
@@ -222,7 +277,7 @@
 		<!-- <button
 			aria-label="copy block"
 			class="cursor-pointer"
-			onclick={() => handleClick(CMS_ACTIONS.copy)}>
+			onclick={(event) => handleClick(event, CMS_ACTIONS.copy)}>
 			<svg
 				width="24"
 				height="24"
@@ -239,9 +294,11 @@
 		</button> -->
 
 		<button
-			aria-label="position block"
-			class="cursor-pointer"
-			onclick={() => handleClick(CMS_ACTIONS.position)}>
+			aria-label={t.positionAria}
+			class="relative cursor-pointer"
+			onmouseenter={() => showTooltip("position")}
+			onmouseleave={hideTooltip}
+			onclick={(event) => handleClick(event, CMS_ACTIONS.position)}>
 			<svg
 				width="24"
 				height="24"
@@ -255,12 +312,21 @@
 					stroke-linecap="round"
 					stroke-linejoin="round" />
 			</svg>
+			<div
+				class={tooltipClasses}
+				class:opacity-0={activeTooltip !== "position"}
+				class:opacity-100={activeTooltip === "position"}
+				class:pointer-events-none={activeTooltip !== "position"}>
+				{t.position}
+			</div>
 		</button>
 
 		<button
-			aria-label="delete block"
-			class="cursor-pointer"
-			onclick={() => handleClick(CMS_ACTIONS.delete)}>
+			aria-label={t.deleteAria}
+			class="relative cursor-pointer"
+			onmouseenter={() => showTooltip("delete")}
+			onmouseleave={hideTooltip}
+			onclick={(event) => handleClick(event, CMS_ACTIONS.delete)}>
 			<svg
 				width="24"
 				height="24"
@@ -274,12 +340,21 @@
 					stroke-linecap="round"
 					stroke-linejoin="round" />
 			</svg>
+			<div
+				class={tooltipClasses}
+				class:opacity-0={activeTooltip !== "delete"}
+				class:opacity-100={activeTooltip === "delete"}
+				class:pointer-events-none={activeTooltip !== "delete"}>
+				{t.delete}
+			</div>
 		</button>
 
 		<button
-			aria-label="edit block"
-			class="cursor-pointer"
-			onclick={() => handleClick(CMS_ACTIONS.edit)}>
+			aria-label={t.editAria}
+			class="relative cursor-pointer"
+			onmouseenter={() => showTooltip("edit")}
+			onmouseleave={hideTooltip}
+			onclick={(event) => handleClick(event, CMS_ACTIONS.edit)}>
 			<svg
 				width="24"
 				height="24"
@@ -293,6 +368,13 @@
 					stroke-linecap="round"
 					stroke-linejoin="round" />
 			</svg>
+			<div
+				class={tooltipClasses}
+				class:opacity-0={activeTooltip !== "edit"}
+				class:opacity-100={activeTooltip === "edit"}
+				class:pointer-events-none={activeTooltip !== "edit"}>
+				{t.edit}
+			</div>
 		</button>
 	</div>
 
@@ -310,3 +392,14 @@
 		{/if}
 	</div>
 </div>
+
+<style>
+	.tooltip::after {
+		content: "";
+		bottom: -8px;
+		height: 8px;
+		left: 0;
+		position: absolute;
+		right: 0;
+	}
+</style>

package/src/utils/fetchPage.js

@@ -43,6 +43,7 @@ const fetchPage = async (context) => {
 
 	if (isCMSPreviewRoute) {
 		context.locals._preview = true;
+		context.locals._cmsLocale = url.searchParams.get("cmsLocale");
 	}
 	if (isCMSEditRoute) {
 		context.locals._edit = true;