From 6d5820c7376d6b86d100484feb7e932fb95a5caa Mon Sep 17 00:00:00 2001
From: Michael Asimakopoulos <m.asimakopoulos@gmail.com>
Date: Thu, 17 Dec 2015 01:09:24 +0200
Subject: [PATCH] mask colour applied using ng-style instead of jquery

---
 dist/nz-tour.js     | 19 ++++++-------------
 dist/nz-tour.min.js |  2 +-
 src/nz-tour.js      | 19 ++++++-------------
 3 files changed, 13 insertions(+), 27 deletions(-)

diff --git a/dist/nz-tour.js b/dist/nz-tour.js
index 6365f26..e24d3c3 100755
--- a/dist/nz-tour.js
+++ b/dist/nz-tour.js
@@ -278,16 +278,16 @@
                 '           <div id="nzTour-inner-content"></div>',
                 '        </div>',
                 '        <div id="nzTour-actions">',
-                '            <button id="nzTour-previous" ng-show="view.step > 0" ng-click="previous()" class="ng-hide">{{view.previousText}}</button>',
-                '            <button id="nzTour-next" ng-show="view.step >= 0" ng-click="next()" class="success" class="ng-hide">{{view.nextText}}</button>',
+                '            <button id="nzTour-previous" ng-show="view.step > 0" ng-click="previous()">{{view.previousText}}</button>',
+                '            <button id="nzTour-next" ng-show="view.step >= 0" ng-click="next()" class="success">{{view.nextText}}</button>',
                 '        </div>',
                 '    </div>',
                 '</div>',
                 '<div class="nzTour-masks" ng-show="current.tour.config.mask.visible" ng-click="tryStop()">',
-                '    <div class="mask top"></div>',
-                '    <div class="mask right"></div>',
-                '    <div class="mask bottom"></div>',
-                '    <div class="mask left"></div>',
+                '    <div class="mask top" ng-style="{\'background-color\': current.tour.config.mask.color}"></div>',
+                '    <div class="mask right" ng-style="{\'background-color\': current.tour.config.mask.color}"></div>',
+                '    <div class="mask bottom" ng-style="{\'background-color\': current.tour.config.mask.color}"></div>',
+                '    <div class="mask left" ng-style="{\'background-color\': current.tour.config.mask.color}"></div>',
                 '</div>'
             ].join(' '),
             link: function($scope, el) {
@@ -343,13 +343,6 @@
                     margin = 7;
                 }
 
-                // Mask Background Color
-                els.masks_top.add(els.masks_right).add(els.masks_bottom).add(els.masks_left).css({
-                    'background-color': config.mask.color
-                });
-
-
-
                 // Step Update Listener
                 var stepUpdater = $scope.$on('step', updateStep);
                 // Thottle for 60fps
