From 22c49398e39b3d8e7f6d4479a090ad12cfcb1802 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Fri, 20 Aug 2021 15:59:31 +0200
Subject: [PATCH] Hide backdrop when closing/select navigation (#10907)

(cherry picked from commit 72d33b8f6845fb4f3c713dd5f463509235557c52)

# Conflicts:
#	src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtree.directive.js
#	src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js
---
 .../components/tree/umbtree.directive.js      | 16 +---------
 .../src/common/services/navigation.service.js | 31 ++++++++++++-------
 2 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtree.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtree.directive.js
index 7868f79809..a39475f4da 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtree.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtree.directive.js
@@ -3,7 +3,7 @@
 * @name umbraco.directives.directive:umbTree
 * @restrict E
 **/
-function umbTreeDirective($q, $rootScope, treeService, notificationsService, userService, backdropService) {
+function umbTreeDirective($q, treeService, notificationsService) {
 
     return {
         restrict: 'E',
@@ -318,18 +318,6 @@ function umbTreeDirective($q, $rootScope, treeService, notificationsService, use
                 }
             }
 
-            // Close any potential backdrop and remove the #leftcolumn modifier class
-            function closeBackdrop() {
-                var aboveClass = 'above-backdrop';
-                var leftColumn = $('#leftcolumn');
-                var isLeftColumnOnTop = leftColumn.hasClass(aboveClass);
-
-                if(isLeftColumnOnTop){
-                    backdropService.close();
-                    leftColumn.removeClass(aboveClass);
-                }
-            }
-
             /** Returns the css classses assigned to the node (div element) */
             $scope.getNodeCssClass = function (node) {
                 if (!node) {
@@ -369,8 +357,6 @@ function umbTreeDirective($q, $rootScope, treeService, notificationsService, use
               defined on the tree
             */
             $scope.select = function (n, ev) {
-
-                closeBackdrop()
                 
                 if (n.metaData && n.metaData.noAccess === true) {
                     ev.preventDefault();
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js b/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js
index c628e3a5b1..c8553ec02a 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js
@@ -30,7 +30,7 @@ function navigationService($routeParams, $location, $q, $injector, eventsService
         var element = $(args.element);
         element.addClass('above-backdrop');
     });
-    
+
 
     //A list of query strings defined that when changed will not cause a reload of the route
     var nonRoutingQueryStrings = ["mculture", "cculture", "csegment", "lq", "sr"];
@@ -118,19 +118,28 @@ function navigationService($routeParams, $location, $q, $injector, eventsService
     }
 
     function closeBackdrop() {
-        var aboveClass = 'above-backdrop';
-        var leftColumn = $('#leftcolumn');
-        var isLeftColumnOnTop = leftColumn.hasClass(aboveClass);
 
-        if(isLeftColumnOnTop){
-            backdropService.close();
-            leftColumn.removeClass(aboveClass);
+        var tourIsOpen = document.body.classList.contains("umb-tour-is-visible");
+        if (tourIsOpen) {
+            return;
+        }
+
+        var aboveClass = "above-backdrop";
+        var leftColumn = document.getElementById("leftcolumn");
+
+        if (leftColumn) {
+            var isLeftColumnOnTop = leftColumn.classList.contains(aboveClass);
+
+            if (isLeftColumnOnTop) {
+                backdropService.close();
+                leftColumn.classList.remove(aboveClass);
+            }
         }
     }
 
     function showBackdrop() {
         var backDropOptions = {
-            'element': $('#leftcolumn')[0]
+            'element': document.getElementById('leftcolumn')
         };
         backdropService.open(backDropOptions);
     }
@@ -328,7 +337,7 @@ function navigationService($routeParams, $location, $q, $injector, eventsService
             appState.setGlobalState("showTray", false);
         },
 
-        /**     
+        /**
          * @ngdoc method
          * @name umbraco.services.navigationService#syncTree
          * @methodOf umbraco.services.navigationService
@@ -361,14 +370,14 @@ function navigationService($routeParams, $location, $q, $injector, eventsService
             });
         },
 
-        /**     
+        /**
          * @ngdoc method
          * @name umbraco.services.navigationService#hasTree
          * @methodOf umbraco.services.navigationService
          *
          * @description
          * Checks if a tree with the given alias exists.
-         * 
+         *
          * @param {String} treeAlias the tree alias to check
          */
         hasTree: function (treeAlias) {