Easier closing of dialogs

Allow closing of dialogs by clicking on the background area around it.

When the dialog is closed in this manner, if it contains a form with changed data present a warning that there are unsaved changes. Likewise if the user attempts to navigate away from the page, eg page reload, bookmark click, address bar entry.

If the dialog does not contain a form or the data remains unchanged no warning messages are shown.

app/Template/layout.php

@@ -51,6 +51,7 @@
           data-js-lang="<?= $this->app->jsLang() ?>"
           data-js-date-format="<?= $this->app->getJsDateFormat() ?>"
           data-js-time-format="<?= $this->app->getJsTimeFormat() ?>"
+          data-js-modal-close-msg="<?= t('Close window?\\n\\nChanges that you made have not been saved.') ?>"
     >
 
     <?php if (isset($no_layout) && $no_layout): ?>

assets/js/components/board-task-click.js

@@ -20,7 +20,7 @@
         var url = KB.dom(baseElement).data('url');
 
         if (url) {
-            KB.modal.open(url, 'medium', false);
+            KB.modal.open(url, 'medium', true);
         }
     }
 

assets/js/components/keyboard-shortcuts.js

@@ -27,7 +27,7 @@ KB.keyboardShortcuts = function () {
 
     KB.onKey('?', function () {
         if (! KB.modal.isOpen()) {
-            KB.modal.open(KB.find('body').data('keyboardShortcutUrl'));
+            KB.modal.open(KB.find('body').data('keyboardShortcutUrl'), '', true);
         }
     });
 
@@ -62,7 +62,7 @@ KB.keyboardShortcuts = function () {
 
         KB.onKey('n', function () {
             if (! KB.modal.isOpen()) {
-                KB.modal.open(KB.find('#board').data('taskCreationUrl'), 'large', false);
+                KB.modal.open(KB.find('#board').data('taskCreationUrl'), 'large', true);
             }
         });
     }
@@ -70,25 +70,25 @@ KB.keyboardShortcuts = function () {
     if (KB.exists('#task-view')) {
         KB.onKey('e', function () {
             if (! KB.modal.isOpen()) {
-                KB.modal.open(KB.find('#task-view').data('editUrl'), 'large', false);
+                KB.modal.open(KB.find('#task-view').data('editUrl'), 'large', true);
             }
         });
 
         KB.onKey('c', function () {
             if (! KB.modal.isOpen()) {
-                KB.modal.open(KB.find('#task-view').data('commentUrl'), 'medium', false);
+                KB.modal.open(KB.find('#task-view').data('commentUrl'), 'medium', true);
             }
         });
 
         KB.onKey('s', function () {
             if (! KB.modal.isOpen()) {
-                KB.modal.open(KB.find('#task-view').data('subtaskUrl'), 'medium', false);
+                KB.modal.open(KB.find('#task-view').data('subtaskUrl'), 'medium', true);
             }
         });
 
         KB.onKey('l', function () {
             if (! KB.modal.isOpen()) {
-                KB.modal.open(KB.find('#task-view').data('internalLinkUrl'), 'medium', false);
+                KB.modal.open(KB.find('#task-view').data('internalLinkUrl'), 'medium', true);
             }
         });
     }

assets/js/components/modal.js

@@ -8,23 +8,23 @@
     }
 
     KB.onClick('.js-modal-large', function (e) {
-        KB.modal.open(getLink(e), 'large', false);
+        KB.modal.open(getLink(e), 'large', true);
     });
 
     KB.onClick('.js-modal-medium', function (e) {
         if (KB.modal.isOpen()) {
             KB.modal.replace(getLink(e));
         } else {
-            KB.modal.open(getLink(e), 'medium', false);
+            KB.modal.open(getLink(e), 'medium', true);
         }
     });
 
     KB.onClick('.js-modal-small', function (e) {
-        KB.modal.open(getLink(e), 'small', false);
+        KB.modal.open(getLink(e), 'small', true);
     });
 
     KB.onClick('.js-modal-confirm', function (e) {
-        KB.modal.open(getLink(e), 'small');
+        KB.modal.open(getLink(e), 'small', true);
     });
 
     KB.onClick('.js-modal-close', function () {

assets/js/core/modal.js

@@ -1,18 +1,42 @@
 (function () {
     var isOpen = false;
+    var isFormDirty = false;
+
+    function closeIfDirty() {
+        if (isFormDirty == false) {
+            return true;
+        }
+
+        return window.confirm($("body").data("js-modal-close-msg").replace(/\\n/g,"\n"));
+    }
 
     function onOverlayClick(e) {
         if (e.target.matches('#modal-overlay')) {
-            e.stopPropagation();
-            e.preventDefault();
-            destroy();
+            if (closeIfDirty()) {
+                e.stopPropagation();
+                e.preventDefault();
+                destroy();
+            }
         }
     }
 
+    function onBeforeUnload(e) {
+        // Cancel the event as stated by the standard.
+        e.preventDefault();
+
+        // Chrome requires returnValue to be set.
+        e.returnValue = '';
+    }
+
     function onCloseButtonClick() {
         KB.trigger('modal.close');
     }
 
+    function onFormChange() {
+        isFormDirty = true;
+        window.addEventListener('beforeunload', onBeforeUnload, false);
+    }
+
     function onFormSubmit() {
         KB.trigger('modal.loading');
         submitForm();
@@ -51,6 +75,7 @@
     function afterRendering() {
         var formElement = KB.find('#modal-content form');
         if (formElement) {
+            formElement.on('change', onFormChange, false);
             formElement.on('submit', onFormSubmit, false);
         }
 
@@ -65,6 +90,13 @@
         _KB.tagAutoComplete();
         _KB.get('Task').onPopoverOpened();
 
+        if (formElement) {
+            $('.form-date').datepicker('option', 'onSelect', onFormChange);
+            $('.form-datetime').datepicker('option', 'onSelect', onFormChange);
+            $(".color-picker").on('change', onFormChange);
+            $(".tag-autocomplete").on('change', onFormChange);
+        }
+
         KB.trigger('modal.afterRender');
     }
 
@@ -122,6 +154,8 @@
 
     function destroy() {
         isOpen = false;
+        isFormDirty = false;
+        window.removeEventListener('beforeunload', onBeforeUnload, false);
         var overlayElement = KB.find('#modal-overlay');
 
         if (overlayElement) {