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...

1 files changed, 31 insertions, 0 deletions

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);
+				});
+			}
+		}
+	}
+})();