Implemented SVG backdrop

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

@@ -82,6 +82,37 @@
           
                     dot.css({top: offset.top + (height / 2), left: offset.left + width});
 
+                    // SVG + jQuery backdrop
+
+                    var target = $(scope.currentStep.element);
+                    
+                    // Rounding numbers
+                    var topDistance = offset.top.toFixed();
+                    var topAndHeight = (offset.top + height).toFixed();
+                    
+                    // Convert classes into variables
+                    var rectLeft = $(".rect-left")
+                    var rectTop = $(".rect-top")
+                    var rectBot = $(".rect-bot")
+                    var rectRight = $(".rect-right")
+
+                    // SVG rect at the left side of the canvas
+                    rectLeft.css("width", offset.left);
+                    
+                    // SVG rect at the top of the canvas
+                    rectTop.css("height", offset.top);
+                    rectTop.css("x", offset.left);
+                    
+                    // SVG rect at the bottom of the canvas
+                    rectBot.css("height", "100%");
+                    rectBot.css("y", topAndHeight );
+                    rectBot.css("x", offset.left);
+                    
+                    // SVG rect at the right side of the canvas
+                    rectRight.css("x", offset.left + width );
+                    rectRight.css("y", topDistance );
+                    rectRight.css("height", height);
+
                 });
 
             }

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

@@ -263,7 +263,7 @@ function MainController($scope, $rootScope, $location, $routeParams, $timeout, $
         ]
     };
 
-    //tourService.startTour(testTour);
+    tourService.startTour(testTour);
 
 }
 

src/Umbraco.Web.UI.Client/src/less/components/application/umb-tour.less

@@ -1,14 +1,3 @@
-.umb-tour__backdrop {
-    position: fixed;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    z-index: 2000;
-    background: @black;
-    opacity: 0.3;
-}
-
 .umb-tour__popover {
     position: fixed;
     top: 50%;
@@ -17,7 +6,7 @@
     padding: 20px;
     width: 200px;
     height: 200px;
-    z-index: 2000;
+    z-index: 10000;
     transform: translate(-50%, -50%);
 }
 
@@ -40,4 +29,20 @@
     background: red;
     border-radius: 50%;
     transform: translate(-50%, -50%);
+}
+
+.umb-tour__canvas {
+    height: 100%;
+    width: 100%;
+    position: fixed;
+    z-index: 9999;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+}
+
+.umb-tour__rect {
+    position: absolute;
+    pointer-events: all;
+    margin: 0;
 }

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

@@ -29,5 +29,13 @@
     <!-- Dot -->
     <div class="umb-tour__dot"></div>
 
+    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="umb-tour__canvas">
+        
+        <rect class="rect-left umb-tour__rect" height="100%" opacity="0.4"/>
+        <rect class="rect-top umb-tour__rect" width="100%" opacity="0.4"/>
+        <rect class="rect-bot umb-tour__rect" width="100%" opacity="0.4"/>
+        <rect class="rect-right umb-tour__rect" height="100%" width="100%" opacity="0.4"/>
+    
+    </svg>
 
 </div>