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 b6b40492be..0ffffb671e 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 @@ -6,6 +6,8 @@ function link(scope, el, attr, ctrl) { var popover; + var pulseElement; + var pulseTimer; scope.loadingStep = false; scope.elementNotFound = false; @@ -28,7 +30,8 @@ function onInit() { popover = el.find(".umb-tour__popover"); - popover.hide(); + pulseElement = el.find(".umb-tour__pulse"); + popover.hide(); scope.model.currentStepIndex = 0; backdropService.open({disableEventsOnClick: true}); startStep(); @@ -52,8 +55,12 @@ } function nextStep() { - popover.hide(); + + popover.hide(); + pulseElement.hide(); + $timeout.cancel(pulseTimer); scope.model.currentStepIndex++; + // make sure we don't go too far if(scope.model.currentStepIndex !== scope.model.steps.length) { startStep(); @@ -128,10 +135,12 @@ }, function () { // Animation complete. setPopoverPosition(element); + setPulsePosition(); backdropService.setHighlight(scope.model.currentStep.element, scope.model.currentStep.elementPreventClick); }); } else { setPopoverPosition(element); + setPulsePosition(); backdropService.setHighlight(scope.model.currentStep.element, scope.model.currentStep.elementPreventClick); } @@ -223,6 +232,25 @@ } + function setPulsePosition() { + if(scope.model.currentStep.event) { + + pulseTimer = $timeout(function(){ + + var clickElementSelector = scope.model.currentStep.eventElement ? scope.model.currentStep.eventElement : scope.model.currentStep.element; + var clickElement = $(clickElementSelector); + + var offset = clickElement.offset(); + var width = clickElement.outerWidth(); + var height = clickElement.outerHeight(); + + pulseElement.css({ "width": width, "height": height, "left": offset.left, "top": offset.top }); + pulseElement.fadeIn(); + + }, 5000); + } + } + function waitForPendingRerequests() { var deferred = $q.defer(); var timer = window.setInterval(function(){ @@ -305,6 +333,7 @@ scope.$on('$destroy', function () { $(window).off('resize.umbTour'); unbindEvent(); + $timeout.cancel(pulseTimer); }); } 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 5e405c0363..04f70e3d1c 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 @@ -5,6 +5,28 @@ height: 5px; } +.umb-tour__pulse { + position: fixed; + z-index: 10000; + display: none; + background: transparent; + box-shadow: 0 0 0 @green inset; + animation: pulse 2s infinite; + pointer-events: none; +} + +@keyframes pulse { + 0% { + box-shadow: 0 0 0 0 @green inset; + } + 70% { + box-shadow: 0 0 0 5px fade(@green, 80%) inset; + } + 100% { + box-shadow: 0 0 0 0 @green inset; + } +} + .umb-tour__popover { position: fixed; background: @white; 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 d00c81ae70..bda3517afd 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 @@ -1,6 +1,7 @@