@websline/cms-view-utils 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/cms-view-utils",
-  "version": "1.0.3",
+  "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";
@@ -86,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;
@@ -125,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
@@ -151,8 +192,10 @@
 		class:opacity-100={toolbarVisible}
 		class:opacity-0={!toolbarVisible}>
 		<button
-			aria-label="add block"
-			class="cursor-pointer"
+			aria-label={t.addAria}
+			class="relative cursor-pointer"
+			onmouseenter={() => showTooltip("add")}
+			onmouseleave={hideTooltip}
 			onclick={(event) => handleClick(event, CMS_ACTIONS.add)}>
 			<svg
 				width="24"
@@ -167,6 +210,13 @@
 					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}
@@ -244,8 +294,10 @@
 		</button> -->
 
 		<button
-			aria-label="position block"
-			class="cursor-pointer"
+			aria-label={t.positionAria}
+			class="relative cursor-pointer"
+			onmouseenter={() => showTooltip("position")}
+			onmouseleave={hideTooltip}
 			onclick={(event) => handleClick(event, CMS_ACTIONS.position)}>
 			<svg
 				width="24"
@@ -260,11 +312,20 @@
 					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"
+			aria-label={t.deleteAria}
+			class="relative cursor-pointer"
+			onmouseenter={() => showTooltip("delete")}
+			onmouseleave={hideTooltip}
 			onclick={(event) => handleClick(event, CMS_ACTIONS.delete)}>
 			<svg
 				width="24"
@@ -279,11 +340,20 @@
 					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"
+			aria-label={t.editAria}
+			class="relative cursor-pointer"
+			onmouseenter={() => showTooltip("edit")}
+			onmouseleave={hideTooltip}
 			onclick={(event) => handleClick(event, CMS_ACTIONS.edit)}>
 			<svg
 				width="24"
@@ -298,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>
 
@@ -315,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;