driver.js - npm Package Compare versions

Comparing version 0.1.7 to 0.2.0

demo/scripts/demo.js

 /* eslint-disable */
 document.addEventListener("DOMContentLoaded", function () {
-  const tourDriver = new Driver({
-    animate: true,
-    opacity: 0.8,
-    padding: 5,
-    showButtons: true,
-  });
 
-  tourDriver.defineSteps([
+  const tourSteps = [
     {
@@ -16,6 +10,5 @@ element: '#driver-demo-head',
         description: 'This is just one use-case, make sure to check out the rest of the docs below.',
-        nextBtnText: 'Okay, Start!',
-      },
-    },
-    {
+        nextBtnText: 'Okay, Start!'
+      }
+    }, {
       element: '#logo_emoji',
@@ -25,14 +18,12 @@ popover: {
         description: 'You can use it to highlight literally anything, images, text, div, span, li etc.',
-        position: 'bottom',
-      },
-    },
-    {
+        position: 'bottom'
+      }
+    }, {
       element: '#name_driver',
       popover: {
         title: 'Why Driver?',
-        description: 'Because it lets you drive the user across the page',
-        position: 'bottom',
-      },
-    },
-    {
+        description: 'Because it let\'s you drive the user across the page',
+        position: 'bottom'
+      }
+    }, {
       element: '#driver-demo-head',
@@ -42,6 +33,5 @@ popover: {
         description: 'You may leave your mouse and use the <strong>arrow keys</strong> to move next and back or <strong>escape key</strong> anytime to close this',
-        position: 'bottom',
-      },
-    },
-    {
+        position: 'bottom'
+      }
+    }, {
       element: '#highlight_feature',
@@ -52,4 +42,3 @@ popover: {
       }
-    },
-    {
+    }, {
       element: '#feature_introductions_feature',
@@ -59,6 +48,5 @@ popover: {
         description: 'With it\'s powerful API you can use it to make programmatic or user driven feature introductions',
-        position: 'bottom',
+        position: 'bottom'
       }
-    },
-    {
+    }, {
       element: '#focus_shifters_feature',
@@ -68,6 +56,5 @@ popover: {
         description: 'If some element or part of the page needs user\'s interaction, you can just call the highlight method. Driver will take care of driving the user there',
-        position: 'bottom',
+        position: 'bottom'
       }
-    },
-    {
+    }, {
       element: '#customizable_feature',
@@ -77,6 +64,5 @@ popover: {
         description: 'Driver has a powerful API allowing you to customize the experience as much as you can.',
-        position: 'bottom',
+        position: 'bottom'
       }
-    },
-    {
+    }, {
       element: '#keyboard_feature',
@@ -86,13 +72,11 @@ popover: {
         description: 'Your users can control it with the arrow keys on keyboard, or escape to close it',
-        position: 'bottom',
+        position: 'bottom'
       }
-    },
-    {
+    }, {
       element: '#free_use_feature',
       popover: {
         title: 'MIT License',
-        description: 'I believe in open=source and thus Driver is completely free for both personal or commercial use'
+        description: 'I believe in open-source and thus Driver is completely free for both personal or commercial use'
       }
-    },
-    {
+    }, {
       element: '#lightweight_feature',
@@ -103,4 +87,3 @@ popover: {
       }
-    },
-    {
+    }, {
       element: '#examples_section',
@@ -111,18 +94,39 @@ popover: {
       }
-    },
-    {
+    }, {
       element: '#driver-demo-head',
       popover: {
         title: 'Quick Tour Ends',
-        description: 'This was just a sneak peak, have a look at the API section and examples to learn more!',
-      },
-    },
-  ]);
+        description: 'This was just a sneak peak, have a look at the API section and examples to learn more!'
+      }
+    }
+  ];
 
-  document.querySelector('.btn__example')
+  const animatedTourDriver = new Driver({
+    animate: true,
+    opacity: 0.8,
+    padding: 5,
+    showButtons: true,
+  });
+
+  const boringTourDriver = new Driver({
+    animate: false,
+    opacity: 0.8,
+    padding: 5,
+    showButtons: true,
+  });
+
+  boringTourDriver.defineSteps(tourSteps);
+  animatedTourDriver.defineSteps(tourSteps);
+
+  document.querySelector('#animated-tour')
     .addEventListener('click', () => {
-      tourDriver.start();
+      animatedTourDriver.start();
     });
 
+  document.querySelector('#boring-tour')
+    .addEventListener('click', () => {
+      boringTourDriver.start();
+    });
 
+
   document.querySelectorAll('pre code').forEach((element) => {
@@ -185,3 +189,3 @@ hljs.highlightBlock(element);
           description: 'You can add HTML in title or description also!',
-          position: 'left'
+          position: 'top'
         }
@@ -290,3 +294,3 @@ });
           description: 'Description for it',
-          position: 'left', // can be `top`, `left`, `right`, `bottom`
+          position: 'top', // can be `top`, `left`, `right`, `bottom`
         }
@@ -306,3 +310,3 @@ });
         description: 'Body of the popover',
-        position: 'bottom'
+        position: 'top'
       }
@@ -315,3 +319,3 @@ },
         description: 'Body of the popover',
-        position: 'left'
+        position: 'bottom'
       }
@@ -324,3 +328,3 @@ },
         description: 'Body of the popover',
-        position: 'right'
+        position: 'top'
       }
@@ -349,5 +353,11 @@ },
       e.preventDefault();
+      e.stopPropagation();
       featureIntroductionDriver.start();
     });
 
+  const newURL = location.href.split("?")[0];
+  if (newURL !== location.href) {
+    window.location = newURL;
+    window.location.href = newURL;
+  }
 });

