@tideworthy/tidysites-platform 0.10.4 → 0.10.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.10.6
+
+- Editor: Publish live, Restore and Remove section confirm in a dialog of the editor's own, never the browser's box. The bar's note reads "A private copy to see working changes on the website, not publicly accessible."
+
+## 0.10.5
+
+- Editor bar: an interim note.
+
+## 0.10.5
+
+- Editor: the bar's note reads "Changes here go live when you publish."
+
 ## 0.10.4
 
 - Editor: the bar has a 1px white bottom edge, so it stands off a dark header as well as a light one.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tideworthy/tidysites-platform",
-	"version": "0.10.4",
+	"version": "0.10.6",
 	"description": "The Tidysites platform integration for EmDash sites: bootstrap, sessions, maintenance, health, and publish hooks under /_tidy/*.",
 	"license": "MIT",
 	"type": "module",

package/src/editor/TidyEditor.astro

@@ -55,7 +55,7 @@ const htmlClass = !signedIn ? (signInUrl ? "tidy-has-bar tidy-idle" : "") : !act
 {(signedIn || signInUrl) && (
 	<>
 		<div class="tidy-bar" id="tidy-bar" role="region" aria-label="Site editing">
-			<span class="tidy-bar-label"><span class="tidy-bar-dot" aria-hidden="true"></span>{label} website<span class="tidy-bar-note">A private copy for working on it. Visitors see the live website.</span></span>
+			<span class="tidy-bar-label"><span class="tidy-bar-dot" aria-hidden="true"></span>{label} website<span class="tidy-bar-note">Changes here go live when you publish.</span></span>
 			<div class="tidy-bar-actions" id="tidy-bar-actions">
 				{!signedIn && <a class="tidy-btn tidy-btn-primary" href={signInUrl!}>Sign in to edit</a>}
 				{signedIn && !active && <a class="tidy-btn tidy-btn-primary" href={toggle(true)}>Edit</a>}

package/src/editor/confirm.ts

@@ -0,0 +1,48 @@
+/**
+ * A yes-or-no dialog in the page, in the editor's own style: never the
+ * browser's confirm box. Resolves true on the action, false on Cancel,
+ * Escape or a click on the backdrop.
+ */
+export function tidyConfirm(opts: { title: string; body: string; cta: string; danger?: boolean }): Promise<boolean> {
+	return new Promise((resolve) => {
+		const backdrop = document.createElement("div");
+		backdrop.className = "tidy-dialog-backdrop";
+		const dialog = document.createElement("div");
+		dialog.className = "tidy-dialog";
+		dialog.setAttribute("role", "alertdialog");
+		dialog.setAttribute("aria-modal", "true");
+		const h = document.createElement("h2");
+		h.textContent = opts.title;
+		const p = document.createElement("p");
+		p.textContent = opts.body;
+		const actions = document.createElement("div");
+		actions.className = "tidy-dialog-actions";
+		const cancel = document.createElement("button");
+		cancel.type = "button";
+		cancel.className = "tidy-btn";
+		cancel.textContent = "Cancel";
+		const go = document.createElement("button");
+		go.type = "button";
+		go.className = `tidy-btn ${opts.danger ? "tidy-btn-danger" : "tidy-btn-primary"}`;
+		go.textContent = opts.cta;
+		actions.append(cancel, go);
+		dialog.append(h, p, actions);
+		backdrop.append(dialog);
+		const done = (ok: boolean) => {
+			document.removeEventListener("keydown", onKey);
+			backdrop.remove();
+			resolve(ok);
+		};
+		const onKey = (e: KeyboardEvent) => {
+			if (e.key === "Escape") done(false);
+		};
+		cancel.addEventListener("click", () => done(false));
+		go.addEventListener("click", () => done(true));
+		backdrop.addEventListener("click", (e) => {
+			if (e.target === backdrop) done(false);
+		});
+		document.addEventListener("keydown", onKey);
+		document.body.append(backdrop);
+		go.focus();
+	});
+}

package/src/editor/revisions.ts

@@ -10,6 +10,7 @@
  * Deep links: ?tidy-revisions=1 opens the list; ?tidy-revision=<id> opens
  * that revision of this page.
  */
+import { tidyConfirm } from "./confirm";
 
 interface Revision {
 	id: string;
@@ -111,7 +112,7 @@ export function startRevisions(): void {
 		}
 		viewer.hidden = false;
 		restoreBtn.onclick = async () => {
-			if (!confirm(`Restore the website to ${when(rev.at)}?\n\nThe live site goes back to how it was then, and so does staging: every change made since is lost.`)) return;
+			if (!(await tidyConfirm({ title: `Restore the website to ${when(rev.at)}?`, body: "The live site goes back to how it was then, and so does staging: every change made since is lost.", cta: "Restore", danger: true }))) return;
 			restoreBtn.disabled = true;
 			restoreBtn.textContent = "Restoring";
 			const p = await fetch(ROUTE, { method: "POST", credentials: "same-origin", headers: { "content-type": "application/json" }, body: JSON.stringify({ action: "restore", id: rev.id }) });
@@ -135,7 +136,7 @@ export function startRevisions(): void {
 	});
 
 	liveBtn.addEventListener("click", async () => {
-		if (!confirm("Publish the website?\n\nEverything on staging goes live, every change made since the last publish.")) return;
+		if (!(await tidyConfirm({ title: "Publish the website?", body: "Everything on staging goes live, every change made since the last publish.", cta: "Publish" }))) return;
 		liveBtn.disabled = true;
 		liveBtn.textContent = "Publishing";
 		const p = await fetch(ROUTE, { method: "POST", credentials: "same-origin", headers: { "content-type": "application/json" }, body: JSON.stringify({ action: "publish" }) });

package/src/editor/runtime.ts

@@ -1,5 +1,6 @@
 /// <reference lib="dom" />
 /// <reference lib="dom.iterable" />
+import { tidyConfirm } from "./confirm";
 /**
  * The Tideworthy on-site editor. Runs on a page rendered in edit mode.
  *
@@ -295,8 +296,9 @@ export function start(config: Config): void {
 	bUp.addEventListener("click", () => current?.dataset.tidyBlock && moved(moveBlock(value, current.dataset.tidyBlock, -1)));
 	bDown.addEventListener("click", () => current?.dataset.tidyBlock && moved(moveBlock(value, current.dataset.tidyBlock, 1)));
 	bRemove.addEventListener("click", () => {
-		if (!current?.dataset.tidyBlock) return;
-		if (confirm(`Remove this ${chipLabel.textContent} section?`)) void saveBlocks(removeBlock(value, current.dataset.tidyBlock));
+		const key = current?.dataset.tidyBlock;
+		if (!key) return;
+		void tidyConfirm({ title: `Remove this ${chipLabel.textContent} section?`, body: "The section comes off the page. Publish for the change to show on the live website.", cta: "Remove", danger: true }).then((ok) => { if (ok) void saveBlocks(removeBlock(value, key)); });
 	});
 	bAdd.addEventListener("click", () => current?.dataset.tidyBlock && openAdd(current.dataset.tidyBlock));
 	function moved(next: Block[]) {

package/src/version.ts

@@ -1,3 +1,3 @@
 /** Kept in step with package.json by the release checklist in MAINTAINING.md. */
-export const VERSION = "0.10.4";
+export const VERSION = "0.10.6";
 export const PLUGIN_ID = "tidy-platform";