Make user confirm before navigating away from changed page editor

CHANGELOG.txt

@@ -4,6 +4,7 @@ Changelog
 1.4 (xx.xx.xxxx)
 ~~~~~~~~~~~~~~~~
 
+ * The page editor now produces a warning if the user navigates away without saving changes
  * The `Document` model can now be overridden using the new `WAGTAILDOCS_DOCUMENT_MODEL` setting (Alex Gleason)
  * Wagtail no longer depends on django-compressor
  * Snippets now support a custom `edit_handler` property (Mikalai Radchuk)

docs/releases/1.4.rst

@@ -10,6 +10,11 @@ Wagtail 1.4 release notes - IN DEVELOPMENT
 What's new
 ==========
 
+Protection against unsaved changes
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+The page editor interface now produces a warning if the user attempts to navigate away while there are unsaved changes.
+
 
 Custom document models
 ~~~~~~~~~~~~~~~~~~~~~~

wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js

@@ -36,6 +36,49 @@ function initTagField(id, autocompleteUrl) {
     });
 }
 
+/*
+ * Enables a "dirty form check", prompting the user if they are navigating away
+ * from a page with unsaved changes.
+ *
+ * It takes the following parameters:
+ *
+ *  - formSelector - A CSS selector to select the form to apply this check to.
+ *
+ *  - options - An object for passing in options. Possible options are:
+ *    - ignoredButtonsSelector - A CSS selector to find buttons to ignore within
+ *      the form. If the navigation was triggered by one of these buttons, The
+ *      check will be ignored. defaults to: input[type="submit"].
+ *    - confirmationMessage - The message to display in the prompt.
+ *    - alwaysDirty - When set to true the form will always be considered dirty,
+ *      prompting the user even when nothing has been changed.
+*/
+function enableDirtyFormCheck(formSelector, options) {
+    var $form = $(formSelector);
+    var $ignoredButtons = $form.find(
+        options.ignoredButtonsSelector || 'input[type="submit"],button[type="submit"]'
+    );
+    var confirmationMessage = options.confirmationMessage || ' ';
+    var alwaysDirty = options.alwaysDirty || false;
+    var initialData = $form.serialize();
+
+    window.addEventListener('beforeunload', function(event) {
+        // Ignore if the user clicked on an ignored element
+        var triggeredByIgnoredButton = false;
+        var $trigger = $(event.target.activeElement);
+
+        $ignoredButtons.each(function() {
+            if ($(this).is($trigger)) {
+                triggeredByIgnoredButton = true;
+            }
+        });
+
+        if (!triggeredByIgnoredButton && (alwaysDirty || $form.serialize() != initialData)) {
+            event.returnValue = confirmationMessage;
+            return confirmationMessage;
+        }
+    });
+}
+
 $(function() {
     // Add class to the body from which transitions may be hung so they don't appear to transition as the page loads
     $('body').addClass('ready');
@@ -207,4 +250,3 @@ $(function() {
         }, 10);
     });
 });
-

wagtail/wagtailadmin/templates/wagtailadmin/pages/create.html

@@ -74,6 +74,19 @@
     <script>
         $(function(){
             $('#page-edit-form .tab-content section.active input').first().focus();
+
+            /* Make user confirm before leaving the editor if there are unsaved changes */
+            {% trans "This page has unsaved changes." as confirmation_message %}
+            enableDirtyFormCheck(
+                '#page-edit-form',
+                {
+                    confirmationMessage: '{{ confirmation_message|escapejs }}',
+
+                    {% if form.errors %}
+                        alwaysDirty: true,
+                    {% endif %}
+                }
+            );
         });
     </script>
 {% endblock %}

wagtail/wagtailadmin/templates/wagtailadmin/pages/edit.html

@@ -33,7 +33,7 @@
                 <li class="actions">
                     <div class="dropdown dropup dropdown-button match-width">
                         <button type="submit" class="action-save button-longrunning" tabindex="3" data-clicked-text="{% trans 'Saving...' %}" {% if page.locked %}disabled {% endif %}><span class="icon icon-spinner"></span><em>{% if page.locked %}{% trans 'Page locked' %}{% else %}{% trans 'Save draft' %}{% endif %}</em></button>
-                        
+
                         {% if not page.locked %}
                             <div class="dropdown-toggle icon icon-arrow-up"></div>
                             <ul role="menu">
@@ -99,4 +99,21 @@
 {% block extra_js %}
     {{ block.super }}
     {% include "wagtailadmin/pages/_editor_js.html" %}
+
+    <script>
+        $(function() {
+            /* Make user confirm before leaving the editor if there are unsaved changes */
+            {% trans "This page has unsaved changes." as confirmation_message %}
+            enableDirtyFormCheck(
+                '#page-edit-form',
+                {
+                    confirmationMessage: '{{ confirmation_message|escapejs }}',
+
+                    {% if form.errors %}
+                        alwaysDirty: true,
+                    {% endif %}
+                }
+            );
+        });
+    </script>
 {% endblock %}

wagtail/wagtailadmin/views/pages.py

@@ -217,7 +217,7 @@ def create(request, content_type_app_name, content_type_model_name, parent_page_
         'parent_page': parent_page,
         'edit_handler': edit_handler,
         'preview_modes': page.preview_modes,
-        'form': form,  # Used in unit tests
+        'form': form,
     })
 
 
@@ -319,7 +319,7 @@ def edit(request, page_id):
         'edit_handler': edit_handler,
         'errors_debug': errors_debug,
         'preview_modes': page.preview_modes,
-        'form': form,  # Used in unit tests
+        'form': form,
     })
 
 
@@ -379,6 +379,7 @@ def preview_on_edit(request, page_id):
             'page': page,
             'edit_handler': edit_handler,
             'preview_modes': page.preview_modes,
+            'form': form,
         })
         response['X-Wagtail-Preview'] = 'error'
         return response
@@ -424,6 +425,7 @@ def preview_on_create(request, content_type_app_name, content_type_model_name, p
             'parent_page': parent_page,
             'edit_handler': edit_handler,
             'preview_modes': page.preview_modes,
+            'form': form,
         })
         response['X-Wagtail-Preview'] = 'error'
         return response