dist/driver.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Driver=e():t.Driver=e()}(window,function(){return function(t){var e={};function i(o){if(e[o])return e[o].exports;var n=e[o]={i:o,l:!1,exports:{}};return t[o].call(n.exports,n,n.exports,i),n.l=!0,n.exports}return i.m=t,i.c=e,i.d=function(t,e,o){i.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:o})},i.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="/dist/",i(i.s=8)}([function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});e.OVERLAY_OPACITY=.75,e.OVERLAY_PADDING=10,e.OVERLAY_ANIMATE=!0,e.OVERLAY_ZINDEX="999999999",e.ESC_KEY_CODE=27,e.LEFT_KEY_CODE=37,e.RIGHT_KEY_CODE=39,e.ID_OVERLAY="driver-canvas-overlay";var o=e.ID_POPOVER="driver-popover-item",n=e.CLASS_POPOVER_TIP="driver-popover-tip",s=e.CLASS_POPOVER_TITLE="driver-popover-title",h=e.CLASS_POPOVER_DESCRIPTION="driver-popover-description",r=e.CLASS_POPOVER_FOOTER="driver-popover-footer",l=e.CLASS_CLOSE_BTN="driver-close-btn",a=e.CLASS_NEXT_STEP_BTN="driver-next-btn",d=e.CLASS_PREV_STEP_BTN="driver-prev-btn";e.CLASS_BTN_DISABLED="driver-disabled",e.POPOVER_HTML='\n  <div id="'+o+'">\n    <div class="'+n+'"></div>\n    <div class="'+s+'">Popover Title</div>\n    <div class="'+h+'">Popover Description</div>\n    <div class="'+r+'">\n      <a href="javascript:void(0)" class="'+l+'">Close</a>\n      <span class="driver-btn-group">\n        <a class="'+d+'" href="javascript:void(0)">&larr; Previous</a>\n        <a class="'+a+'" href="javascript:void(0)">Next &rarr;</a>\n      </span>\n    </div>\n  </div>'},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var o,n=function(){function t(t,e){for(var i=0;i<e.length;i++){var o=e[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,i,o){return i&&t(e.prototype,i),o&&t(e,o),e}}(),s=i(2),h=(o=s)&&o.__esModule?o:{default:o};var r=function(){function t(e,i,o,n,s,h){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.node=e,this.document=h,this.window=s,this.options=i,this.overlay=n,this.popover=o,this.highlightFinished=!1}return n(t,[{key:"getScreenCoordinates",value:function(){var t=this.node,e=this.document.documentElement.offsetLeft,i=this.document.documentElement.offsetTop;if(t.offsetParent)do{e+=t.offsetLeft,i+=t.offsetTop}while(t=t.offsetParent);return{x:e,y:i}}},{key:"isInView",value:function(){for(var t=this.node.offsetTop,e=this.node.offsetLeft,i=this.node.offsetWidth,o=this.node.offsetHeight,n=this.node;n.offsetParent;)t+=(n=n.offsetParent).offsetTop,e+=n.offsetLeft;return t>=this.window.pageYOffset&&e>=this.window.pageXOffset&&t+o<=this.window.pageYOffset+this.window.innerHeight&&e+i<=this.window.pageXOffset+this.window.innerWidth}},{key:"scrollManually",value:function(){var t=this.node.getBoundingClientRect().top+this.window.pageYOffset-this.window.innerHeight/2;this.window.scrollTo(0,t)}},{key:"bringInView",value:function(){if(!this.isInView())if(this.node.scrollIntoView)try{this.node.scrollIntoView(this.options.scrollIntoViewOptions||{behavior:"smooth",block:"center"})}catch(t){this.scrollManually()}else this.scrollManually()}},{key:"getCalculatedPosition",value:function(){var t=this.getScreenCoordinates(),e=new h.default({left:Number.MAX_VALUE,top:Number.MAX_VALUE,right:0,bottom:0});return"number"==typeof t.x&&"number"==typeof t.y&&(this.node.offsetWidth>0||this.node.offsetHeight>0)&&(e.left=Math.min(e.left,t.x),e.top=Math.min(e.top,t.y),e.right=Math.max(e.right,t.x+this.node.offsetWidth),e.bottom=Math.max(e.bottom,t.y+this.node.offsetHeight)),e}},{key:"onDeselected",value:function(){this.hidePopover(),this.highlightFinished=!1,this.options.onDeselected&&this.options.onDeselected(this)}},{key:"onHighlightStarted",value:function(){this.showPopover(),this.highlightFinished=!1,this.options.onHighlightStarted&&this.options.onHighlightStarted(this)}},{key:"onHighlighted",value:function(){this.showPopover(),this.highlightFinished=!0;var t=this.overlay.getLastHighlightedElement(),e=this.popover;this.node!==(t&&t.node)&&(e&&!e.isInView()&&e.bringInView(),this.isInView()||this.bringInView()),this.options.onHighlighted&&this.options.onHighlighted(this)}},{key:"getNode",value:function(){return this.node}},{key:"hidePopover",value:function(){this.popover&&this.popover.hide()}},{key:"showPopover",value:function(){if(this.popover){var t=this.getCalculatedPosition();this.popover.show(t)}}},{key:"getFullPageSize",value:function(){var t=this.document.body,e=this.document.documentElement;return{height:Math.max(t.scrollHeight,t.offsetHeight,e.scrollHeight,e.offsetHeight),width:Math.max(t.scrollWidth,t.offsetWidth,e.scrollWidth,e.offsetWidth)}}}]),t}();e.default=r,t.exports=e.default},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var o=function(){function t(t,e){for(var i=0;i<e.length;i++){var o=e[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,i,o){return i&&t(e.prototype,i),o&&t(e,o),e}}();var n=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=e.left,o=void 0===i?0:i,n=e.top,s=void 0===n?0:n,h=e.right,r=void 0===h?0:h,l=e.bottom,a=void 0===l?0:l;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.left=o,this.right=r,this.top=s,this.bottom=a}return o(t,[{key:"canHighlight",value:function(){return this.left<this.right&&this.top<this.bottom}},{key:"equals",value:function(t){return Math.round(this.left)===Math.round(t.left)&&Math.round(this.right)===Math.round(t.right)&&Math.round(this.top)===Math.round(t.top)&&Math.round(this.bottom)===Math.round(t.bottom)}}]),t}();e.default=n,t.exports=e.default},function(t,e,i){"use strict";!function(){for(var t=0,e=["ms","moz","webkit","o"],i=0;i<e.length&&!window.requestAnimationFrame;++i)window.requestAnimationFrame=window[e[i]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[e[i]+"CancelAnimationFrame"]||window[e[i]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(e){var i=(new Date).getTime(),o=Math.max(0,16-(i-t)),n=window.setTimeout(function(){e(i+o)},o);return t=i+o,n}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)})}()},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var o,n=function(){function t(t,e){for(var i=0;i<e.length;i++){var o=e[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,i,o){return i&&t(e.prototype,i),o&&t(e,o),e}}(),s=i(1),h=(o=s)&&o.__esModule?o:{default:o},r=i(0);var l=function(t){function e(t,i,o){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e);var n=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return n.options=Object.assign({isFirst:!0,isLast:!0,totalCount:1,currentIndex:0,showButtons:!0,closeBtnText:"Close",doneBtnText:"Done",startBtnText:"Next &rarr;",nextBtnText:"Next &rarr;",prevBtnText:"&larr; Previous"},t),n.window=i,n.document=o,n.makeNode(),n.hide(),n}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,h.default),n(e,[{key:"makeNode",value:function(){var t=this.document.getElementById(r.ID_POPOVER);t||(t=e.createFromString(r.POPOVER_HTML),document.body.appendChild(t)),this.node=t,this.tipNode=t.querySelector("."+r.CLASS_POPOVER_TIP),this.titleNode=t.querySelector("."+r.CLASS_POPOVER_TITLE),this.descriptionNode=t.querySelector("."+r.CLASS_POPOVER_DESCRIPTION),this.footerNode=t.querySelector("."+r.CLASS_POPOVER_FOOTER),this.nextBtnNode=t.querySelector("."+r.CLASS_NEXT_STEP_BTN),this.prevBtnNode=t.querySelector("."+r.CLASS_PREV_STEP_BTN),this.closeBtnNode=t.querySelector("."+r.CLASS_CLOSE_BTN)}},{key:"getSize",value:function(){return{height:Math.max(this.node.scrollHeight,this.node.offsetHeight),width:Math.max(this.node.scrollWidth,this.node.offsetWidth)}}},{key:"hide",value:function(){this.node.style.display="none"}},{key:"reset",value:function(){this.node.style.display="block",this.node.style.left="0",this.node.style.top="0",this.node.style.bottom="",this.node.style.right="",this.node.querySelector("."+r.CLASS_POPOVER_TIP).className=r.CLASS_POPOVER_TIP}},{key:"show",value:function(t){switch(this.reset(),this.titleNode.innerHTML=this.options.title,this.descriptionNode.innerHTML=this.options.description,this.renderButtons(),this.options.position){case"left":this.positionOnLeft(t);break;case"right":this.positionOnRight(t);break;case"top":this.positionOnTop(t);break;case"bottom":this.positionOnBottom(t);break;case"auto":default:this.autoPosition(t)}}},{key:"renderButtons",value:function(){this.nextBtnNode.innerHTML=this.options.nextBtnText,this.prevBtnNode.innerHTML=this.options.prevBtnText,this.closeBtnNode.innerHTML=this.options.closeBtnText,this.options.showButtons&&this.options.totalCount&&1!==this.options.totalCount?(this.footerNode.style.display="block",this.options.isFirst?(this.prevBtnNode.classList.add(r.CLASS_BTN_DISABLED),this.nextBtnNode.innerHTML=this.options.startBtnText):this.prevBtnNode.classList.remove(r.CLASS_BTN_DISABLED),this.options.isLast?this.nextBtnNode.innerHTML=this.options.doneBtnText:this.nextBtnNode.innerHTML=this.options.nextBtnText):this.footerNode.style.display="none"}},{key:"positionOnLeft",value:function(t){var e=this.getSize().width,i=this.options.padding+10;this.node.style.left=t.left-e-i+"px",this.node.style.top=t.top-this.options.padding+"px",this.node.style.right="",this.node.style.bottom="",this.tipNode.classList.add("right")}},{key:"positionOnRight",value:function(t){var e=this.options.padding+10;this.node.style.left=t.right+e+"px",this.node.style.top=t.top-this.options.padding+"px",this.node.style.right="",this.node.style.bottom="",this.tipNode.classList.add("left")}},{key:"positionOnTop",value:function(t){var e=this.getSize().height,i=this.options.padding+10;this.node.style.top=t.top-e-i+"px",this.node.style.left=t.left-this.options.padding+"px",this.node.style.right="",this.node.style.bottom="",this.tipNode.classList.add("bottom")}},{key:"positionOnBottom",value:function(t){var e=this.options.padding+10;this.node.style.top=t.bottom+e+"px",this.node.style.left=t.left-this.options.padding+"px",this.node.style.right="",this.node.style.bottom="",this.tipNode.classList.add("top")}},{key:"autoPosition",value:function(t){var e=this.getFullPageSize(),i=this.getSize(),o=e.height,n=i.height,s=this.options.padding+10;t.bottom+n+s>=o?this.positionOnTop(t):this.positionOnBottom(t)}}],[{key:"createFromString",value:function(t){var e=document.createElement("div");return e.innerHTML=t.trim(),e.firstChild}}]),e}();e.default=l,t.exports=e.default},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var o,n=function(){function t(t,e){for(var i=0;i<e.length;i++){var o=e[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,i,o){return i&&t(e.prototype,i),o&&t(e,o),e}}(),s=i(2),h=(o=s)&&o.__esModule?o:{default:o},r=i(0);var l=function(){function t(e,i,o){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.options=e,this.overlayAlpha=0,this.positionToHighlight=new h.default({}),this.highlightedPosition=new h.default({}),this.redrawAnimation=null,this.highlightedElement=null,this.lastHighlightedElement=null,this.draw=this.draw.bind(this),this.window=i,this.document=o,this.resetOverlay(),this.setSize()}return n(t,[{key:"resetOverlay",value:function(){var t=this.document.getElementById(r.ID_OVERLAY);t&&t.parentNode&&t.parentNode.removeChild(t);var e=this.document.createElement("canvas");this.overlay=e,this.context=e.getContext("2d"),this.overlay.id=r.ID_OVERLAY,this.overlay.style.pointerEvents="none",this.overlay.style.background="transparent",this.overlay.style.position="fixed",this.overlay.style.top="0",this.overlay.style.left="0",this.overlay.style.zIndex=r.OVERLAY_ZINDEX}},{key:"highlight",value:function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];if(t&&t.node){this.setSize(),t.onHighlightStarted(),this.highlightedElement&&this.highlightedElement.onDeselected();var i=t.getCalculatedPosition();i.canHighlight()&&(this.lastHighlightedElement=this.highlightedElement,this.highlightedElement=t,this.positionToHighlight=i,this.options.animate&&e||(this.highlightedPosition=this.positionToHighlight),this.draw())}else console.warn("Invalid element to highlight. Must be an instance of `Element`")}},{key:"getHighlightedElement",value:function(){return this.highlightedElement}},{key:"getLastHighlightedElement",value:function(){return this.lastHighlightedElement}},{key:"clear",value:function(){this.positionToHighlight=new h.default,this.highlightedElement&&this.highlightedElement.onDeselected(),this.highlightedElement=null,this.lastHighlightedElement=null,this.draw()}},{key:"draw",value:function(){var t=this.positionToHighlight.canHighlight();this.removeCloak(),this.addCloak();var e=this.overlayAlpha<.1;t&&(e?this.highlightedPosition=this.positionToHighlight:(this.highlightedPosition.left+=.18*(this.positionToHighlight.left-this.highlightedPosition.left),this.highlightedPosition.top+=.18*(this.positionToHighlight.top-this.highlightedPosition.top),this.highlightedPosition.right+=.18*(this.positionToHighlight.right-this.highlightedPosition.right),this.highlightedPosition.bottom+=.18*(this.positionToHighlight.bottom-this.highlightedPosition.bottom))),this.removeCloak({posX:this.highlightedPosition.left-this.window.scrollX-this.options.padding,posY:this.highlightedPosition.top-this.window.scrollY-this.options.padding,width:this.highlightedPosition.right-this.highlightedPosition.left+2*this.options.padding,height:this.highlightedPosition.bottom-this.highlightedPosition.top+2*this.options.padding}),t?this.options.animate?this.overlayAlpha+=.08*(this.options.opacity-this.overlayAlpha):this.overlayAlpha=this.options.opacity:this.overlayAlpha=Math.max(.85*this.overlayAlpha-.02,0),this.window.cancelAnimationFrame(this.redrawAnimation),t||this.overlayAlpha>0?(this.overlay.parentNode||this.document.body.appendChild(this.overlay),this.hasPositionHighlighted()?!this.options.animate&&e?this.redrawAnimation=this.window.requestAnimationFrame(this.draw):this.highlightedElement.onHighlighted():this.redrawAnimation=this.window.requestAnimationFrame(this.draw)):this.overlay.parentNode&&this.document.body.removeChild(this.overlay)}},{key:"hasPositionHighlighted",value:function(){return this.positionToHighlight.equals(this.highlightedPosition)&&this.overlayAlpha>this.options.opacity-.05}},{key:"removeCloak",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=t.posX,i=void 0===e?0:e,o=t.posY,n=void 0===o?0:o,s=t.width,h=void 0===s?this.overlay.width:s,r=t.height,l=void 0===r?this.overlay.height:r;this.context.clearRect(i,n,h,l)}},{key:"addCloak",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=t.posX,i=void 0===e?0:e,o=t.posY,n=void 0===o?0:o,s=t.width,h=void 0===s?this.overlay.width:s,r=t.height,l=void 0===r?this.overlay.height:r;this.context.fillStyle="rgba( 0, 0, 0, "+this.overlayAlpha+" )",this.context.fillRect(i,n,h,l)}},{key:"setSize",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;this.overlay.width=t||this.window.innerWidth,this.overlay.height=e||this.window.innerHeight}},{key:"refresh",value:function(){var t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];this.setSize(),this.highlightedElement&&(this.window.cancelAnimationFrame(this.redrawAnimation),this.highlight(this.highlightedElement,t),this.highlightedElement.onHighlighted())}}]),t}();e.default=l,t.exports=e.default},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var o=function(){function t(t,e){for(var i=0;i<e.length;i++){var o=e[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,i,o){return i&&t(e.prototype,i),o&&t(e,o),e}}(),n=l(i(5)),s=l(i(1)),h=l(i(4));i(3);var r=i(0);function l(t){return t&&t.__esModule?t:{default:t}}var a=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.options=Object.assign({animate:r.OVERLAY_ANIMATE,opacity:r.OVERLAY_OPACITY,padding:r.OVERLAY_PADDING,scrollIntoViewOptions:null,onHighlightStarted:function(){},onHighlighted:function(){},onDeselected:function(){}},e),this.document=document,this.window=window,this.isActivated=!1,this.overlay=new n.default(this.options,this.window,this.document),this.steps=[],this.currentStep=0,this.onScroll=this.onScroll.bind(this),this.onResize=this.onResize.bind(this),this.onKeyUp=this.onKeyUp.bind(this),this.onClick=this.onClick.bind(this),this.bind()}return o(t,[{key:"bind",value:function(){this.document.addEventListener("scroll",this.onScroll,!1),this.document.addEventListener("DOMMouseScroll",this.onScroll,!1),this.window.addEventListener("resize",this.onResize,!1),this.window.addEventListener("keyup",this.onKeyUp,!1),this.window.addEventListener("click",this.onClick,!1)}},{key:"onClick",value:function(t){if(this.hasHighlightedElement()&&this.isActivated){var e=this.overlay.getHighlightedElement(),i=this.document.getElementById(r.ID_POPOVER),o=e.node.contains(t.target),n=i&&i.contains(t.target);if(o||n){var s=t.target.classList.contains(r.CLASS_NEXT_STEP_BTN),h=t.target.classList.contains(r.CLASS_PREV_STEP_BTN);t.target.classList.contains(r.CLASS_CLOSE_BTN)?this.reset():s?this.moveNext():h&&this.movePrevious()}else this.reset()}}},{key:"movePrevious",value:function(){this.currentStep-=1,this.steps[this.currentStep]?this.overlay.highlight(this.steps[this.currentStep]):this.reset()}},{key:"moveNext",value:function(){this.currentStep+=1,this.steps[this.currentStep]?this.overlay.highlight(this.steps[this.currentStep]):this.reset()}},{key:"hasNextStep",value:function(){return!!this.steps[this.currentStep+1]}},{key:"hasPreviousStep",value:function(){return!!this.steps[this.currentStep-1]}},{key:"reset",value:function(){this.currentStep=0,this.isActivated=!1,this.overlay.clear()}},{key:"hasHighlightedElement",value:function(){var t=this.overlay.getHighlightedElement();return t&&t.node&&t.highlightFinished}},{key:"getHighlightedElement",value:function(){return this.overlay.getHighlightedElement()}},{key:"getLastHighlightedElement",value:function(){return this.overlay.getLastHighlightedElement()}},{key:"onScroll",value:function(){this.isActivated&&this.overlay.refresh(!1)}},{key:"onResize",value:function(){this.isActivated&&this.overlay.refresh(!0)}},{key:"onKeyUp",value:function(t){this.isActivated&&(t.keyCode===r.ESC_KEY_CODE?this.reset():t.keyCode===r.RIGHT_KEY_CODE?this.moveNext():t.keyCode===r.LEFT_KEY_CODE&&this.movePrevious())}},{key:"defineSteps",value:function(t){var e=this;this.steps=[],t.forEach(function(i,o){if(!i.element||"string"!=typeof i.element)throw new Error("Element (query selector string) missing in step "+o);var n=e.prepareElementFromStep(i,t,o);n&&e.steps.push(n)})}},{key:"prepareElementFromStep",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,o="",n={};"string"==typeof t?o=t:(o=t.element,n=Object.assign({},this.options,t));var r=this.document.querySelector(o);if(!r)return console.warn("Element to highlight "+o+" not found"),null;var l=null;if(n.popover&&n.popover.description){var a=Object.assign({},this.options,n.popover,{totalCount:e.length,currentIndex:i,isFirst:0===i,isLast:i===e.length-1});l=new h.default(a,this.window,this.document)}return new s.default(r,n,l,this.overlay,this.window,this.document)}},{key:"start",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;if(!this.steps||0===this.steps.length)throw new Error("There are no steps defined to iterate");this.isActivated=!0,this.currentStep=t,this.overlay.highlight(this.steps[t])}},{key:"highlight",value:function(t){this.isActivated=!0;var e=this.prepareElementFromStep(t);e&&this.overlay.highlight(e)}}]),t}();e.default=a,t.exports=e.default},function(t,e){},function(t,e,i){i(7),t.exports=i(6)}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Driver=e():t.Driver=e()}(window,function(){return function(t){var e={};function i(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,i),o.l=!0,o.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:n})},i.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="/dist/",i(i.s=10)}([function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});e.OVERLAY_OPACITY=.75,e.OVERLAY_PADDING=10,e.OVERLAY_ANIMATE=!0,e.ESC_KEY_CODE=27,e.LEFT_KEY_CODE=37,e.RIGHT_KEY_CODE=39;var n=e.ID_OVERLAY="driver-page-overlay",o=e.ID_STAGE="driver-highlighted-element-stage",s=e.ID_POPOVER="driver-popover-item",r=(e.CLASS_DRIVER_HIGHLIGHTED_ELEMENT="driver-highlighted-element",e.CLASS_NO_ANIMATION="sholo-no-animation",e.CLASS_POPOVER_TIP="driver-popover-tip"),h=e.CLASS_POPOVER_TITLE="driver-popover-title",l=e.CLASS_POPOVER_DESCRIPTION="driver-popover-description",a=e.CLASS_POPOVER_FOOTER="driver-popover-footer",d=e.CLASS_CLOSE_BTN="driver-close-btn",u=e.CLASS_NEXT_STEP_BTN="driver-next-btn",c=e.CLASS_PREV_STEP_BTN="driver-prev-btn";e.CLASS_BTN_DISABLED="driver-disabled",e.ANIMATION_DURATION_MS=400,e.POPOVER_HTML='\n  <div id="'+s+'">\n    <div class="'+r+'"></div>\n    <div class="'+h+'">Popover Title</div>\n    <div class="'+l+'">Popover Description</div>\n    <div class="'+a+'">\n      <a href="javascript:void(0)" class="'+d+'">Close</a>\n      <span class="driver-btn-group">\n        <a class="'+c+'" href="javascript:void(0)">&larr; Previous</a>\n        <a class="'+u+'" href="javascript:void(0)">Next &rarr;</a>\n      </span>\n    </div>\n  </div>',e.OVERLAY_HTML='<div id="'+n+'"></div>',e.STAGE_HTML='<div id="'+o+'"></div>'},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n,o=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),s=i(3),r=(n=s)&&n.__esModule?n:{default:n},h=i(0);var l=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=e.node,n=e.options,o=e.popover,s=e.stage,r=e.overlay,h=e.window,l=e.document;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.node=i,this.document=l,this.window=h,this.options=n,this.overlay=r,this.popover=o,this.stage=s,this.animationTimeout=null}return o(t,[{key:"getScreenCoordinates",value:function(){var t=this.node,e=this.document.documentElement.offsetLeft,i=this.document.documentElement.offsetTop;if(t.offsetParent)do{e+=t.offsetLeft,i+=t.offsetTop}while(t=t.offsetParent);return{x:e,y:i}}},{key:"isInView",value:function(){for(var t=this.node.offsetTop,e=this.node.offsetLeft,i=this.node.offsetWidth,n=this.node.offsetHeight,o=this.node;o.offsetParent;)t+=(o=o.offsetParent).offsetTop,e+=o.offsetLeft;return t>=this.window.pageYOffset&&e>=this.window.pageXOffset&&t+n<=this.window.pageYOffset+this.window.innerHeight&&e+i<=this.window.pageXOffset+this.window.innerWidth}},{key:"scrollManually",value:function(){var t=this.node.getBoundingClientRect().top+this.window.pageYOffset-this.window.innerHeight/2;this.window.scrollTo(0,t)}},{key:"bringInView",value:function(){if(!this.isInView())if(this.node.scrollIntoView)try{this.node.scrollIntoView(this.options.scrollIntoViewOptions||{behavior:"smooth",block:"center"})}catch(t){this.scrollManually()}else this.scrollManually()}},{key:"getCalculatedPosition",value:function(){var t=this.getScreenCoordinates(),e=new r.default({left:Number.MAX_VALUE,top:Number.MAX_VALUE,right:0,bottom:0});return"number"==typeof t.x&&"number"==typeof t.y&&(this.node.offsetWidth>0||this.node.offsetHeight>0)&&(e.left=Math.min(e.left,t.x),e.top=Math.min(e.top,t.y),e.right=Math.max(e.right,t.x+this.node.offsetWidth),e.bottom=Math.max(e.bottom,t.y+this.node.offsetHeight)),e}},{key:"onDeselected",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.hidePopover(),t&&this.hideStage(),this.node.classList.remove(h.CLASS_DRIVER_HIGHLIGHTED_ELEMENT),this.window.clearTimeout(this.animationTimeout),this.options.onDeselected&&this.options.onDeselected(this)}},{key:"isSame",value:function(t){return!(!t||!t.node)&&t.node===this.node}},{key:"onHighlightStarted",value:function(){this.options.onHighlightStarted&&this.options.onHighlightStarted(this)}},{key:"onHighlighted",value:function(){this.showPopover(),this.showStage(),this.node.classList.add(h.CLASS_DRIVER_HIGHLIGHTED_ELEMENT);var t=this.popover;t&&!t.isInView()&&t.bringInView(),this.isInView()||this.bringInView(),this.options.onHighlighted&&this.options.onHighlighted(this)}},{key:"showStage",value:function(){this.stage.show(this.getCalculatedPosition())}},{key:"getNode",value:function(){return this.node}},{key:"hideStage",value:function(){this.stage.hide()}},{key:"hidePopover",value:function(){this.popover&&this.popover.hide()}},{key:"showPopover",value:function(){var t=this;if(this.popover){var e=this.getCalculatedPosition(),i=h.ANIMATION_DURATION_MS;this.options.animate&&this.overlay.lastHighlightedElement||(i=0),this.animationTimeout=this.window.setTimeout(function(){t.popover.show(e)},i)}}},{key:"getFullPageSize",value:function(){var t=this.document.body,e=this.document.documentElement;return{height:Math.max(t.scrollHeight,t.offsetHeight,e.scrollHeight,e.offsetHeight),width:Math.max(t.scrollWidth,t.offsetWidth,e.scrollWidth,e.offsetWidth)}}},{key:"getSize",value:function(){return{height:Math.max(this.node.scrollHeight,this.node.offsetHeight),width:Math.max(this.node.scrollWidth,this.node.offsetWidth)}}}]),t}();e.default=l,t.exports=e.default},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});e.createNodeFromString=function(t){var e=document.createElement("div");return e.innerHTML=t.trim(),e.firstChild}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}();var o=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=e.left,n=void 0===i?0:i,o=e.top,s=void 0===o?0:o,r=e.right,h=void 0===r?0:r,l=e.bottom,a=void 0===l?0:l;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.left=n,this.right=h,this.top=s,this.bottom=a}return n(t,[{key:"canHighlight",value:function(){return this.left<this.right&&this.top<this.bottom}},{key:"equals",value:function(t){return Math.round(this.left)===Math.round(t.left)&&Math.round(this.right)===Math.round(t.right)&&Math.round(this.top)===Math.round(t.top)&&Math.round(this.bottom)===Math.round(t.bottom)}}]),t}();e.default=o,t.exports=e.default},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n,o=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),s=i(0),r=i(2),h=i(1),l=(n=h)&&n.__esModule?n:{default:n};var a=function(t){function e(t,i,n){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e);var o=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return o.options=t,o.window=i,o.document=n,o}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,l.default),o(e,[{key:"makeNode",value:function(){var t=this.document.getElementById(s.ID_STAGE);t||(t=(0,r.createNodeFromString)(s.STAGE_HTML),document.body.appendChild(t)),this.node=t,this.options.animate?this.node.classList.remove(s.CLASS_NO_ANIMATION):this.node.classList.add(s.CLASS_NO_ANIMATION)}},{key:"removeNode",value:function(){this.node&&this.node.parentElement.removeChild(this.node)}},{key:"hide",value:function(){this.node.style.display="none",this.removeNode()}},{key:"setInitialStyle",value:function(){this.node.style.display="block",this.node.style.left="0",this.node.style.top="0",this.node.style.bottom="",this.node.style.right=""}},{key:"show",value:function(t){this.makeNode(),this.setInitialStyle();var e=2*this.options.padding,i=t.right-t.left+e,n=t.bottom-t.top+e;this.node.style.display="block",this.node.style.position="absolute",this.node.style.width=i+"px",this.node.style.height=n+"px",this.node.style.top=t.top-e/2+"px",this.node.style.left=t.left-e/2+"px"}}]),e}();e.default=a,t.exports=e.default},function(t,e,i){"use strict";!function(){for(var t=0,e=["ms","moz","webkit","o"],i=0;i<e.length&&!window.requestAnimationFrame;++i)window.requestAnimationFrame=window[e[i]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[e[i]+"CancelAnimationFrame"]||window[e[i]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(e){var i=(new Date).getTime(),n=Math.max(0,16-(i-t)),o=window.setTimeout(function(){e(i+n)},n);return t=i+n,o}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)})}()},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n,o=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),s=i(1),r=(n=s)&&n.__esModule?n:{default:n},h=i(0),l=i(2);var a=function(t){function e(t,i,n){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e);var o=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return o.options=Object.assign({isFirst:!0,isLast:!0,totalCount:1,currentIndex:0,showButtons:!0,closeBtnText:"Close",doneBtnText:"Done",startBtnText:"Next &rarr;",nextBtnText:"Next &rarr;",prevBtnText:"&larr; Previous"},t),o.window=i,o.document=n,o.makeNode(),o.hide(),o}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,r.default),o(e,[{key:"makeNode",value:function(){var t=this.document.getElementById(h.ID_POPOVER);t||(t=(0,l.createNodeFromString)(h.POPOVER_HTML),document.body.appendChild(t)),this.node=t,this.tipNode=t.querySelector("."+h.CLASS_POPOVER_TIP),this.titleNode=t.querySelector("."+h.CLASS_POPOVER_TITLE),this.descriptionNode=t.querySelector("."+h.CLASS_POPOVER_DESCRIPTION),this.footerNode=t.querySelector("."+h.CLASS_POPOVER_FOOTER),this.nextBtnNode=t.querySelector("."+h.CLASS_NEXT_STEP_BTN),this.prevBtnNode=t.querySelector("."+h.CLASS_PREV_STEP_BTN),this.closeBtnNode=t.querySelector("."+h.CLASS_CLOSE_BTN)}},{key:"hide",value:function(){this.node.style.display="none"}},{key:"setInitialState",value:function(){this.node.style.display="block",this.node.style.left="0",this.node.style.top="0",this.node.style.bottom="",this.node.style.right="",this.node.querySelector("."+h.CLASS_POPOVER_TIP).className=h.CLASS_POPOVER_TIP}},{key:"show",value:function(t){switch(this.setInitialState(),this.titleNode.innerHTML=this.options.title,this.descriptionNode.innerHTML=this.options.description,this.renderButtons(),this.options.position){case"left":this.positionOnLeft(t);break;case"right":this.positionOnRight(t);break;case"top":this.positionOnTop(t);break;case"bottom":this.positionOnBottom(t);break;case"auto":default:this.autoPosition(t)}}},{key:"renderButtons",value:function(){this.nextBtnNode.innerHTML=this.options.nextBtnText,this.prevBtnNode.innerHTML=this.options.prevBtnText,this.closeBtnNode.innerHTML=this.options.closeBtnText,this.options.showButtons&&this.options.totalCount&&1!==this.options.totalCount?(this.footerNode.style.display="block",this.options.isFirst?(this.prevBtnNode.classList.add(h.CLASS_BTN_DISABLED),this.nextBtnNode.innerHTML=this.options.startBtnText):this.prevBtnNode.classList.remove(h.CLASS_BTN_DISABLED),this.options.isLast?this.nextBtnNode.innerHTML=this.options.doneBtnText:this.nextBtnNode.innerHTML=this.options.nextBtnText):this.footerNode.style.display="none"}},{key:"positionOnLeft",value:function(t){var e=this.getSize().width,i=this.options.padding+10;this.node.style.left=t.left-e-i+"px",this.node.style.top=t.top-this.options.padding+"px",this.node.style.right="",this.node.style.bottom="",this.tipNode.classList.add("right")}},{key:"positionOnRight",value:function(t){var e=this.options.padding+10;this.node.style.left=t.right+e+"px",this.node.style.top=t.top-this.options.padding+"px",this.node.style.right="",this.node.style.bottom="",this.tipNode.classList.add("left")}},{key:"positionOnTop",value:function(t){var e=this.getSize().height,i=this.options.padding+10;this.node.style.top=t.top-e-i+"px",this.node.style.left=t.left-this.options.padding+"px",this.node.style.right="",this.node.style.bottom="",this.tipNode.classList.add("bottom")}},{key:"positionOnBottom",value:function(t){var e=this.options.padding+10;this.node.style.top=t.bottom+e+"px",this.node.style.left=t.left-this.options.padding+"px",this.node.style.right="",this.node.style.bottom="",this.tipNode.classList.add("top")}},{key:"autoPosition",value:function(t){var e=this.getFullPageSize(),i=this.getSize(),n=e.height,o=i.height,s=this.options.padding+10;t.bottom+o+s>=n?this.positionOnTop(t):this.positionOnBottom(t)}}]),e}();e.default=a,t.exports=e.default},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n,o=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),s=i(3),r=(n=s)&&n.__esModule?n:{default:n},h=i(0),l=i(2);var a=function(){function t(e,i,n){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.options=e,this.positionToHighlight=new r.default({}),this.highlightedElement=null,this.lastHighlightedElement=null,this.hideTimer=null,this.window=i,this.document=n}return o(t,[{key:"makeNode",value:function(){var t=this.document.getElementById(h.ID_OVERLAY);t||(t=(0,l.createNodeFromString)(h.OVERLAY_HTML),document.body.appendChild(t)),this.node=t,this.node.style.opacity="0",this.options.animate?this.node.classList.remove(h.CLASS_NO_ANIMATION):this.node.classList.add(h.CLASS_NO_ANIMATION)}},{key:"highlight",value:function(t){if(t&&t.node){if(!t.isSame(this.highlightedElement)){this.window.clearTimeout(this.hideTimer),t.onHighlightStarted(),this.highlightedElement&&!this.highlightedElement.isSame(this.lastHighlightedElement)&&this.highlightedElement.onDeselected();var e=t.getCalculatedPosition();e.canHighlight()&&(this.lastHighlightedElement=this.highlightedElement,this.highlightedElement=t,this.positionToHighlight=e,this.show(),this.highlightedElement.onHighlighted())}}else console.warn("Invalid element to highlight. Must be an instance of `Element`")}},{key:"show",value:function(){var t=this;this.node&&this.node.parentElement||(this.makeNode(),window.setTimeout(function(){t.node.style.opacity=""+t.options.opacity,t.node.style.position="fixed",t.node.style.left="0",t.node.style.top="0",t.node.style.bottom="0",t.node.style.right="0"}))}},{key:"hideOverlay",value:function(){var t=this;this.node.style.opacity="0",this.hideTimer=window.setTimeout(function(){t.node.style.position="absolute",t.node.style.left="",t.node.style.top="",t.node.style.bottom="",t.node.style.right="",t.node.parentElement.removeChild(t.node)},h.ANIMATION_DURATION_MS)}},{key:"getHighlightedElement",value:function(){return this.highlightedElement}},{key:"getLastHighlightedElement",value:function(){return this.lastHighlightedElement}},{key:"clear",value:function(){this.positionToHighlight=new r.default,this.highlightedElement&&this.highlightedElement.onDeselected(!0),this.highlightedElement=null,this.lastHighlightedElement=null,this.hideOverlay()}},{key:"refresh",value:function(){this.highlightedElement&&(this.highlightedElement.showPopover(),this.highlightedElement.showStage())}}]),t}();e.default=a,t.exports=e.default},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(t[n]=i[n])}return t},o=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),s=d(i(7)),r=d(i(1)),h=d(i(6));i(5);var l=i(0),a=d(i(4));function d(t){return t&&t.__esModule?t:{default:t}}var u=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.options=n({animate:l.OVERLAY_ANIMATE,opacity:l.OVERLAY_OPACITY,padding:l.OVERLAY_PADDING,scrollIntoViewOptions:null,onHighlightStarted:function(){},onHighlighted:function(){},onDeselected:function(){}},e),this.document=document,this.window=window,this.isActivated=!1,this.steps=[],this.currentStep=0,this.overlay=new s.default(this.options,window,document),this.onResize=this.onResize.bind(this),this.onKeyUp=this.onKeyUp.bind(this),this.onClick=this.onClick.bind(this),this.bind()}return o(t,[{key:"bind",value:function(){this.window.addEventListener("resize",this.onResize,!1),this.window.addEventListener("keyup",this.onKeyUp,!1),this.window.addEventListener("click",this.onClick,!1)}},{key:"onClick",value:function(t){if(this.isActivated&&this.hasHighlightedElement()){var e=this.overlay.getHighlightedElement(),i=this.document.getElementById(l.ID_POPOVER),n=e.node.contains(t.target),o=i&&i.contains(t.target);if(n||o){var s=t.target.classList.contains(l.CLASS_NEXT_STEP_BTN),r=t.target.classList.contains(l.CLASS_PREV_STEP_BTN);t.target.classList.contains(l.CLASS_CLOSE_BTN)?this.reset():s?this.moveNext():r&&this.movePrevious()}else this.reset()}}},{key:"movePrevious",value:function(){this.currentStep-=1,this.steps[this.currentStep]?this.overlay.highlight(this.steps[this.currentStep]):this.reset()}},{key:"moveNext",value:function(){this.currentStep+=1,this.steps[this.currentStep]?this.overlay.highlight(this.steps[this.currentStep]):this.reset()}},{key:"hasNextStep",value:function(){return!!this.steps[this.currentStep+1]}},{key:"hasPreviousStep",value:function(){return!!this.steps[this.currentStep-1]}},{key:"reset",value:function(){this.currentStep=0,this.isActivated=!1,this.overlay.clear()}},{key:"hasHighlightedElement",value:function(){var t=this.overlay.getHighlightedElement();return t&&t.node}},{key:"getHighlightedElement",value:function(){return this.overlay.getHighlightedElement()}},{key:"getLastHighlightedElement",value:function(){return this.overlay.getLastHighlightedElement()}},{key:"onResize",value:function(){this.isActivated&&this.overlay.refresh()}},{key:"onKeyUp",value:function(t){this.isActivated&&(t.keyCode===l.ESC_KEY_CODE?this.reset():t.keyCode===l.RIGHT_KEY_CODE?this.moveNext():t.keyCode===l.LEFT_KEY_CODE&&this.movePrevious())}},{key:"defineSteps",value:function(t){var e=this;this.steps=[],t.forEach(function(i,n){if(!i.element||"string"!=typeof i.element)throw new Error("Element (query selector string) missing in step "+n);var o=e.prepareElementFromStep(i,t,n);o&&e.steps.push(o)})}},{key:"prepareElementFromStep",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,o="",s={};"string"==typeof t?o=t:(o=t.element,s=n({},this.options,t));var l=this.document.querySelector(o);if(!l)return console.warn("Element to highlight "+o+" not found"),null;var d=null;if(s.popover&&s.popover.description){var u=n({},this.options,s.popover,{totalCount:e.length,currentIndex:i,isFirst:0===i,isLast:i===e.length-1});d=new h.default(u,this.window,this.document)}var c=new a.default(this.options,this.window,this.document);return new r.default({node:l,options:s,popover:d,stage:c,overlay:this.overlay,window:this.window,document:this.document})}},{key:"start",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;if(!this.steps||0===this.steps.length)throw new Error("There are no steps defined to iterate");this.isActivated=!0,this.currentStep=t,this.overlay.highlight(this.steps[t])}},{key:"highlight",value:function(t){this.isActivated=!0;var e=this.prepareElementFromStep(t);e&&this.overlay.highlight(e)}}]),t}();e.default=u,t.exports=e.default},function(t,e){},function(t,e,i){i(9),t.exports=i(8)}])});
 //# sourceMappingURL=driver.min.js.map

