Remove global close dialog events and add them to each component so we can clean up correctly

src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbcontextmenu.directive.js

@@ -1,5 +1,5 @@
 angular.module("umbraco.directives")
-.directive('umbContextMenu', function (navigationService) {
+.directive('umbContextMenu', function (navigationService, keyboardService) {
     return {
         scope: {
             menuDialogTitle: "@",
@@ -17,6 +17,20 @@ angular.module("umbraco.directives")
             scope.executeMenuItem = function (action) {
                 navigationService.executeMenuAction(action, scope.currentNode, scope.currentSection);
             };
+
+            scope.outSideClick = function() {
+                navigationService.hideNavigation();
+            };
+
+            keyboardService.bind("esc", function() {
+                navigationService.hideNavigation();
+            });
+
+            //ensure to unregister from all events!
+            scope.$on('$destroy', function () {
+                keyboardService.unbind("esc");
+            });
+
         }
     };
 });

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

@@ -1,7 +1,24 @@
 (function() {
     'use strict';
 
-    function UmbContextDialog() {
+    function UmbContextDialog(navigationService, keyboardService) {
+
+        function link($scope) {
+            
+            $scope.outSideClick = function() {
+                navigationService.hideNavigation();
+            }
+
+            keyboardService.bind("esc", function() {
+                navigationService.hideNavigation();
+            });
+
+            //ensure to unregister from all events!
+            $scope.$on('$destroy', function () {
+                keyboardService.unbind("esc");
+            });
+
+        }
 
         var directive = {
             restrict: 'E',
@@ -11,7 +28,8 @@
                 title: "<",
                 currentNode: "<",
                 view: "<"
-            }
+            },
+            link: link
         };
         return directive;
     }

src/Umbraco.Web.UI.Client/src/common/services/events.service.js

@@ -6,7 +6,6 @@
     app.ready
     app.authenticated
     app.notAuthenticated
-    app.closeDialogs
     app.ysod
     app.reInitialize
     app.userRefresh

src/Umbraco.Web.UI.Client/src/controllers/main.controller.js

@@ -23,27 +23,6 @@ function MainController($scope, $location, appState, treeService, notificationsS
         notificationsService.remove(index);
     };
 
-    $scope.closeDialogs = function (event) {
-        //only close dialogs if non-link and non-buttons are clicked
-        var el = event.target.nodeName;
-        var els = ["INPUT", "A", "BUTTON"];
-
-        if (els.indexOf(el) >= 0) { return; }
-
-        var parents = $(event.target).parents("a,button");
-        if (parents.length > 0) {
-            return;
-        }
-
-        //SD: I've updated this so that we don't close the dialog when clicking inside of the dialog
-        var nav = $(event.target).parents("#dialog");
-        if (nav.length === 1) {
-            return;
-        }
-
-        eventsService.emit("app.closeDialogs", event);
-    };
-
     $scope.closeSearch = function() {
         appState.setSearchState("show", false);
     };

src/Umbraco.Web.UI.Client/src/controllers/navigation.controller.js

@@ -147,11 +147,6 @@ function NavigationController($scope, $rootScope, $location, $log, $q, $routePar
         navigationService.showSearch();
     });
 
-    //trigger dialods with a hotkey:
-    keyboardService.bind("esc", function () {
-        eventsService.emit("app.closeDialogs");
-    });
-
     $scope.selectedId = navigationService.currentId;
 
     var evts = [];
@@ -242,15 +237,6 @@ function NavigationController($scope, $rootScope, $location, $log, $q, $routePar
         }
     }));
 
-    //This reacts to clicks passed to the body element which emits a global call to close all dialogs
-    evts.push(eventsService.on("app.closeDialogs", function (event) {
-        if (appState.getGlobalState("stickyNavigation")) {
-            navigationService.hideNavigation();
-            //TODO: don't know why we need this? - we are inside of an angular event listener.
-            angularHelper.safeApply($scope);
-        }
-    }));
-
     //when a user logs out or timesout
     evts.push(eventsService.on("app.notAuthenticated", function () {
         $scope.authenticated = false;

src/Umbraco.Web.UI.Client/src/views/components/application/umb-contextmenu.html

@@ -1,4 +1,4 @@
-<div>
+<div on-outside-click="outSideClick()">
     <div class='umb-modalcolumn-header'>
         <h1>{{menuDialogTitle}}</h1>
     </div>

src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html

@@ -27,7 +27,7 @@
         <div class="offset6" id="navOffset" style="z-index: 10">
 
             <!-- The context menu -->
-            <div id='contextMenu' class="umb-modalcolumn fill shadow" ng-show="showContextMenu" ng-animate="'slide'">
+            <div id='contextMenu' class="umb-modalcolumn fill shadow" ng-if="showContextMenu" ng-animate="'slide'">
                 <umb-context-menu
                     menu-dialog-title="{{menuDialogTitle}}"
                     current-section="{{currentSection}}"

src/Umbraco.Web.UI.Client/src/views/components/tree/umbcontextdialog/umb-context-dialog.html

@@ -1,4 +1,4 @@
-<div id="dialog" class="umb-modalcolumn fill shadow">
+<div id="dialog" class="umb-modalcolumn fill shadow" on-outside-click="outSideClick()">
     <div class="umb-modalcolumn-header">
         <h1>{{title}}</h1>
     </div>

src/Umbraco.Web.UI/Umbraco/Views/Default.cshtml

@@ -54,7 +54,7 @@
 
     <div ng-hide="!authenticated" ng-cloak>
 
-        <div style="display: none;" id="mainwrapper" class="clearfix" ng-click="closeDialogs($event)">
+        <div style="display: none;" id="mainwrapper" class="clearfix">
 
             <umb-app-header></umb-app-header>