Warn editors for unsaved changes to content

assets/js/app/editor/index.js

@@ -25,6 +25,7 @@ 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);
@@ -48,11 +49,18 @@ Vue.component('general-language', Language);
 Vue.component('theme-select', ThemeSelect);
 
 const id = 'editor';
+const editorSelector = '#' + id;
 
 if (document.getElementById(id)) {
     new Vue({
         store,
-        el: '#' + id,
+        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

@@ -0,0 +1,29 @@
+import $ from 'jquery';
+
+export default {
+    warnFor(element) {
+        const changeHandler = function() {
+            if (!window.modified) {
+                $(window).on('beforeunload', function(e) {
+                    // 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.';
+
+                    (e || window.event).returnValue = confirmationMessage; //Gecko + IE
+                    return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
+                });
+            }
+
+            window.modified = true;
+        };
+
+        $(element).on('DOMSubtreeModified', changeHandler);
+        $(element).on('change', changeHandler);
+
+        // Warning off if we are saving the content
+        $(element).on('submit', function() {
+            $(window).off('beforeunload');
+        });
+    },
+};