From 2ca6e8be9a943e7a176d5c41274a220d349b286c Mon Sep 17 00:00:00 2001
From: Zsolt <zla@umbraco.com>
Date: Wed, 4 Oct 2017 11:17:44 +0200
Subject: [PATCH] Implemented SVG backdrop

---
 .../application/umbtour.directive.js          | 31 +++++++++++++++++++
 .../src/controllers/main.controller.js        |  2 +-
 .../less/components/application/umb-tour.less | 29 ++++++++++-------
 .../components/application/umb-tour.html      |  8 +++++
 4 files changed, 57 insertions(+), 13 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js
index 369996ae46..827ad44089 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js
+++ b/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);
+
                 });
 
             }
diff --git a/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js b/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js
index bd1f98d5f9..ba782c2ab4 100644
--- a/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js
+++ b/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);
 
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-tour.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-tour.less
index e62706d1c0..eb0094ff11 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-tour.less
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-tour.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-tour.html
index b71aae0059..16559490e2 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-tour.html
+++ b/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>
\ No newline at end of file