V8: Make dialogs prompt to discard changes on outside click and ESC (#5740)

src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbcontextdialog/umbcontextdialog.directive.js

@@ -1,16 +1,20 @@
 (function() {
     'use strict';
 
-    function UmbContextDialog(navigationService, keyboardService) {
+    function UmbContextDialog(navigationService, keyboardService, localizationService, overlayService) {
 
         function link($scope) {
-            
-            $scope.outSideClick = function() {
-                navigationService.hideDialog();
-            }
 
-            keyboardService.bind("esc", function() {
-                navigationService.hideDialog();
+            $scope.dialog = {
+                confirmDiscardChanges: false
+            };
+
+            $scope.outSideClick = function() {
+                hide();
+            };
+
+            keyboardService.bind("esc", function () {
+                hide();
             });
 
             //ensure to unregister from all events!
@@ -18,6 +22,35 @@
                 keyboardService.unbind("esc");
             });
 
+            function hide() {
+                if ($scope.dialog.confirmDiscardChanges) {
+                    localizationService.localizeMany(["prompt_unsavedChanges", "prompt_unsavedChangesWarning", "prompt_discardChanges", "prompt_stay"]).then(
+                        function (values) {
+                            var overlay = {
+                                "view": "default",
+                                "title": values[0],
+                                "content": values[1],
+                                "disableBackdropClick": true,
+                                "disableEscKey": true,
+                                "submitButtonLabel": values[2],
+                                "closeButtonLabel": values[3],
+                                submit: function () {
+                                    overlayService.close();
+                                    navigationService.hideDialog();
+                                },
+                                close: function () {
+                                    overlayService.close();
+                                }
+                            };
+
+                            overlayService.open(overlay);
+                        }
+                    );
+                }
+                else {
+                    navigationService.hideDialog();
+                }
+            }
         }
 
         var directive = {

src/Umbraco.Web.UI.Client/src/views/content/content.protect.controller.js

@@ -102,6 +102,7 @@
                         };
                     });
                     navigationService.syncTree({ tree: "content", path: $scope.currentNode.path, forceReload: true });
+                    $scope.dialog.confirmDiscardChanges = true;
                 }, function (error) {
                     vm.error = error;
                     vm.buttonState = "error";
@@ -117,6 +118,7 @@
 
         function toggle(group) {
             group.selected = !group.selected;
+            $scope.dialog.confirmDiscardChanges = true;
         }
 
         function pickGroup() {
@@ -137,6 +139,7 @@
                         });
                     editorService.close();
                     navigationService.allowHideDialog(true);
+                    $scope.dialog.confirmDiscardChanges = true;
                 },
                 close: function() {
                     editorService.close();
@@ -147,6 +150,7 @@
 
         function removeGroup(group) {
             vm.groups = _.reject(vm.groups, function(g) { return g.id === group.id });
+            $scope.dialog.confirmDiscardChanges = true;
         }
 
         function pickMember() {
@@ -186,6 +190,7 @@
                         $q.all(promises).then(function() {
                             vm.loading = false;
                         });
+                        $scope.dialog.confirmDiscardChanges = true;
                     }
                 },
                 close: function () {
@@ -219,6 +224,7 @@
                     }
                     editorService.close();
                     navigationService.allowHideDialog(true);
+                    $scope.dialog.confirmDiscardChanges = true;
                 },
                 close: function () {
                     editorService.close();

src/Umbraco.Web.UI.Client/src/views/content/content.rights.controller.js

@@ -93,6 +93,7 @@
         function setPermissions(group) {
             assignGroupPermissions(group);  
             setViewSate("manageGroups");
+            $scope.dialog.confirmDiscardChanges = true;
         }
 
         /**