package.json

 {
   "name": "driver.js",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "description": "A light-weight, no-dependency, vanilla JavaScript library to drive the user's focus across the page",
@@ -22,2 +22,3 @@ "main": "dist/driver.min.js",
     "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.1",
@@ -24,0 +25,0 @@ "copy-webpack-plugin": "^4.5.1",

readme.md

@@ -156,3 +156,2 @@ <h1 align="center"><img src="./demo/images/driver.png" /><br> Driver.js</h1>
 const driver = new Driver({
-  animate: true,                    // Animate while changing highlighted element
   opacity: 0.75,                    // Background opacity (0 means only popovers and without overlay)
@@ -159,0 +158,0 @@ padding: 10,                      // Distance of element from around the edges

src/common/constants.js

 export const OVERLAY_OPACITY = 0.75;
 export const OVERLAY_PADDING = 10;
 export const OVERLAY_ANIMATE = true;
-export const OVERLAY_ZINDEX = '999999999';
 
@@ -10,5 +9,9 @@ export const ESC_KEY_CODE = 27;
 
-export const ID_OVERLAY = 'driver-canvas-overlay';
+export const ID_OVERLAY = 'driver-page-overlay';
+export const ID_STAGE = 'driver-highlighted-element-stage';
+export const ID_POPOVER = 'driver-popover-item';
 
-export const ID_POPOVER = 'driver-popover-item';
+export const CLASS_DRIVER_HIGHLIGHTED_ELEMENT = 'driver-highlighted-element';
+
+export const CLASS_NO_ANIMATION = 'sholo-no-animation';
 export const CLASS_POPOVER_TIP = 'driver-popover-tip';
@@ -23,2 +26,5 @@ export const CLASS_POPOVER_TITLE = 'driver-popover-title';
 
+// It must match the one set in the animations in CSS file
+export const ANIMATION_DURATION_MS = 400;
+
 // language=HTML
@@ -38,1 +44,4 @@ export const POPOVER_HTML = `
   </div>`;
+
+export const OVERLAY_HTML = `<div id="${ID_OVERLAY}"></div>`;
+export const STAGE_HTML = `<div id="${ID_STAGE}"></div>`;

src/core/element.js

 import Position from './position';
+import { ANIMATION_DURATION_MS, CLASS_DRIVER_HIGHLIGHTED_ELEMENT } from '../common/constants';
 
@@ -13,2 +14,3 @@ /**
    * @param {Popover} popover
+   * @param {Stage} stage
    * @param {Overlay} overlay
@@ -18,3 +20,11 @@ * @param {Window} window
    */
-  constructor(node, options, popover, overlay, window, document) {
+  constructor({
+    node,
+    options,
+    popover,
+    stage,
+    overlay,
+    window,
+    document,
+  } = {}) {
     this.node = node;
@@ -26,4 +36,5 @@ this.document = document;
     this.popover = popover;
+    this.stage = stage;
 
-    this.highlightFinished = false; // To track when the element has fully highlighted
+    this.animationTimeout = null;
   }
@@ -142,6 +153,14 @@
    */
-  onDeselected() {
+  onDeselected(hideStage = false) {
     this.hidePopover();
-    this.highlightFinished = false;
 
+    if (hideStage) {
+      this.hideStage();
+    }
+
+    this.node.classList.remove(CLASS_DRIVER_HIGHLIGHTED_ELEMENT);
+
+    // If there was any animation in progress, cancel that
+    this.window.clearTimeout(this.animationTimeout);
+
     if (this.options.onDeselected) {
@@ -153,2 +172,15 @@ this.options.onDeselected(this);
   /**
+   * Checks if the given element is same as the current element
+   * @param {Element} element
+   * @returns {boolean}
+   */
+  isSame(element) {
+    if (!element || !element.node) {
+      return false;
+    }
+
+    return element.node === this.node;
+  }
+
+  /**
    * Is called when the element is about to be highlighted
@@ -159,8 +191,2 @@ * i.e. either if overlay has started moving the highlight towards
   onHighlightStarted() {
-    this.showPopover();
-
-    // Because element has just started highlighting
-    // and hasn't completely highlighted
-    this.highlightFinished = false;
-
     if (this.options.onHighlightStarted) {
@@ -176,22 +202,15 @@ this.options.onHighlightStarted(this);
     this.showPopover();
+    this.showStage();
 
-    this.highlightFinished = true;
+    this.node.classList.add(CLASS_DRIVER_HIGHLIGHTED_ELEMENT);
 
     const highlightedElement = this;
-    const lastHighlightedElement = this.overlay.getLastHighlightedElement();
     const popoverElement = this.popover;
 
-    const highlightedNode = this.node;
-    const lastHighlightedNode = lastHighlightedElement && lastHighlightedElement.node;
+    if (popoverElement && !popoverElement.isInView()) {
+      popoverElement.bringInView();
+    }
 
-    // If this element is not already highlighted (because this call could
-    // be from the resize or scroll) and is not in view
-    if (highlightedNode !== lastHighlightedNode) {
-      if (popoverElement && !popoverElement.isInView()) {
-        popoverElement.bringInView();
-      }
-
-      if (!highlightedElement.isInView()) {
-        highlightedElement.bringInView();
-      }
+    if (!highlightedElement.isInView()) {
+      highlightedElement.bringInView();
     }
@@ -205,2 +224,9 @@
   /**
+   * Shows the stage behind the element
+   */
+  showStage() {
+    this.stage.show(this.getCalculatedPosition());
+  }
+
+  /**
    * Gets the DOM Element behind this element
@@ -213,2 +239,6 @@ * @returns {Node|HTMLElement|*}
 
+  hideStage() {
+    this.stage.hide();
+  }
+
   hidePopover() {
@@ -230,5 +260,14 @@ if (!this.popover) {
 
-    const position = this.getCalculatedPosition();
+    const showAtPosition = this.getCalculatedPosition();
 
-    this.popover.show(position);
+    // For first highlight, show it immediately because there won't be any animation
+    let showAfterMs = ANIMATION_DURATION_MS;
+    // If animation is disabled or  if it is the first display, show it immediately
+    if (!this.options.animate || !this.overlay.lastHighlightedElement) {
+      showAfterMs = 0;
+    }
+
+    this.animationTimeout = this.window.setTimeout(() => {
+      this.popover.show(showAtPosition);
+    }, showAfterMs);
   }
@@ -249,2 +288,13 @@
   }
+
+  /**
+   * Gets the size for popover
+   * @returns {{height: number, width: number}}
+   */
+  getSize() {
+    return {
+      height: Math.max(this.node.scrollHeight, this.node.offsetHeight),
+      width: Math.max(this.node.scrollWidth, this.node.offsetWidth),
+    };
+  }
 }

src/core/overlay.js

 import Position from './position';
-import { ID_OVERLAY, OVERLAY_ZINDEX } from '../common/constants';
+import { ANIMATION_DURATION_MS, CLASS_NO_ANIMATION, ID_OVERLAY, OVERLAY_HTML } from '../common/constants';
+import { createNodeFromString } from '../common/utils';
 
@@ -17,16 +18,9 @@ /**
 
-    this.overlayAlpha = 0;                       // Is used to animate the layover
     this.positionToHighlight = new Position({}); // position at which layover is to be patched at
-    this.highlightedPosition = new Position({}); // position at which layover is patched currently
-    this.redrawAnimation = null;                 // used to cancel the redraw animation
     this.highlightedElement = null;              // currently highlighted dom element (instance of Element)
     this.lastHighlightedElement = null;          // element that was highlighted before current one
+    this.hideTimer = null;
 
-    this.draw = this.draw.bind(this);  // To pass the context of class, as it is to be used in redraw animation callback
-
     this.window = window;
     this.document = document;
-
-    this.resetOverlay();
-    this.setSize();
   }
@@ -37,21 +31,17 @@
    */
-  resetOverlay() {
-    // Check and remove the canvas if it already exists
-    const canvasOverlay = this.document.getElementById(ID_OVERLAY);
-    if (canvasOverlay && canvasOverlay.parentNode) {
-      canvasOverlay.parentNode.removeChild(canvasOverlay);
+  makeNode() {
+    let pageOverlay = this.document.getElementById(ID_OVERLAY);
+    if (!pageOverlay) {
+      pageOverlay = createNodeFromString(OVERLAY_HTML);
+      document.body.appendChild(pageOverlay);
     }
 
-    const overlay = this.document.createElement('canvas');
+    this.node = pageOverlay;
+    this.node.style.opacity = '0';
 
-    this.overlay = overlay;
-    this.context = overlay.getContext('2d');
-
-    this.overlay.id = ID_OVERLAY;
-    this.overlay.style.pointerEvents = 'none';
-    this.overlay.style.background = 'transparent';
-    this.overlay.style.position = 'fixed';
-    this.overlay.style.top = '0';
-    this.overlay.style.left = '0';
-    this.overlay.style.zIndex = OVERLAY_ZINDEX;
+    if (!this.options.animate) {
+      this.node.classList.add(CLASS_NO_ANIMATION);
+    } else {
+      this.node.classList.remove(CLASS_NO_ANIMATION);
+    }
   }
@@ -62,5 +52,4 @@
    * @param {Element} element
-   * @param {boolean} animate
    */
-  highlight(element, animate = true) {
+  highlight(element) {
     if (!element || !element.node) {
@@ -71,5 +60,11 @@ console.warn('Invalid element to highlight. Must be an instance of `Element`');
 
-    // @todo put it in the caller after testing
-    this.setSize();
+    // If highlighted element is not changed from last time
+    if (element.isSame(this.highlightedElement)) {
+      return;
+    }
 
+    // There might be hide timer from last time
+    // which might be getting triggered
+    this.window.clearTimeout(this.hideTimer);
+
     // Trigger the hook for highlight started
@@ -79,3 +74,3 @@ element.onHighlightStarted();
     // Old element has been deselected
-    if (this.highlightedElement) {
+    if (this.highlightedElement && !this.highlightedElement.isSame(this.lastHighlightedElement)) {
       this.highlightedElement.onDeselected();
@@ -94,11 +89,39 @@ }
 
-    // If animation is not required then set the last path to be same
-    // as the current path so that there is no easing towards it
-    if (!this.options.animate || !animate) {
-      this.highlightedPosition = this.positionToHighlight;
+    this.show();
+
+    // Element has been highlighted
+    this.highlightedElement.onHighlighted();
+  }
+
+  show() {
+    if (this.node && this.node.parentElement) {
+      return;
     }
 
-    this.draw();
+    this.makeNode();
+
+    window.setTimeout(() => {
+      this.node.style.opacity = `${this.options.opacity}`;
+      this.node.style.position = 'fixed';
+      this.node.style.left = '0';
+      this.node.style.top = '0';
+      this.node.style.bottom = '0';
+      this.node.style.right = '0';
+    });
   }
 
+  hideOverlay() {
+    this.node.style.opacity = '0';
+
+    this.hideTimer = window.setTimeout(() => {
+      this.node.style.position = 'absolute';
+      this.node.style.left = '';
+      this.node.style.top = '';
+      this.node.style.bottom = '';
+      this.node.style.right = '';
+
+      this.node.parentElement.removeChild(this.node);
+    }, ANIMATION_DURATION_MS);
+  }
+
   /**
@@ -126,3 +149,3 @@ * Returns the currently selected element
     if (this.highlightedElement) {
-      this.highlightedElement.onDeselected();
+      this.highlightedElement.onDeselected(true);
     }
@@ -133,160 +156,19 @@
 
-    this.draw();
+    this.hideOverlay();
   }
 
   /**
-   * `draw` is called for every frame . Puts back the
-   * filled overlay on body (i.e. while removing existing highlight if any) and
-   * Slowly eases towards the item to be selected.
-   */
-  draw() {
-    // Cache the response of this for re-use below
-    const canHighlight = this.positionToHighlight.canHighlight();
-
-    // Remove the existing cloak from the body
-    // it might be torn i.e. have patches from last highlight
-    this.removeCloak();
-    // Add the overlay on top of the whole body
-    this.addCloak();
-
-    const isFadingIn = this.overlayAlpha < 0.1;
-
-    if (canHighlight) {
-      if (isFadingIn) {
-        // Ignore the animation, just highlight the item at its current position
-        this.highlightedPosition = this.positionToHighlight;
-      } else {
-        // Slowly move towards the position to highlight
-        this.highlightedPosition.left += (this.positionToHighlight.left - this.highlightedPosition.left) * 0.18;
-        this.highlightedPosition.top += (this.positionToHighlight.top - this.highlightedPosition.top) * 0.18;
-        this.highlightedPosition.right += (this.positionToHighlight.right - this.highlightedPosition.right) * 0.18;
-        this.highlightedPosition.bottom += (this.positionToHighlight.bottom - this.highlightedPosition.bottom) * 0.18;
-      }
-    }
-
-    // Cut the chunk of overlay that is over the highlighted item
-    this.removeCloak({
-      posX: this.highlightedPosition.left - this.window.scrollX - this.options.padding,
-      posY: this.highlightedPosition.top - this.window.scrollY - this.options.padding,
-      width: (this.highlightedPosition.right - this.highlightedPosition.left) + (this.options.padding * 2),
-      height: (this.highlightedPosition.bottom - this.highlightedPosition.top) + (this.options.padding * 2),
-    });
-
-    // Fade the overlay in if we can highlight
-    if (canHighlight) {
-      if (!this.options.animate) {
-        this.overlayAlpha = this.options.opacity;
-      } else {
-        this.overlayAlpha += (this.options.opacity - this.overlayAlpha) * 0.08;
-      }
-    } else {
-      // otherwise fade out
-      this.overlayAlpha = Math.max((this.overlayAlpha * 0.85) - 0.02, 0);
-    }
-
-    // cancel any existing animation frames
-    // to avoid the overlapping of frames
-    this.window.cancelAnimationFrame(this.redrawAnimation);
-
-    // Continue drawing while we can highlight or we are still fading out
-    if (canHighlight || this.overlayAlpha > 0) {
-      // Add the overlay if not already there
-      if (!this.overlay.parentNode) {
-        this.document.body.appendChild(this.overlay);
-      }
-
-      // Stage a new animation frame only if the position has not been reached
-      // or the alpha has not yet fully reached fully required opacity
-      if (!this.hasPositionHighlighted()) {
-        this.redrawAnimation = this.window.requestAnimationFrame(this.draw);
-      } else if (!this.options.animate && isFadingIn) {
-        this.redrawAnimation = this.window.requestAnimationFrame(this.draw);
-      } else {
-        // Element has been highlighted
-        this.highlightedElement.onHighlighted();
-      }
-    } else if (this.overlay.parentNode) {
-      // Otherwise if the overlay is there, remove it
-      this.document.body.removeChild(this.overlay);
-    }
-  }
-
-  /**
-   * Checks if there as any position highlighted
-   * @returns {boolean}
-   */
-  hasPositionHighlighted() {
-    return this.positionToHighlight.equals(this.highlightedPosition) &&
-      this.overlayAlpha > (this.options.opacity - 0.05);
-  }
-
-  /**
-   * Removes the cloak from the given position
-   * i.e. cuts the chunk of layout which is over the element
-   * to be highlighted
-   *
-   * @param {number} posX
-   * @param {number} posY
-   * @param {number} width
-   * @param {number} height
-   */
-  removeCloak({
-    posX = 0,
-    posY = 0,
-    width = this.overlay.width,
-    height = this.overlay.height,
-  } = {}) {
-    this.context.clearRect(posX, posY, width, height);
-  }
-
-  /**
-   * Adds the overlay i.e. to cover the given
-   * position with dark overlay
-   *
-   * @param {number} posX
-   * @param {number} posY
-   * @param {number} width
-   * @param {number} height
-   */
-  addCloak({
-    posX = 0,
-    posY = 0,
-    width = this.overlay.width,
-    height = this.overlay.height,
-  } = {}) {
-    this.context.fillStyle = `rgba( 0, 0, 0, ${this.overlayAlpha} )`;
-    this.context.fillRect(posX, posY, width, height);
-  }
-
-  /**
-   * Sets the size for the overlay
-   *
-   * @param {number|null} width
-   * @param {number|null} height
-   */
-  setSize(width = null, height = null) {
-    // By default it is going to cover the whole page and then we will
-    // cut out a chunk for the element to be visible out of it
-    this.overlay.width = width || this.window.innerWidth;
-    this.overlay.height = height || this.window.innerHeight;
-  }
-
-  /**
    * Refreshes the overlay i.e. sets the size according to current window size
    * And moves the highlight around if necessary
-   *
-   * @param {boolean} animate
    */
-  refresh(animate = true) {
-    this.setSize();
+  refresh() {
+    // If no highlighted element, cancel the refresh
+    if (!this.highlightedElement) {
+      return;
+    }
 
-    // If the highlighted element was there Cancel the
-    // existing animation frame if any and highlight it again
-    // as its position might have been changed
-    if (this.highlightedElement) {
-      this.window.cancelAnimationFrame(this.redrawAnimation);
-      this.highlight(this.highlightedElement, animate);
-      this.highlightedElement.onHighlighted();
-    }
+    // Reposition the stage and show popover
+    this.highlightedElement.showPopover();
+    this.highlightedElement.showStage();
   }
 }

src/core/popover.js

@@ -6,8 +6,11 @@ import Element from './element';
   CLASS_NEXT_STEP_BTN,
-  CLASS_POPOVER_DESCRIPTION, CLASS_POPOVER_FOOTER,
+  CLASS_POPOVER_DESCRIPTION,
+  CLASS_POPOVER_FOOTER,
   CLASS_POPOVER_TIP,
-  CLASS_POPOVER_TITLE, CLASS_PREV_STEP_BTN,
+  CLASS_POPOVER_TITLE,
+  CLASS_PREV_STEP_BTN,
   ID_POPOVER,
   POPOVER_HTML,
 } from '../common/constants';
+import { createNodeFromString } from '../common/utils';
 
@@ -52,3 +55,3 @@ /**
     if (!popover) {
-      popover = Popover.createFromString(POPOVER_HTML);
+      popover = createNodeFromString(POPOVER_HTML);
       document.body.appendChild(popover);
@@ -67,26 +70,2 @@ }
 
-  /**
-   * Turn a string into a node
-   * @param  {String} htmlString to convert
-   * @return {Node}   Converted node element
-   */
-  static createFromString(htmlString) {
-    const div = document.createElement('div');
-    div.innerHTML = htmlString.trim();
-
-    // Change this to div.childNodes to support multiple top-level nodes
-    return div.firstChild;
-  }
-
-  /**
-   * Gets the size for popover
-   * @returns {{height: number, width: number}}
-   */
-  getSize() {
-    return {
-      height: Math.max(this.node.scrollHeight, this.node.offsetHeight),
-      width: Math.max(this.node.scrollWidth, this.node.offsetWidth),
-    };
-  }
-
   hide() {
@@ -96,3 +75,3 @@ this.node.style.display = 'none';
 
-  reset() {
+  setInitialState() {
     this.node.style.display = 'block';
@@ -115,3 +94,3 @@ this.node.style.left = '0';
   show(position) {
-    this.reset();
+    this.setInitialState();
 
@@ -118,0 +97,0 @@ // Set the title and descriptions

src/index.js

@@ -17,2 +17,3 @@ import Overlay from './core/overlay';
 } from './common/constants';
+import Stage from './core/stage';
 
@@ -27,3 +28,3 @@ /**
   constructor(options = {}) {
-    this.options = Object.assign({
+    this.options = {
       animate: OVERLAY_ANIMATE,     // Whether to animate or not
@@ -39,14 +40,13 @@ opacity: OVERLAY_OPACITY,     // Overlay opacity
       },
-    }, options);
+      ...options,
+    };
 
     this.document = document;
     this.window = window;
-
     this.isActivated = false;
-    this.overlay = new Overlay(this.options, this.window, this.document);
-
     this.steps = [];            // steps to be presented if any
     this.currentStep = 0;       // index for the currently highlighted step
 
-    this.onScroll = this.onScroll.bind(this);
+    this.overlay = new Overlay(this.options, window, document);
+
     this.onResize = this.onResize.bind(this);
@@ -65,4 +65,2 @@ this.onKeyUp = this.onKeyUp.bind(this);
   bind() {
-    this.document.addEventListener('scroll', this.onScroll, false);
-    this.document.addEventListener('DOMMouseScroll', this.onScroll, false);
     this.window.addEventListener('resize', this.onResize, false);
@@ -79,4 +77,3 @@ this.window.addEventListener('keyup', this.onKeyUp, false);
   onClick(e) {
-    if (!this.hasHighlightedElement() || !this.isActivated) {
-      // Has no highlighted element so ignore the click
+    if (!this.isActivated || !this.hasHighlightedElement()) {
       return;
@@ -168,3 +165,3 @@ }
     const highlightedElement = this.overlay.getHighlightedElement();
-    return highlightedElement && highlightedElement.node && highlightedElement.highlightFinished;
+    return highlightedElement && highlightedElement.node;
   }
@@ -189,18 +186,4 @@
   /**
-   * Handler for the onScroll event on document
-   * Refreshes without animation on scroll to make sure
-   * that the highlighted part travels with the scroll
-   */
-  onScroll() {
-    if (!this.isActivated) {
-      return;
-    }
-
-    this.overlay.refresh(false);
-  }
-
-  /**
    * Handler for the onResize DOM event
-   * Refreshes with animation on scroll to make sure that
-   * the highlighted part travels with the width change of window
+   * Makes sure highlighted element stays at valid position
    */
@@ -212,4 +195,3 @@ onResize() {
 
-    // Refresh with animation
-    this.overlay.refresh(true);
+    this.overlay.refresh();
   }
@@ -269,2 +251,3 @@
 
+    // If it is just a query selector string
     if (typeof currentStep === 'string') {
@@ -274,3 +257,6 @@ querySelector = currentStep;
       querySelector = currentStep.element;
-      elementOptions = Object.assign({}, this.options, currentStep);
+      elementOptions = {
+        ...this.options,
+        ...currentStep,
+      };
     }
@@ -286,12 +272,10 @@
     if (elementOptions.popover && elementOptions.popover.description) {
-      const popoverOptions = Object.assign(
-        {},
-        this.options,
-        elementOptions.popover, {
-          totalCount: allSteps.length,
-          currentIndex: index,
-          isFirst: index === 0,
-          isLast: index === allSteps.length - 1,
-        },
-      );
+      const popoverOptions = {
+        ...this.options,
+        ...elementOptions.popover,
+        totalCount: allSteps.length,
+        currentIndex: index,
+        isFirst: index === 0,
+        isLast: index === allSteps.length - 1,
+      };
 
@@ -301,3 +285,13 @@ popover = new Popover(popoverOptions, this.window, this.document);
 
-    return new Element(domElement, elementOptions, popover, this.overlay, this.window, this.document);
+    const stage = new Stage(this.options, this.window, this.document);
+
+    return new Element({
+      node: domElement,
+      options: elementOptions,
+      popover,
+      stage,
+      overlay: this.overlay,
+      window: this.window,
+      document: this.document,
+    });
   }
@@ -304,0 +298,0 @@

webpack.config.dev.js

@@ -37,3 +37,6 @@ const path = require('path');
           presets: ['env'],
-          plugins: ['babel-plugin-add-module-exports'],
+          plugins: [
+            'babel-plugin-add-module-exports',
+            'transform-object-rest-spread',
+          ],
         },
@@ -40,0 +43,0 @@ },

webpack.config.prod.js

@@ -35,3 +35,6 @@ const path = require('path');
           presets: ['env'],
-          plugins: ['babel-plugin-add-module-exports'],
+          plugins: [
+            'babel-plugin-add-module-exports',
+            'transform-object-rest-spread',
+          ],
         },
@@ -38,0 +41,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

391687

increased by0.55%

Number of package files

32

increased by6.67%

Lines of code

1643

increased by1.42%

Worsened metrics

Dev dependency count

24

increased by4.35%

Number of lines in readme file

270

decreased by-0.37%

No dependency changes