add option to disable all events on backdrop click to prevent dialogs, overlays, etc. form closing

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

@@ -7,6 +7,13 @@
 
             var events = [];
 
+            scope.clickBackdrop = function(event) {
+                if(scope.disableEventsOnClick === true) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+            };
+
             function onInit() {
 
                 if (scope.element) {
@@ -77,7 +84,8 @@
             templateUrl: "views/components/application/umb-backdrop.html",
             link: link,
             scope: {
-                element: "="
+                element: "=",
+                disableEventsOnClick: "="
             }
         };
 

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

@@ -32,6 +32,7 @@
                 popover = el.find(".umb-tour__popover");
                 scope.totalSteps = scope.steps.length;
                 scope.currentStepIndex = 0;
+                backdropService.open({disableEventsOnClick: true});
                 startStep();
             }
 
@@ -61,8 +62,6 @@
 
             function startStep() {
 
-                backdropService.open();
-
                 // we need to make sure that all requests are done
                 var timer = window.setInterval(function(){
 

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

@@ -5,13 +5,18 @@
 
         var args = {
             element: null,
+            disableEventsOnClick: false,
             show: false
         };
 
-        function open(backdrop) {
+        function open(options) {
 
-            if(backdrop && backdrop.element) {
-                args.element = backdrop.element;
+            if(options && options.element) {
+                args.element = options.element;
+            }
+
+            if(options && options.disableEventsOnClick) {
+                args.disableEventsOnClick = options.disableEventsOnClick;
             }
 
             args.show = true;

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

@@ -147,7 +147,6 @@ function MainController($scope, $rootScope, $location, $routeParams, $timeout, $
     }));
 
     evts.push(eventsService.on("appState.backdrop", function (name, args) {
-        console.log("BAAAACKDROP", args);
         $scope.backdrop = args;
     }));
 

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

@@ -1,4 +1,4 @@
-<div>
+<div ng-click="clickBackdrop($event)">
     <!-- Backdrop with highlight -->
     <svg ng-if="element" class="umb-backdrop" xmlns="http://www.w3.org/2000/svg" version="1.1">
         <rect class="umb-backdrop__rect umb-backdrop__rect--left" height="100%"/>

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

@@ -75,7 +75,8 @@
 
     <umb-backdrop
         ng-if="backdrop.show"
-        element="backdrop.element">
+        element="backdrop.element"
+        disable-events-on-click="backdrop.disableEventsOnClick">
     </umb-backdrop>
 
     <umb-overlay