Overthinking is a big issue

"Don't get too deep, it leads to overthinking, and over thinking leads to problems that doesn't even exist in the first place."

- Jayson Engay.

assets/js/app/ajax-save.js

@@ -9,42 +9,37 @@ record_id = JSON.stringify(record_id);
 /**
  * Start of Ajaxy solution for saving
  */
-$(document).ready(function () {
-    let dirty = false;
-    form.on('change', function() {
-        dirty = true;
+$(document).ready(function() {
+    var unsaved = false;
+
+    $(':input').change(function() {
+        //triggers change in all input fields including text type
+        unsaved = true;
     });
-    function checkDirty() {
-        if (dirty) {
-            // The confirmation message is as fallback. Modern browser show their own messages.
-            const confirmationMessage =
-                'It looks like you have been editing something. ' +
-                'If you leave before saving, your changes will be lost.';
 
-            (event || window.event).returnValue = confirmationMessage; //Gecko + IE
-            return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
+    function unloadPage() {
+        if (unsaved) {
+            return 'You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?';
         }
-
-        return true;
     }
 
-    element.on('click', function () {
+    window.onbeforeunload = unloadPage;
+
+    element.on('click', function() {
         $.ajax({
             type: 'POST',
             link: '/edit/' + record_id,
             data: $(form).serialize(),
-            beforeSend: function () {
+            beforeSend: function() {
                 patience_virtue(element);
             },
-            complete: function () {
+            complete: function() {
                 renable();
             },
-            error: function (jq, status, err) {
+            error: function(jq, status, err) {
                 console.log(status, err);
             },
         });
-        if (checkDirty() === 0) {
-            dirty = false;
-        }
+        unsaved = false;
     });
 });

assets/js/app/editor/index.js

@@ -25,7 +25,6 @@ import File from './Components/File';
 import Filelist from './Components/Filelist';
 import Collection from './Components/Collection';
 import Checkbox from './Components/Checkbox';
-import UnsavedChangesWarning from './unsavedchanges';
 
 Vue.component('editor-checkbox', Checkbox);
 Vue.component('editor-date', Date);
@@ -56,11 +55,5 @@ if (document.getElementById(id)) {
         store,
         el: editorSelector,
         name: 'BoltEditor',
-        mounted: function() {
-            // Wait 2 seconds, so that Vue is initialised properly without triggering change events.
-            setTimeout(function() {
-                UnsavedChangesWarning.warnFor(editorSelector + ' form');
-            }, 2000);
-        },
     });
 }

assets/js/app/editor/unsavedchanges.js

@@ -1,36 +0,0 @@
-import $ from 'jquery';
-
-export default {
-    warnFor(element) {
-        const warn = function(event) {
-            // The confirmation message is as fallback. Modern browser show their own messages.
-            const confirmationMessage =
-                'It looks like you have been editing something. ' +
-                'If you leave before saving, your changes will be lost.';
-
-            (event || window.event).returnValue = confirmationMessage; //Gecko + IE
-            return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
-        };
-
-        const getFormData = function(element) {
-            return $(element).serialize();
-        };
-
-        const originalData = getFormData(element);
-
-        $(window).on('beforeunload', function(event) {
-            const currentData = getFormData(element);
-
-            if (originalData === currentData) {
-                return;
-            }
-
-            return warn(event);
-        });
-
-        // Warning off if we are saving the content
-        $(element).on('submit', function() {
-            $(window).off('beforeunload');
-        });
-    },
-};