@websline/cms-view-utils 1.6.0 → 1.7.1

package/dist/previewBridge.global.js

@@ -1 +1 @@
-(()=>{var r={BLOCK_ADD:"BLOCK_ADD",BLOCK_DELETE:"BLOCK_DELETE",BLOCK_EDIT:"BLOCK_EDIT",BLOCK_POSITION:"BLOCK_POSITION",BLOCK_SHOW:"BLOCK_SHOW",BLOCK_HIDE:"BLOCK_HIDE",PATH_CHANGED:"PATH_CHANGED",PATH_ON_LOAD:"PATH_ON_LOAD",IFRAME_DOM_LOADED:"IFRAME_DOM_LOADED",CURRENT_BLOCK_EDIT:"CURRENT_BLOCK_EDIT",SCROLL_TO_BLOCK:"SCROLL_TO_BLOCK"},_=(i,a={})=>{i&&window.parent!==window&&window.parent.postMessage({type:i,payload:a},"*")};(function(){if(window.parent===window||window.__PREVIEW_BRIDGE_INITIALIZED__)return;window.__PREVIEW_BRIDGE_INITIALIZED__=!0;let i=t=>t.metaKey||t.ctrlKey||t.shiftKey,a=t=>{let n=t.target.closest("a[href]");if(!n||n.target==="_blank"||i(t))return;let o=new URL(n.href,window.location.origin);o.origin===window.location.origin&&(t.preventDefault(),t.stopPropagation(),_(r.PATH_CHANGED,{path:o.pathname}))};document.addEventListener("click",a,!0),_(r.PATH_ON_LOAD,{path:window.location.pathname}),window.addEventListener("load",()=>{_(r.IFRAME_DOM_LOADED)});let L=t=>{let n=`[data-cms-block-id="${t}"]`,o=0,e=10,O=setInterval(()=>{let E=document.querySelector(n);E&&(E.scrollIntoView({behavior:"smooth",block:"start"}),clearInterval(O)),++o>=e&&clearInterval(O)},100)};window.addEventListener("message",t=>{let{type:n,payload:o}=t.data||{};if(n&&n===r.SCROLL_TO_BLOCK){let{draftBlockUuid:e}=o||{};if(!e)return;L(e)}})})();})();
+(()=>{var r={BLOCK_ADD:"BLOCK_ADD",BLOCK_COMMENT:"BLOCK_COMMENT",BLOCK_DELETE:"BLOCK_DELETE",BLOCK_EDIT:"BLOCK_EDIT",BLOCK_POSITION:"BLOCK_POSITION",BLOCK_SHOW:"BLOCK_SHOW",BLOCK_HIDE:"BLOCK_HIDE",PATH_CHANGED:"PATH_CHANGED",PATH_ON_LOAD:"PATH_ON_LOAD",IFRAME_DOM_LOADED:"IFRAME_DOM_LOADED",COMMENT_COUNTS:"COMMENT_COUNTS",CURRENT_BLOCK_EDIT:"CURRENT_BLOCK_EDIT",SCROLL_TO_BLOCK:"SCROLL_TO_BLOCK"},_=(i,O={})=>{i&&window.parent!==window&&window.parent.postMessage({type:i,payload:O},"*")};(function(){if(window.parent===window||window.__PREVIEW_BRIDGE_INITIALIZED__)return;window.__PREVIEW_BRIDGE_INITIALIZED__=!0;let i=t=>t.metaKey||t.ctrlKey||t.shiftKey,O=t=>{let n=t.target.closest("a[href]");if(!n||n.target==="_blank"||i(t))return;let o=new URL(n.href,window.location.origin);o.origin===window.location.origin&&(t.preventDefault(),t.stopPropagation(),_(r.PATH_CHANGED,{path:o.pathname}))};document.addEventListener("click",O,!0),_(r.PATH_ON_LOAD,{path:window.location.pathname}),window.addEventListener("load",()=>{_(r.IFRAME_DOM_LOADED)});let L=t=>{let n=`[data-cms-block-id="${t}"]`,o=0,e=10,a=setInterval(()=>{let E=document.querySelector(n);E&&(E.scrollIntoView({behavior:"smooth",block:"start"}),clearInterval(a)),++o>=e&&clearInterval(a)},100)};window.addEventListener("message",t=>{let{type:n,payload:o}=t.data||{};if(n&&n===r.SCROLL_TO_BLOCK){let{draftBlockUuid:e}=o||{};if(!e)return;L(e)}})})();})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/cms-view-utils",
-  "version": "1.6.0",
+  "version": "1.7.1",
   "type": "module",
   "files": [
     "src",
@@ -21,10 +21,10 @@
   "devDependencies": {
     "@eslint/compat": "^2.1.0",
     "@eslint/js": "^10.0.1",
-    "eslint": "^10.8.0",
+    "eslint": "^10.8.1",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "^3.22.0",
-    "globals": "^17.9.0",
+    "eslint-plugin-svelte": "^3.23.0",
+    "globals": "^17.11.0",
     "prettier": "^3.9.6",
     "prettier-plugin-svelte": "^4.1.1",
     "prettier-plugin-tailwindcss": "^0.8.1",

package/src/client/fetchBoard.js

@@ -1,3 +1,11 @@
+/**
+ * Fetch a single ABM board.
+ *
+ * @param {object} options
+ * @param {string} options.locale - Locale code, e.g. `"de"`.
+ * @param {string|number} options.boardId - ABM id of the board.
+ * @returns {Promise<object>} The board object.
+ */
 const fetchBoard = async ({ locale, boardId }) => {
 	const url = `/api/cms/api/public/abm-boards/${locale}/${boardId}`;
 

package/src/client/fetchBoards.js

@@ -1,3 +1,10 @@
+/**
+ * Fetch all ABM boards.
+ *
+ * @param {object} options
+ * @param {string} options.locale - Locale code, e.g. `"de"`.
+ * @returns {Promise<object[]>} The boards.
+ */
 const fetchBoards = async ({ locale }) => {
 	const url = `/api/cms/api/public/abm-boards/${locale}`;
 

package/src/client/fetchCollections.js

@@ -1,3 +1,13 @@
+/**
+ * Fetch the items of a collection, or a single item of it.
+ *
+ * @param {object} options
+ * @param {string} options.locale - Locale code, e.g. `"de"`.
+ * @param {string} options.identifier - Collection identifier as configured in the CMS, e.g. `"blog"`.
+ * @param {string} [options.itemUuid] - Return only this item, as a plain object instead of an array.
+ * @param {number} [options.limit] - Maximum number of items, counted from the start of the CMS order. Ignored together with `itemUuid`.
+ * @returns {Promise<object[]|object>} An array of items, or a single item when `itemUuid` is set.
+ */
 const fetchCollections = async ({ identifier, itemUuid, limit, locale }) => {
 	const params = new URLSearchParams();
 

package/src/client/fetchFaqs.js

@@ -1,3 +1,14 @@
+/**
+ * Fetch ABM FAQs.
+ *
+ * @param {object} options
+ * @param {string} options.locale - Locale code, e.g. `"de"`.
+ * @param {string|number} [options.excludeId] - ABM FAQ id to leave out, e.g. the FAQ already shown on the page.
+ * @param {string[]} [options.tags] - Keep only FAQs carrying at least one of these tags (OR, not AND).
+ * @param {string[]} [options.groups] - Keep only FAQs belonging to one of these group ids.
+ * @param {number} [options.limit] - Maximum number of FAQs, applied after the filters.
+ * @returns {Promise<object[]>} The matching FAQs.
+ */
 const fetchFaqs = async ({ excludeId, limit, locale, tags, groups }) => {
 	const params = new URLSearchParams();
 

package/src/client/fetchPageTeasers.js

@@ -0,0 +1,63 @@
+/**
+ * Fetch the teasers of the tenant's published pages, e.g. for a blog index or related-posts list.
+ *
+ * @param {object} options
+ * @param {string} options.locale - Locale code, e.g. `"de"`.
+ * @param {string} [options.excludePageUuid] - Page UUID to leave out, e.g. the page currently shown.
+ * @param {boolean} [options.isBlog] - `true` for blog pages only, `false` for non-blog pages only, omit for all.
+ * @param {string[]} [options.tags] - Keep only pages carrying at least one of these tag UUIDs (OR, not AND).
+ * @param {"newest"|"oldest"} [options.order] - Sort by publication date; defaults to `"newest"`.
+ * @param {number} [options.offset] - Number of teasers to skip, applied after all filters.
+ * @param {number} [options.limit] - Maximum number of teasers; omit for all — there is no default.
+ * @returns {Promise<object[]>} The teasers.
+ */
+const fetchPageTeasers = async ({
+	locale,
+	excludePageUuid,
+	isBlog,
+	tags,
+	order,
+	offset,
+	limit,
+}) => {
+	const params = new URLSearchParams();
+
+	if (excludePageUuid != null && excludePageUuid !== "") {
+		params.set("excludePageUuid", excludePageUuid);
+	}
+
+	// The API accepts exactly `true` or `false` — anything else answers 422,
+	// so only real booleans are forwarded.
+	if (isBlog === true || isBlog === false) {
+		params.set("isBlog", isBlog);
+	}
+
+	if (Array.isArray(tags)) {
+		for (const tag of tags) {
+			if (tag != null && tag !== "") {
+				params.append("tags", tag);
+			}
+		}
+	}
+
+	if (order != null && order !== "") {
+		params.set("order", order);
+	}
+
+	if (offset != null) {
+		params.set("offset", offset);
+	}
+
+	if (limit != null) {
+		params.set("limit", limit);
+	}
+
+	const query = params.toString();
+	const url = `/api/cms/api/public/page-teasers/${locale}${query ? `?${query}` : ""}`;
+
+	const response = await fetch(url, { method: "GET" });
+
+	return response.json();
+};
+
+export { fetchPageTeasers };

package/src/client/fetchSimilarPackages.js

@@ -1,3 +1,12 @@
+/**
+ * Fetch ABM packages, typically for a "similar packages" section.
+ *
+ * @param {object} options
+ * @param {string} options.locale - Locale code, e.g. `"de"`.
+ * @param {string|number} [options.excludeId] - ABM package id to leave out, e.g. the package currently shown.
+ * @param {number} [options.limit] - Maximum number of packages to return.
+ * @returns {Promise<object[]>} The packages.
+ */
 const fetchSimilarPackages = async ({ excludeId, limit, locale }) => {
 	const params = new URLSearchParams();
 

package/src/client/fetchSimilarRooms.js

@@ -1,3 +1,12 @@
+/**
+ * Fetch ABM rooms, typically for a "similar rooms" section.
+ *
+ * @param {object} options
+ * @param {string} options.locale - Locale code, e.g. `"de"`.
+ * @param {string|number} [options.excludeId] - ABM room id to leave out, e.g. the room currently shown.
+ * @param {number} [options.limit] - Maximum number of rooms to return.
+ * @returns {Promise<object[]>} The rooms.
+ */
 const fetchSimilarRooms = async ({ excludeId, limit, locale }) => {
 	const params = new URLSearchParams();
 

package/src/components/EditableBlock.svelte

@@ -49,6 +49,12 @@
 				if (autoTranslate) return;
 				notifyCMS(EVENTS.BLOCK_ADD, { position });
 				break;
+			case CMS_ACTIONS.comment:
+				notifyCMS(EVENTS.BLOCK_COMMENT, {
+					blockIdentifier: block.identifier,
+					draftBlockUuid: block.uuid,
+				});
+				break;
 			case CMS_ACTIONS.delete:
 				if (isSynced) return;
 				notifyCMS(EVENTS.BLOCK_DELETE, {
@@ -126,20 +132,36 @@
 		isHovered = true;
 	}, 50);
 
+	let commentCount = $state(0);
+	// Off for users without the comment read permission; the CMS says so in the same
+	// message as the counts.
+	let commentsEnabled = $state(true);
+
 	const handler = (event) => {
 		const { type, payload } = event.data || {};
-		if (type !== EVENTS.CURRENT_BLOCK_EDIT) return;
 
-		const { draftBlockUuid } = payload || {};
+		if (type === EVENTS.CURRENT_BLOCK_EDIT) {
+			isActive = payload?.draftBlockUuid === block.uuid;
+			return;
+		}
 
-		isActive = draftBlockUuid === block.uuid;
+		// The counts arrive from the CMS: this iframe has no session for its API.
+		if (type === EVENTS.COMMENT_COUNTS) {
+			commentCount = payload?.counts?.[block.uuid] ?? 0;
+			commentsEnabled = payload?.enabled !== false;
+		}
 	};
 
 	let isOutside = $derived(calcBarPosition === "outside");
 
 	let containerShape = $derived.by(() => {
-		if (isOutside) return "absolute rounded-t-lg -top-8";
-		return `rounded-b-lg top-1.5 ${isSticky === "full" ? "fixed" : "absolute"}`;
+		// Both orientations have to read as the same bar, and the block's 6px frame
+		// counts: pointing up the bar overlaps it by 4px, pointing down it starts
+		// below it. 40px up (offset by the same 4px) and 36px down therefore end up
+		// equally tall — 42px including the line — and the 4px bottom padding mirrors
+		// the icon inset: 4px towards the line, 8px towards the rounded edge.
+		if (isOutside) return "absolute h-10 rounded-t-lg -top-9";
+		return `h-9 rounded-b-lg pb-1 top-1.5 ${isSticky === "full" ? "fixed" : "absolute"}`;
 	});
 
 	let cornerEdges = $derived(
@@ -150,13 +172,16 @@
 					"after:top-0 after:-right-4 after:shadow-[-6px_-6px_0_0_var(--block-color)]",
 	);
 
+	// 34px from the icon in both directions, which lands 2px off the bar either way.
 	let tooltipClasses = $derived(
-		`tooltip absolute ${isOutside ? "-top-8" : "top-8"} bg-[var(--block-color)] leading-none text-xs p-1.5 rounded left-1/2 -translate-x-1/2 whitespace-nowrap transition-opacity duration-150`,
+		`tooltip absolute ${isOutside ? "-top-8.5" : "top-8.5"} bg-[var(--block-color)] leading-none text-xs p-1.5 rounded left-1/2 -translate-x-1/2 whitespace-nowrap transition-opacity duration-150`,
 	);
 
 	const labels = {
 		de: {
 			add: "Hinzufügen",
+			comment: "Kommentare",
+			commentAria: "Kommentare des Blocks",
 			position: "Anordnen",
 			delete: "Löschen",
 			edit: "Bearbeiten",
@@ -167,6 +192,8 @@
 		},
 		en: {
 			add: "Add",
+			comment: "Comments",
+			commentAria: "Comments of the block",
 			position: "Arrange",
 			delete: "Delete",
 			edit: "Edit",
@@ -210,14 +237,14 @@
 	{/if}
 
 	<div
-		class="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="left-1/2 z-9999 flex -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={t.addAria}
 			class={[
-				"cursor-pointer",
+				"relative cursor-pointer",
 				(autoTranslate || isSynced) && "pointer-events-none opacity-40",
 			]}
 			onmouseenter={() => showTooltip("add")}
@@ -322,7 +349,7 @@
 		<button
 			aria-label={t.positionAria}
 			class={[
-				"cursor-pointer",
+				"relative cursor-pointer",
 				(autoTranslate || isSynced) && "pointer-events-none opacity-40",
 			]}
 			onmouseenter={() => showTooltip("position")}
@@ -352,7 +379,10 @@
 
 		<button
 			aria-label={t.deleteAria}
-			class={["cursor-pointer", isSynced && "pointer-events-none opacity-40"]}
+			class={[
+				"relative cursor-pointer",
+				isSynced && "pointer-events-none opacity-40",
+			]}
 			onmouseenter={() => showTooltip("delete")}
 			onmouseleave={hideTooltip}
 			onclick={(event) => handleClick(event, CMS_ACTIONS.delete)}>
@@ -378,6 +408,39 @@
 			</div>
 		</button>
 
+		{#if commentsEnabled}
+			<button
+				aria-label={t.commentAria}
+				class="relative flex cursor-pointer items-center gap-1"
+				onmouseenter={() => showTooltip("comment")}
+				onmouseleave={hideTooltip}
+				onclick={(event) => handleClick(event, CMS_ACTIONS.comment)}>
+				<svg
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg">
+					<path
+						d="M6.99997 9H16M6.99997 13H16M6.99997 17H12M22 12C22 17.5229 17.5229 22 12 22C9.01327 22 2 22 2 22C2 22 2 14.5361 2 12C2 6.47715 6.47717 2 12 2C17.5229 2 22 6.47715 22 12Z"
+						stroke="var(--block-text)"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round" />
+				</svg>
+				{#if commentCount > 0}
+					<span class="text-xs leading-none tabular-nums">{commentCount}</span>
+				{/if}
+				<div
+					class={tooltipClasses}
+					class:opacity-0={activeTooltip !== "comment"}
+					class:opacity-100={activeTooltip === "comment"}
+					class:pointer-events-none={activeTooltip !== "comment"}>
+					{t.comment}
+				</div>
+			</button>
+		{/if}
+
 		<button
 			aria-label={t.editAria}
 			class="relative cursor-pointer"

package/src/editor/cmsActions.js

@@ -1,5 +1,6 @@
 const CMS_ACTIONS = {
 	add: "add-block",
+	comment: "comment-block",
 	copy: "copy-block",
 	delete: "delete-block",
 	edit: "edit-block",

package/src/editor/notify.js

@@ -1,5 +1,6 @@
 const EVENTS = {
 	BLOCK_ADD: "BLOCK_ADD",
+	BLOCK_COMMENT: "BLOCK_COMMENT",
 	BLOCK_DELETE: "BLOCK_DELETE",
 	BLOCK_EDIT: "BLOCK_EDIT",
 	BLOCK_POSITION: "BLOCK_POSITION",
@@ -8,6 +9,7 @@ const EVENTS = {
 	PATH_CHANGED: "PATH_CHANGED",
 	PATH_ON_LOAD: "PATH_ON_LOAD",
 	IFRAME_DOM_LOADED: "IFRAME_DOM_LOADED",
+	COMMENT_COUNTS: "COMMENT_COUNTS",
 	CURRENT_BLOCK_EDIT: "CURRENT_BLOCK_EDIT",
 	SCROLL_TO_BLOCK: "SCROLL_TO_BLOCK",
 };

package/src/index.js

@@ -5,6 +5,7 @@ export { fetchFaqs } from "./client/fetchFaqs.js";
 export { fetchCollections } from "./client/fetchCollections.js";
 export { fetchBoards } from "./client/fetchBoards.js";
 export { fetchBoard } from "./client/fetchBoard.js";
+export { fetchPageTeasers } from "./client/fetchPageTeasers.js";
 
 export { default as AddBlockPlaceholder } from "./components/AddBlockPlaceholder.svelte";
 export { default as BlockWrapper } from "./components/BlockWrapper.svelte";