BUGFIX: values resetted if error

views/transform/almanach-edit.js

@@ -248,6 +248,7 @@ export class AlmanachEditPage extends HTMLElement {
 		try {
 			const response = await fetch(this._saveEndpoint, {
 				method: "POST",
+				credentials: "same-origin",
 				headers: {
 					"Content-Type": "application/json",
 					Accept: "application/json",
@@ -296,6 +297,7 @@ export class AlmanachEditPage extends HTMLElement {
 		try {
 			const response = await fetch(this._saveEndpoint, {
 				method: "POST",
+				credentials: "same-origin",
 				headers: {
 					"Content-Type": "application/json",
 					Accept: "application/json",
@@ -684,6 +686,7 @@ export class AlmanachEditPage extends HTMLElement {
 		}
 		this._statusEl.textContent = "";
 		this._statusEl.classList.remove("text-red-700", "text-green-700", "save-feedback-error", "save-feedback-success");
+		this._statusEl.classList.remove("is-hidden");
 		this._statusEl.classList.add("hidden");
 	}
 
@@ -694,11 +697,29 @@ export class AlmanachEditPage extends HTMLElement {
 		this._clearStatus();
 		this._statusEl.textContent = message;
 		this._statusEl.classList.remove("hidden");
+		this._statusEl.classList.remove("is-hidden");
 		if (type === "success") {
 			this._statusEl.classList.add("text-green-700", "save-feedback-success");
 		} else if (type === "error") {
 			this._statusEl.classList.add("text-red-700", "save-feedback-error");
 		}
+		if (type === "success") {
+			const el = this._statusEl;
+			if (el) {
+				if (el.dataset.autohideScheduled === "true") {
+					return;
+				}
+				el.dataset.autohideScheduled = "true";
+				setTimeout(() => {
+					el.classList.add("is-hiding");
+					setTimeout(() => {
+						el.classList.add("is-hidden");
+						el.classList.remove("is-hiding");
+						delete el.dataset.autohideScheduled;
+					}, 320);
+				}, 4000);
+			}
+		}
 	}
 
 	async _reloadForm(successMessage) {
@@ -711,6 +732,7 @@ export class AlmanachEditPage extends HTMLElement {
 		}
 
 		const response = await fetch(targetUrl.toString(), {
+			credentials: "same-origin",
 			headers: {
 				"X-Requested-With": "fetch",
 			},

views/transform/form.css

@@ -205,7 +205,12 @@
 	}
 
 	.save-feedback {
-		@apply text-sm font-semibold px-3 py-2 rounded-xs border bg-stone-50 text-gray-700;
+		@apply text-sm font-semibold px-3 py-2 rounded-md border bg-stone-50 text-gray-700 transition-all duration-300 relative overflow-hidden;
+		transform-origin: center left;
+	}
+
+	.save-feedback.hidden {
+		@apply opacity-0 pointer-events-none;
 	}
 
 	.save-feedback-error {
@@ -216,6 +221,37 @@
 		@apply bg-green-50 border-green-200 text-green-800;
 	}
 
+	.save-feedback.is-hiding {
+		@apply opacity-0;
+		transform: translateY(4px) scale(0.98);
+	}
+
+	.save-feedback[data-autohide="true"]::after {
+		content: "";
+		position: absolute;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		height: 2px;
+		background: currentColor;
+		opacity: 0.35;
+		transform-origin: left center;
+		animation: save-feedback-timer 2s linear forwards;
+	}
+
+	@keyframes save-feedback-timer {
+		from {
+			transform: scaleX(1);
+		}
+		to {
+			transform: scaleX(0);
+		}
+	}
+
+	.save-feedback.is-hidden {
+		@apply opacity-0 pointer-events-none;
+	}
+
 	.lf-warn-icon {
 		@apply ml-1 mr-2;
 	}

views/transform/main.js

@@ -644,6 +644,48 @@ function InitStickyActionBars() {
 	document.addEventListener("htmx:afterSwap", update);
 }
 
+function InitTimedMessages() {
+	const duration = 2000;
+	const hide = (el) => {
+		if (!el || el.classList.contains("hidden") || el.classList.contains("is-hidden")) {
+			return;
+		}
+		requestAnimationFrame(() => {
+			el.classList.add("is-hiding");
+		});
+		setTimeout(() => {
+			el.classList.add("is-hidden");
+			el.classList.remove("is-hiding");
+			delete el.dataset.autohideScheduled;
+		}, 320);
+	};
+
+	const schedule = (root) => {
+		const scope = root || document;
+		scope.querySelectorAll("[data-autohide='true']").forEach((el) => {
+			if (el.dataset.autohideScheduled === "true") {
+				return;
+			}
+			el.dataset.autohideScheduled = "true";
+			setTimeout(() => hide(el), duration);
+		});
+	};
+
+	schedule(document);
+	document.addEventListener("htmx:afterSwap", (event) => {
+		schedule(event.target);
+	});
+	const observer = new MutationObserver((mutations) => {
+		for (const mutation of mutations) {
+			for (const node of mutation.addedNodes) {
+				if (node.nodeType !== Node.ELEMENT_NODE) continue;
+				schedule(node);
+			}
+		}
+	});
+	observer.observe(document.body, { childList: true, subtree: true });
+}
+
 document.addEventListener("keydown", (event) => {
 	if (event.key !== "Enter") {
 		return;
@@ -664,7 +706,9 @@ window.PathPlusQuery = PathPlusQuery;
 window.HookupRBChange = HookupRBChange;
 window.FormLoad = FormLoad;
 window.TextareaAutoResize = TextareaAutoResize;
+window.InitTimedMessages = InitTimedMessages;
 InitGlobalHtmxNotice();
 InitStickyActionBars();
+InitTimedMessages();
 
 export { FilterList, ScrollButton, AbbreviationTooltips, MultiSelectSimple, MultiSelectRole, ToolTip, PopupImage, TabList, FilterPill, ImageReel, IntLink, ItemsEditor, SingleSelectRemote, AlmanachEditPage, RelationsEditor, EditPage, FabMenu, LookupField };