diff --git a/dist/nz-tour.min.js b/dist/nz-tour.min.js
index c03573b..cd06415 100644
--- a/dist/nz-tour.min.js
+++ b/dist/nz-tour.min.js
@@ -1 +1 @@
-!function(){function t(t,e,r,n){t[_removeEventListener](s+e,"wheel"==i?r:o,n||!1)}function e(t,e,r,a){t[n](s+e,"wheel"==i?r:o,a||!1)}function o(t){!t&&(t=window.event);var e={originalEvent:t,target:t.target||t.srcElement,type:"wheel",deltaMode:"MozMousePixelScroll"==t.type?0:1,deltaX:0,deltaZ:0,preventDefault:function(){t.preventDefault?t.preventDefault():t.returnValue=!1}};return"mousewheel"==i?(e.deltaY=-1/40*t.wheelDelta,t.wheelDeltaX&&(e.deltaX=-1/40*t.wheelDeltaX)):e.deltaY=t.detail,callback(e)}var r=angular.module("nzTour",[]);if(r.factory("nzTour",["$q","$rootScope","$compile","$timeout",function(t,e,o,r){function n(e){return e||t.reject("No Tour Specified!"),e.steps.length||t.reject("No steps were found in that tour!"),k.current?i().then(function(){return c(e)}):c(e)}function i(){return p().then(function(){return u(!1)}).then(function(){return k.current.promise.reject(),k.current=!1,!0})}function s(){k.current&&v()}function a(){return k.current||k.current.reject(),p().then(m).then(function(){k.current.step++}).then(g)}function f(){return p().then(function(){return k.current.step>0?(k.current.step--,!0):t.reject()}).then(g)}function l(e){var o=t.defer();return e>0&&e<=k.current.tour.steps.length?p().then(function(){k.current.step=e-1}).then(g):(o.reject(),o.promise)}function c(e){e.config=angular.extendDeep({},k.config,e.config);var o=function(t){if(!angular.isArray(t))return!1;for(var e=0;e<t.length;e+=1)if(-1===k.config.placementPriority.indexOf(t[e]))return!1;return!0};return o(e.config.placementPriority)||(e.config.placementPriority=k.config.placementPriority),angular.forEach(e.steps,function(t){t.placementPriority&&(o(t.placementPriority)||delete t.placementPriority)}),k.current={tour:e,step:0,promise:t.defer()},u(!0,e),g(),k.current.promise.promise}function u(e,n){var i=t.defer();return e?(k.box=angular.element(o('<nz-tour class="hidden"></nz-tour>')(k)),angular.element(k.body).append(k.box),k.box.removeClass("hidden"),i.resolve()):(k.box.addClass("hidden"),r(function(){k.cleanup(),i.resolve()},k.current.tour.config.animationDuration)),i.promise}function g(){return h().then(d)}function h(){var e=t.defer();return k.current.tour.steps[k.current.step].before?k.current.tour.steps[k.current.step].before():(e.resolve(),e.promise)}function d(){var e=t.defer();return k.$broadcast("step",k.current.step),e.resolve(),e.promise}function p(){var e=t.defer();return k.current.tour.steps[k.current.step].after?k.current.tour.steps[k.current.step].after():(e.resolve(),e.promise)}function m(){var e=t.defer();return k.current.step==k.current.tour.steps.length-1&&(w(),e.reject()),e.resolve(),e.promise}function w(){u(!1).then(function(){return k.current.promise.resolve(),k.current=!1,!0})}function v(){}function x(t,e){var o=!1;return function(){o||(t.call(),o=!0,r(function(){o=!1},e))}}function b(t,e,o){var r;return function(){var n=this,i=arguments,s=function(){r=null,o||t.apply(n,i)},a=o&&!r;clearTimeout(r),r=setTimeout(s,e),a&&t.apply(n,i)}}var k=e.$new();return angular.extend(k,{config:{mask:{visible:!0,clickThrough:!1,clickExit:!1,scrollThrough:!0,color:"rgba(0,0,0,.7)"},dark:!1,scrollBox:-1!=navigator.userAgent.indexOf("AppleWebKit")?"body":"html",previousText:"Previous",nextText:"Next",finishText:"Finish",animationDuration:400,placementPriority:["bottom","right","top","left"],disableHotkeys:!1},current:!1,body:angular.element("body"),box:!1,start:n,stop:i,pause:s,next:a,previous:f,gotoStep:l,throttle:x,debounce:b}),window.nzTour=k,k}]),r.directive("nzTour",["$q",function(t){return{template:['<div id="nzTour-box-wrap">','   <div id="nzTour-box">','        <div id="nzTour-tip" class="top center"></div>','        <div id="nzTour-step">{{view.step + 1}}</div>','        <div id="nzTour-length">{{view.length}}</div>','        <div id="nzTour-close" ng-click="stop()">&#10005</div>','        <div id="nzTour-content">','           <div id="nzTour-inner-content"></div>',"        </div>",'        <div id="nzTour-actions">','            <button id="nzTour-previous" ng-show="view.step > 0" ng-click="previous()" class="ng-hide">{{view.previousText}}</button>','            <button id="nzTour-next" ng-show="view.step >= 0" ng-click="next()" class="success" class="ng-hide">{{view.nextText}}</button>',"        </div>","    </div>","</div>",'<div class="nzTour-masks" ng-show="current.tour.config.mask.visible" ng-click="tryStop()">','    <div class="mask top"></div>','    <div class="mask right"></div>','    <div class="mask bottom"></div>','    <div class="mask left"></div>',"</div>"].join(" "),link:function(e,o){function r(t){if(t.which>=49&&t.which<=57)return void e.gotoStep(t.which-48);switch(t.which){case 37:return e.previous(),void f(t);case 39:return e.next(),void f(t);case 27:return e.stop(),void f(t);case 38:case 40:return void L()}}function n(t){return t.stopPropagation(t),t.preventDefault(t),t.returnValue=!1,!1}function i(t){var e=D.masks_top.add(D.masks_right).add(D.masks_bottom).add(D.masks_left);t?(_=!0,e.css("transition","all "+x.animationDuration+"ms ease")):(_=!1,e.css("transition","all 0"))}function s(t){var e=D.wrap.add(D.box).add(D.tip);t?e.css("transition","all "+x.animationDuration+"ms ease"):e.css("transition","all 0")}function a(t){var e;e="DOMMouseScroll"==t.type?-40*t.detail:t.wheelDelta;var o=e>0,r=D.content.scrollTop();return o&&!r?f(t):o||D.innerContent.height()-D.content.height()!=r?void 0:f(t)}function f(t){return t.stopPropagation(t),t.preventDefault(t),t.returnValue=!1,!1}function l(){k||(y=!0,i(!1),P(),g().then(h).then(d).then(h).then(m))}function c(){y=!1,i(!0)}function u(t,o){D.target=!1;var r=e.current.tour.steps;return e.view={step:o,length:r.length,previousText:x.previousText,nextText:o==r.length-1?x.finishText:x.nextText},D.innerContent.html(r[o].content),D.content.scrollTop(0),k=!0,g(o).then(h).then(d).then(h).then(m).then(function(){k=!1})}function g(o){var r=t.defer();if(D.target)r.resolve(b);else{var n=angular.element(e.current.tour.steps[o].target);n.length?(D.target=angular.element(n[0]),r.resolve(D.target)):r.resolve(!1)}return r.promise}function h(){var e=t.defer();return D.target?(E.window={width:D.window.width(),height:D.window.height()},E.scroll={width:D.scroll.outerWidth(),height:D.scroll.outerHeight(),offset:D.scroll.offset(),scroll:{top:D.scroll.scrollTop(),left:D.scroll.scrollLeft()}},angular.forEach(E.scroll.offset,function(t,e){E.scroll.offset[e]=Math.ceil(t)}),E.scroll.height=E.scroll.height+E.scroll.offset.top>E.window.height?E.window.height:E.scroll.height,E.scroll.width=E.scroll.width+E.scroll.offset.left>E.window.width?E.window.width:E.scroll.width,E.scroll.offset.toBottom=E.scroll.height+E.scroll.offset.top,E.scroll.offset.toRight=E.scroll.width+E.scroll.offset.left,E.scroll.offset.fromBottom=E.window.height-E.scroll.offset.top-E.scroll.height,E.scroll.offset.fromRight=E.window.width-E.scroll.offset.left-E.scroll.width,E.target={width:D.target.outerWidth(),height:D.target.outerHeight(),offset:D.target.offset()},("body"==x.scrollBox||"html"==x.scrollBox)&&(E.target.offset.top-=E.scroll.scroll.top),angular.forEach(E.target.offset,function(t,e){E.target.offset[e]=Math.ceil(t)}),E.target.offset.toBottom=E.target.offset.top+E.target.height,E.target.offset.toRight=E.target.offset.left+E.target.width,E.target.offset.fromBottom=E.window.height-E.target.offset.top-E.target.height,E.target.offset.fromRight=E.window.width-E.target.offset.left-E.target.width,E.target.margins={offset:{top:E.target.offset.top-T,left:E.target.offset.left-T,toBottom:E.target.offset.toBottom+T,toRight:E.target.offset.toRight+T,fromBottom:E.target.offset.fromBottom-T,fromRight:E.target.offset.fromRight-T},height:E.target.height+2*T,right:E.target.offset.fromRight+2*T},e.resolve(),e.promise):(e.resolve(),e.promise)}function d(){var e=t.defer();if(!D.target)return e.resolve(),e.promise;var o=p();return o?D.scroll.animate({scrollTop:o},y?0:x.animationDuration,function(){e.resolve()}):e.resolve(),e.promise}function p(){return E.target.margins.height>E.scroll.height?E.target.offset.toBottom-z<E.scroll.offset.top?E.scroll.scroll.top-(E.scroll.offset.top-(E.target.offset.toBottom-z)):E.target.offset.top+z>E.scroll.offset.toBottom?E.scroll.scroll.top+(E.target.offset.top+z-E.scroll.offset.toBottom):!1:E.target.margins.offset.top<E.scroll.offset.top?E.scroll.scroll.top-(E.scroll.offset.top-E.target.margins.offset.top):E.target.margins.offset.toBottom>E.scroll.offset.toBottom?E.scroll.scroll.top+(E.target.margins.offset.toBottom-E.scroll.offset.toBottom):!1}function m(){return t.all([w(),v()])}function w(){function o(){return E.target.margins.offset.fromBottom>z?E.target.width>B?(s("bottom","center"),!0):E.target.offset.fromRight+E.target.width>B?(s("bottom","left"),!0):(s("bottom","right"),!0):!1}function r(){return E.target.margins.offset.fromRight>B?E.target.margins.height>E.scroll.height?E.target.offset.top>E.window.height/2?(a("right","top"),!0):E.target.offset.fromBottom>E.window.height/2?(a("right","bottom"),!0):(a("right","center",!0),!0):E.target.height>z?(a("right","center"),!0):E.target.offset.fromBottom+E.target.height>z?(a("right","top"),!0):(a("right","bottom"),!0):!1}function n(){return E.target.margins.offset.left>B?E.target.margins.height>E.scroll.height?(a("left","center",!0),!0):E.target.height>z?(a("left","center"),!0):E.target.offset.fromBottom+E.target.height>z?(a("left","top"),!0):(a("left","bottom"),!0):!1}function i(){return E.target.margins.offset.top>z?E.target.width>B?(s("top","center"),!0):E.target.offset.fromRight+E.target.width>B?(s("top","left"),!0):(s("top","right"),!0):!1}function s(t,e){var o,r,n,i,s;"top"==t?(o=E.target.margins.offset.top,s="bottom",i="-100%"):(o=E.target.margins.offset.toBottom,s="top",i="0"),"right"==e?(r=E.target.offset.toRight,n="-100%"):"center"==e?(r=E.target.offset.left+E.target.width/2,n="-50%"):(r=E.target.offset.left,n="0"),D.wrap.css({left:r+"px",top:o+"px",transform:"translate("+n+","+i+")"}),D.tip.attr("class","vertical "+s+" "+e)}function a(t,e,o){var r,n,i,s,a;"right"==t?(n=E.target.margins.offset.toRight,a="left",i="0"):(n=E.target.margins.offset.left,a="right",i="-100%"),o?(r=E.window.height/2,s="-50%"):"top"==e?(r=E.target.offset.top,s="0"):"center"==e?(r=E.target.offset.top+E.target.height/2,s="-50%"):(r=E.target.offset.toBottom,s="-100%"),D.wrap.css({left:n+"px",top:r+"px",transform:"translate("+i+","+s+")"}),D.tip.attr("class","horizontal "+a+" "+e)}function f(t,e){var o,r,n,i;"top"==t?(o=E.target.margins.offset.top<E.scroll.offset.top?T:E.target.offset.top,n="0"):(o=E.target.margins.offset.toBottom>E.scroll.offset.toBottom?E.scroll.offset.toBottom-T:E.target.offset.toBottom,n="-100%"),"right"==e?(r=E.target.offset.left+E.target.width,i="-100%"):"center"==e?(r=E.target.offset.left+E.target.width/2,i="-50%"):(r=E.target.offset.left,i="0"),D.wrap.css({left:r+"px",top:o+"px",transform:"translate("+i+","+n+")"}),D.tip.attr("class","hidden")}function l(){D.wrap.css({left:"50%",top:"50%",transform:"translate(-50%, -50%)",margin:"0"}),D.tip.attr("class","hidden")}var c=e.current.tour.steps[e.current.step],u=t.defer();if(!D.target)return void l();var g={bottom:o,right:r,left:n,top:i},h=!1;return angular.forEach(c.placementPriority||x.placementPriority,function(t){!h&&g[t]()&&(h=!0,u.resolve())}),h?u.promise:(f("bottom","center"),void u.resolve())}function v(){var e=t.defer();return D.target?(D.masks_top.css({height:E.target.offset.top+"px",top:E.target.offset.top<0?E.target.offset.top+"px":0}),D.masks_bottom.css({height:E.target.offset.fromBottom+"px",bottom:E.target.offset.fromBottom<0?E.target.offset.fromBottom+"px":0}),D.masks_left.css({top:E.target.offset.top+"px",height:E.target.height+"px",width:E.target.offset.left+"px"}),D.masks_right.css({top:E.target.offset.top+"px",height:E.target.height+"px",width:E.target.offset.fromRight+"px"}),e.resolve(),e.promise):(D.masks_top.css({height:"0px"}),D.masks_bottom.css({height:"0px"}),D.masks_left.css({top:"0px",height:"100%",width:"0px"}),void D.masks_right.css({top:"0px",height:"100%",width:"0px"}))}var x=e.current.tour.config,b=!1,k=!1,T=15,z=120,B=250,y=!1,_=!0,D={window:angular.element(window),wrap:o.find("#nzTour-box-wrap"),box:o.find("#nzTour-box"),tip:o.find("#nzTour-tip"),step:o.find("#nzTour-step"),close:o.find("#nzTour-close"),content:o.find("#nzTour-content"),innerContent:o.find("#nzTour-inner-content"),actions:o.find("#nzTour-actions"),previous:o.find("#nzTour-previous"),next:o.find("#nzTour-next"),masks_wrap:o.find(".nzTour-masks"),masks_top:o.find(".nzTour-masks .top"),masks_right:o.find(".nzTour-masks .right"),masks_bottom:o.find(".nzTour-masks .bottom"),masks_left:o.find(".nzTour-masks .left"),scroll:angular.element(x.scrollBox),target:!1},E={window:{},scroll:{},target:{}};i(!0),s(!0),D.masks_wrap.css("pointer-events",x.mask.clickThrough?"none":"all"),x.dark&&(D.box.addClass("dark-box"),T=7),D.masks_top.add(D.masks_right).add(D.masks_bottom).add(D.masks_left).css({"background-color":x.mask.color});var M=e.$on("step",u),L=e.throttle(l,16),P=e.debounce(c,100);0==x.disableHotkeys&&(D.window.bind("keydown",r),D.window.bind("resize scroll",L),window.addWheelListener(window,L),D.content.bind("scroll",a),window.addWheelListener(D.content[0],a),x.mask.scrollThrough===!1&&window.addWheelListener(D.masks_wrap[0],n)),e.cleanup=function(){M(),D.window.unbind("keydown",r),D.window.unbind("resize scroll",L),window.removeWheelListener(window,L),D.content.unbind("scroll",a),window.removeWheelListener(D.content[0],a),x.mask.scrollThrough===!1&&window.removeWheelListener(D.masks_wrap[0],n),D={},o.remove()},window.tanner=e,e.tryStop=function(){x.mask.clickExit&&e.stop()}}}}]),window.angular.extendDeep=function a(t){return angular.forEach(arguments,function(e){e!==t&&angular.forEach(e,function(e,o){t[o]&&t[o].constructor&&t[o].constructor===Object?a(t[o],e):t[o]=e})}),t},!window.addWheelListener){var n,i,s="";window.addEventListener?(n="addEventListener",_removeEventListener="removeEventListener"):(n="attachEvent",_removeEventListener="detachEvent",s="on"),i="onwheel"in document.createElement("div")?"wheel":void 0!==document.onmousewheel?"mousewheel":"DOMMouseScroll",window.addWheelListener=function(t,o,r){e(t,i,o,r),"DOMMouseScroll"==i&&e(t,"MozMousePixelScroll",o,r)},window.removeWheelListener=function(e,o,r){t(e,i,o,r),"DOMMouseScroll"==i&&t(e,"MozMousePixelScroll",o,r)}}}();
\ No newline at end of file
+!function(){function t(t,e,r,n){t[_removeEventListener](s+e,"wheel"==i?r:o,n||!1)}function e(t,e,r,a){t[n](s+e,"wheel"==i?r:o,a||!1)}function o(t){!t&&(t=window.event);var e={originalEvent:t,target:t.target||t.srcElement,type:"wheel",deltaMode:"MozMousePixelScroll"==t.type?0:1,deltaX:0,deltaZ:0,preventDefault:function(){t.preventDefault?t.preventDefault():t.returnValue=!1}};return"mousewheel"==i?(e.deltaY=-1/40*t.wheelDelta,t.wheelDeltaX&&(e.deltaX=-1/40*t.wheelDeltaX)):e.deltaY=t.detail,callback(e)}var r=angular.module("nzTour",[]);if(r.factory("nzTour",["$q","$rootScope","$compile","$timeout",function(t,e,o,r){function n(e){return e||t.reject("No Tour Specified!"),e.steps.length||t.reject("No steps were found in that tour!"),k.current?i().then(function(){return c(e)}):c(e)}function i(){return p().then(function(){return u(!1)}).then(function(){return k.current.promise.reject(),k.current=!1,!0})}function s(){k.current&&v()}function a(){return k.current||k.current.reject(),p().then(m).then(function(){k.current.step++}).then(g)}function f(){return p().then(function(){return k.current.step>0?(k.current.step--,!0):t.reject()}).then(g)}function l(e){var o=t.defer();return e>0&&e<=k.current.tour.steps.length?p().then(function(){k.current.step=e-1}).then(g):(o.reject(),o.promise)}function c(e){e.config=angular.extendDeep({},k.config,e.config);var o=function(t){if(!angular.isArray(t))return!1;for(var e=0;e<t.length;e+=1)if(-1===k.config.placementPriority.indexOf(t[e]))return!1;return!0};return o(e.config.placementPriority)||(e.config.placementPriority=k.config.placementPriority),angular.forEach(e.steps,function(t){t.placementPriority&&(o(t.placementPriority)||delete t.placementPriority)}),k.current={tour:e,step:0,promise:t.defer()},u(!0,e),g(),k.current.promise.promise}function u(e,n){var i=t.defer();return e?(k.box=angular.element(o('<nz-tour class="hidden"></nz-tour>')(k)),angular.element(k.body).append(k.box),k.box.removeClass("hidden"),i.resolve()):(k.box.addClass("hidden"),r(function(){k.cleanup(),i.resolve()},k.current.tour.config.animationDuration)),i.promise}function g(){return h().then(d)}function h(){var e=t.defer();return k.current.tour.steps[k.current.step].before?k.current.tour.steps[k.current.step].before():(e.resolve(),e.promise)}function d(){var e=t.defer();return k.$broadcast("step",k.current.step),e.resolve(),e.promise}function p(){var e=t.defer();return k.current.tour.steps[k.current.step].after?k.current.tour.steps[k.current.step].after():(e.resolve(),e.promise)}function m(){var e=t.defer();return k.current.step==k.current.tour.steps.length-1&&(w(),e.reject()),e.resolve(),e.promise}function w(){u(!1).then(function(){return k.current.promise.resolve(),k.current=!1,!0})}function v(){}function x(t,e){var o=!1;return function(){o||(t.call(),o=!0,r(function(){o=!1},e))}}function b(t,e,o){var r;return function(){var n=this,i=arguments,s=function(){r=null,o||t.apply(n,i)},a=o&&!r;clearTimeout(r),r=setTimeout(s,e),a&&t.apply(n,i)}}var k=e.$new();return angular.extend(k,{config:{mask:{visible:!0,clickThrough:!1,clickExit:!1,scrollThrough:!0,color:"rgba(0,0,0,.7)"},dark:!1,scrollBox:-1!=navigator.userAgent.indexOf("AppleWebKit")?"body":"html",previousText:"Previous",nextText:"Next",finishText:"Finish",animationDuration:400,placementPriority:["bottom","right","top","left"],disableHotkeys:!1},current:!1,body:angular.element("body"),box:!1,start:n,stop:i,pause:s,next:a,previous:f,gotoStep:l,throttle:x,debounce:b}),window.nzTour=k,k}]),r.directive("nzTour",["$q",function(t){return{template:['<div id="nzTour-box-wrap">','   <div id="nzTour-box">','        <div id="nzTour-tip" class="top center"></div>','        <div id="nzTour-step">{{view.step + 1}}</div>','        <div id="nzTour-length">{{view.length}}</div>','        <div id="nzTour-close" ng-click="stop()">&#10005</div>','        <div id="nzTour-content">','           <div id="nzTour-inner-content"></div>',"        </div>",'        <div id="nzTour-actions">','            <button id="nzTour-previous" ng-show="view.step > 0" ng-click="previous()">{{view.previousText}}</button>','            <button id="nzTour-next" ng-show="view.step >= 0" ng-click="next()" class="success">{{view.nextText}}</button>',"        </div>","    </div>","</div>",'<div class="nzTour-masks" ng-show="current.tour.config.mask.visible" ng-click="tryStop()">','    <div class="mask top" ng-style="{\'background-color\': current.tour.config.mask.color}"></div>','    <div class="mask right" ng-style="{\'background-color\': current.tour.config.mask.color}"></div>','    <div class="mask bottom" ng-style="{\'background-color\': current.tour.config.mask.color}"></div>','    <div class="mask left" ng-style="{\'background-color\': current.tour.config.mask.color}"></div>',"</div>"].join(" "),link:function(e,o){function r(t){if(t.which>=49&&t.which<=57)return void e.gotoStep(t.which-48);switch(t.which){case 37:return e.previous(),void f(t);case 39:return e.next(),void f(t);case 27:return e.stop(),void f(t);case 38:case 40:return void L()}}function n(t){return t.stopPropagation(t),t.preventDefault(t),t.returnValue=!1,!1}function i(t){var e=D.masks_top.add(D.masks_right).add(D.masks_bottom).add(D.masks_left);t?(_=!0,e.css("transition","all "+x.animationDuration+"ms ease")):(_=!1,e.css("transition","all 0"))}function s(t){var e=D.wrap.add(D.box).add(D.tip);t?e.css("transition","all "+x.animationDuration+"ms ease"):e.css("transition","all 0")}function a(t){var e;e="DOMMouseScroll"==t.type?-40*t.detail:t.wheelDelta;var o=e>0,r=D.content.scrollTop();return o&&!r?f(t):o||D.innerContent.height()-D.content.height()!=r?void 0:f(t)}function f(t){return t.stopPropagation(t),t.preventDefault(t),t.returnValue=!1,!1}function l(){k||(y=!0,i(!1),P(),g().then(h).then(d).then(h).then(m))}function c(){y=!1,i(!0)}function u(t,o){D.target=!1;var r=e.current.tour.steps;return e.view={step:o,length:r.length,previousText:x.previousText,nextText:o==r.length-1?x.finishText:x.nextText},D.innerContent.html(r[o].content),D.content.scrollTop(0),k=!0,g(o).then(h).then(d).then(h).then(m).then(function(){k=!1})}function g(o){var r=t.defer();if(D.target)r.resolve(b);else{var n=angular.element(e.current.tour.steps[o].target);n.length?(D.target=angular.element(n[0]),r.resolve(D.target)):r.resolve(!1)}return r.promise}function h(){var e=t.defer();return D.target?(E.window={width:D.window.width(),height:D.window.height()},E.scroll={width:D.scroll.outerWidth(),height:D.scroll.outerHeight(),offset:D.scroll.offset(),scroll:{top:D.scroll.scrollTop(),left:D.scroll.scrollLeft()}},angular.forEach(E.scroll.offset,function(t,e){E.scroll.offset[e]=Math.ceil(t)}),E.scroll.height=E.scroll.height+E.scroll.offset.top>E.window.height?E.window.height:E.scroll.height,E.scroll.width=E.scroll.width+E.scroll.offset.left>E.window.width?E.window.width:E.scroll.width,E.scroll.offset.toBottom=E.scroll.height+E.scroll.offset.top,E.scroll.offset.toRight=E.scroll.width+E.scroll.offset.left,E.scroll.offset.fromBottom=E.window.height-E.scroll.offset.top-E.scroll.height,E.scroll.offset.fromRight=E.window.width-E.scroll.offset.left-E.scroll.width,E.target={width:D.target.outerWidth(),height:D.target.outerHeight(),offset:D.target.offset()},("body"==x.scrollBox||"html"==x.scrollBox)&&(E.target.offset.top-=E.scroll.scroll.top),angular.forEach(E.target.offset,function(t,e){E.target.offset[e]=Math.ceil(t)}),E.target.offset.toBottom=E.target.offset.top+E.target.height,E.target.offset.toRight=E.target.offset.left+E.target.width,E.target.offset.fromBottom=E.window.height-E.target.offset.top-E.target.height,E.target.offset.fromRight=E.window.width-E.target.offset.left-E.target.width,E.target.margins={offset:{top:E.target.offset.top-T,left:E.target.offset.left-T,toBottom:E.target.offset.toBottom+T,toRight:E.target.offset.toRight+T,fromBottom:E.target.offset.fromBottom-T,fromRight:E.target.offset.fromRight-T},height:E.target.height+2*T,right:E.target.offset.fromRight+2*T},e.resolve(),e.promise):(e.resolve(),e.promise)}function d(){var e=t.defer();if(!D.target)return e.resolve(),e.promise;var o=p();return o?D.scroll.animate({scrollTop:o},y?0:x.animationDuration,function(){e.resolve()}):e.resolve(),e.promise}function p(){return E.target.margins.height>E.scroll.height?E.target.offset.toBottom-z<E.scroll.offset.top?E.scroll.scroll.top-(E.scroll.offset.top-(E.target.offset.toBottom-z)):E.target.offset.top+z>E.scroll.offset.toBottom?E.scroll.scroll.top+(E.target.offset.top+z-E.scroll.offset.toBottom):!1:E.target.margins.offset.top<E.scroll.offset.top?E.scroll.scroll.top-(E.scroll.offset.top-E.target.margins.offset.top):E.target.margins.offset.toBottom>E.scroll.offset.toBottom?E.scroll.scroll.top+(E.target.margins.offset.toBottom-E.scroll.offset.toBottom):!1}function m(){return t.all([w(),v()])}function w(){function o(){return E.target.margins.offset.fromBottom>z?E.target.width>B?(s("bottom","center"),!0):E.target.offset.fromRight+E.target.width>B?(s("bottom","left"),!0):(s("bottom","right"),!0):!1}function r(){return E.target.margins.offset.fromRight>B?E.target.margins.height>E.scroll.height?E.target.offset.top>E.window.height/2?(a("right","top"),!0):E.target.offset.fromBottom>E.window.height/2?(a("right","bottom"),!0):(a("right","center",!0),!0):E.target.height>z?(a("right","center"),!0):E.target.offset.fromBottom+E.target.height>z?(a("right","top"),!0):(a("right","bottom"),!0):!1}function n(){return E.target.margins.offset.left>B?E.target.margins.height>E.scroll.height?(a("left","center",!0),!0):E.target.height>z?(a("left","center"),!0):E.target.offset.fromBottom+E.target.height>z?(a("left","top"),!0):(a("left","bottom"),!0):!1}function i(){return E.target.margins.offset.top>z?E.target.width>B?(s("top","center"),!0):E.target.offset.fromRight+E.target.width>B?(s("top","left"),!0):(s("top","right"),!0):!1}function s(t,e){var o,r,n,i,s;"top"==t?(o=E.target.margins.offset.top,s="bottom",i="-100%"):(o=E.target.margins.offset.toBottom,s="top",i="0"),"right"==e?(r=E.target.offset.toRight,n="-100%"):"center"==e?(r=E.target.offset.left+E.target.width/2,n="-50%"):(r=E.target.offset.left,n="0"),D.wrap.css({left:r+"px",top:o+"px",transform:"translate("+n+","+i+")"}),D.tip.attr("class","vertical "+s+" "+e)}function a(t,e,o){var r,n,i,s,a;"right"==t?(n=E.target.margins.offset.toRight,a="left",i="0"):(n=E.target.margins.offset.left,a="right",i="-100%"),o?(r=E.window.height/2,s="-50%"):"top"==e?(r=E.target.offset.top,s="0"):"center"==e?(r=E.target.offset.top+E.target.height/2,s="-50%"):(r=E.target.offset.toBottom,s="-100%"),D.wrap.css({left:n+"px",top:r+"px",transform:"translate("+i+","+s+")"}),D.tip.attr("class","horizontal "+a+" "+e)}function f(t,e){var o,r,n,i;"top"==t?(o=E.target.margins.offset.top<E.scroll.offset.top?T:E.target.offset.top,n="0"):(o=E.target.margins.offset.toBottom>E.scroll.offset.toBottom?E.scroll.offset.toBottom-T:E.target.offset.toBottom,n="-100%"),"right"==e?(r=E.target.offset.left+E.target.width,i="-100%"):"center"==e?(r=E.target.offset.left+E.target.width/2,i="-50%"):(r=E.target.offset.left,i="0"),D.wrap.css({left:r+"px",top:o+"px",transform:"translate("+i+","+n+")"}),D.tip.attr("class","hidden")}function l(){D.wrap.css({left:"50%",top:"50%",transform:"translate(-50%, -50%)",margin:"0"}),D.tip.attr("class","hidden")}var c=e.current.tour.steps[e.current.step],u=t.defer();if(!D.target)return void l();var g={bottom:o,right:r,left:n,top:i},h=!1;return angular.forEach(c.placementPriority||x.placementPriority,function(t){!h&&g[t]()&&(h=!0,u.resolve())}),h?u.promise:(f("bottom","center"),void u.resolve())}function v(){var e=t.defer();return D.target?(D.masks_top.css({height:E.target.offset.top+"px",top:E.target.offset.top<0?E.target.offset.top+"px":0}),D.masks_bottom.css({height:E.target.offset.fromBottom+"px",bottom:E.target.offset.fromBottom<0?E.target.offset.fromBottom+"px":0}),D.masks_left.css({top:E.target.offset.top+"px",height:E.target.height+"px",width:E.target.offset.left+"px"}),D.masks_right.css({top:E.target.offset.top+"px",height:E.target.height+"px",width:E.target.offset.fromRight+"px"}),e.resolve(),e.promise):(D.masks_top.css({height:"0px"}),D.masks_bottom.css({height:"0px"}),D.masks_left.css({top:"0px",height:"100%",width:"0px"}),void D.masks_right.css({top:"0px",height:"100%",width:"0px"}))}var x=e.current.tour.config,b=!1,k=!1,T=15,z=120,B=250,y=!1,_=!0,D={window:angular.element(window),wrap:o.find("#nzTour-box-wrap"),box:o.find("#nzTour-box"),tip:o.find("#nzTour-tip"),step:o.find("#nzTour-step"),close:o.find("#nzTour-close"),content:o.find("#nzTour-content"),innerContent:o.find("#nzTour-inner-content"),actions:o.find("#nzTour-actions"),previous:o.find("#nzTour-previous"),next:o.find("#nzTour-next"),masks_wrap:o.find(".nzTour-masks"),masks_top:o.find(".nzTour-masks .top"),masks_right:o.find(".nzTour-masks .right"),masks_bottom:o.find(".nzTour-masks .bottom"),masks_left:o.find(".nzTour-masks .left"),scroll:angular.element(x.scrollBox),target:!1},E={window:{},scroll:{},target:{}};i(!0),s(!0),D.masks_wrap.css("pointer-events",x.mask.clickThrough?"none":"all"),x.dark&&(D.box.addClass("dark-box"),T=7);var M=e.$on("step",u),L=e.throttle(l,16),P=e.debounce(c,100);0==x.disableHotkeys&&(D.window.bind("keydown",r),D.window.bind("resize scroll",L),window.addWheelListener(window,L),D.content.bind("scroll",a),window.addWheelListener(D.content[0],a),x.mask.scrollThrough===!1&&window.addWheelListener(D.masks_wrap[0],n)),e.cleanup=function(){M(),D.window.unbind("keydown",r),D.window.unbind("resize scroll",L),window.removeWheelListener(window,L),D.content.unbind("scroll",a),window.removeWheelListener(D.content[0],a),x.mask.scrollThrough===!1&&window.removeWheelListener(D.masks_wrap[0],n),D={},o.remove()},window.tanner=e,e.tryStop=function(){x.mask.clickExit&&e.stop()}}}}]),window.angular.extendDeep=function a(t){return angular.forEach(arguments,function(e){e!==t&&angular.forEach(e,function(e,o){t[o]&&t[o].constructor&&t[o].constructor===Object?a(t[o],e):t[o]=e})}),t},!window.addWheelListener){var n,i,s="";window.addEventListener?(n="addEventListener",_removeEventListener="removeEventListener"):(n="attachEvent",_removeEventListener="detachEvent",s="on"),i="onwheel"in document.createElement("div")?"wheel":void 0!==document.onmousewheel?"mousewheel":"DOMMouseScroll",window.addWheelListener=function(t,o,r){e(t,i,o,r),"DOMMouseScroll"==i&&e(t,"MozMousePixelScroll",o,r)},window.removeWheelListener=function(e,o,r){t(e,i,o,r),"DOMMouseScroll"==i&&t(e,"MozMousePixelScroll",o,r)}}}();
\ No newline at end of file
diff --git a/src/nz-tour.js b/src/nz-tour.js
index 16e3b7c..347f791 100755
--- a/src/nz-tour.js
+++ b/src/nz-tour.js
@@ -278,16 +278,16 @@
                 '           <div id="nzTour-inner-content"></div>',
                 '        </div>',
                 '        <div id="nzTour-actions">',
