From 8886f16a767e1f74b270befb4342857eeacc0fc6 Mon Sep 17 00:00:00 2001
From: Thomas Lange <code@nerdmind.de>
Date: Fri, 9 Jul 2021 23:05:55 +0200
Subject: Detect unsaved changes in content editor

This commit adds a bit of JavaScript code to detect unsaved changes in
the content editor when trying to leave the page. The browser's default
confirmation dialog is shown when unsaved changes are detected.

This currently only covers the textarea of the content editor, not the
other form fields. There may be a better solution (like LocalStorage),
but it works for the moment. I'll add it to my TODO list...
---
 theme/admin/rsrc/main.js | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/theme/admin/rsrc/main.js b/theme/admin/rsrc/main.js
index 842ef47..94fc591 100644
--- a/theme/admin/rsrc/main.js
+++ b/theme/admin/rsrc/main.js
@@ -158,3 +158,34 @@ if(document.getElementById("delete-button")) {
 		}
 	}
 })();
+
+//==============================================================================
+// Detect unsaved changes in content editor
+//==============================================================================
+(function() {
+	if(document.getElementById("content-editor")) {
+		const editor = document.getElementById("content-editor");
+		const initialValue = editor.value;
+
+		function showConfirmationPrompt(e) {
+			if(editor.value !== initialValue) {
+				e.returnValue = '';
+				e.preventDefault();
+			}
+		}
+
+		window.addEventListener('beforeunload', showConfirmationPrompt);
+
+		const buttons = [];
+		buttons.push(document.getElementById('insert-button'));
+		buttons.push(document.getElementById('update-button'));
+
+		for(let i = 0; i < buttons.length; ++i) {
+			if(buttons[i] !== null) {
+				buttons[i].addEventListener('click', function() {
+					window.removeEventListener('beforeunload', showConfirmationPrompt);
+				});
+			}
+		}
+	}
+})();
-- 
cgit v1.2.3