-                '            <button id="nzTour-previous" ng-show="view.step > 0" ng-click="previous()" class="ng-hide">{{view.previousText}}</button>',
-                '            <button id="nzTour-next" ng-show="view.step >= 0" ng-click="next()" class="success" class="ng-hide">{{view.nextText}}</button>',
+                '            <button id="nzTour-previous" ng-show="view.step > 0" ng-click="previous()">{{view.previousText}}</button>',
+                '            <button id="nzTour-next" ng-show="view.step >= 0" ng-click="next()" class="success">{{view.nextText}}</button>',
                 '        </div>',
                 '    </div>',
                 '</div>',
                 '<div class="nzTour-masks" ng-show="current.tour.config.mask.visible" ng-click="tryStop()">',
-                '    <div class="mask top"></div>',
-                '    <div class="mask right"></div>',
-                '    <div class="mask bottom"></div>',
-                '    <div class="mask left"></div>',
+                '    <div class="mask top" ng-style="{\'background-color\': current.tour.config.mask.color}"></div>',
+                '    <div class="mask right" ng-style="{\'background-color\': current.tour.config.mask.color}"></div>',
+                '    <div class="mask bottom" ng-style="{\'background-color\': current.tour.config.mask.color}"></div>',
+                '    <div class="mask left" ng-style="{\'background-color\': current.tour.config.mask.color}"></div>',
                 '</div>'
             ].join(' '),
             link: function($scope, el) {
@@ -343,13 +343,6 @@
                     margin = 7;
                 }
 
-                // Mask Background Color
-                els.masks_top.add(els.masks_right).add(els.masks_bottom).add(els.masks_left).css({
-                    'background-color': config.mask.color
-                });
-
-
-
                 // Step Update Listener
                 var stepUpdater = $scope.$on('step', updateStep);
                 // Thottle for 60fps