driver.js - npm Package Compare versions

Comparing version 0.6.2 to 0.7.0

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,{enumerable:!0,get:o})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(i.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)i.d(o,n,function(e){return t[e]}.bind(null,n));return o},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=9)}([function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};e.createNodeFromString=function(t){var e=document.createElement("div");return e.innerHTML=t.trim(),e.firstChild},e.getStyleProperty=function t(e,i){if(arguments.length>2&&void 0!==arguments[2]&&arguments[2]){for(var o=["","-webkit-","-ms-","moz-","-o-"],n=0;n<o.length;n++){var s=t(e,o[n]+i);if(s)return s}return""}var r="";return e.currentStyle?r=e.currentStyle[i]:document.defaultView&&document.defaultView.getComputedStyle&&(r=document.defaultView.getComputedStyle(e,null).getPropertyValue(i)),r&&r.toLowerCase?r.toLowerCase():r},e.isDomElement=function(t){return t&&"object"===(void 0===t?"undefined":o(t))&&"nodeType"in t}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});e.OVERLAY_OPACITY=.75,e.OVERLAY_PADDING=10,e.SHOULD_ANIMATE_OVERLAY=!0,e.SHOULD_OUTSIDE_CLICK_CLOSE=!0,e.ALLOW_KEYBOARD_CONTROL=!0,e.SHOULD_OUTSIDE_CLICK_NEXT=!1,e.ESC_KEY_CODE=27,e.LEFT_KEY_CODE=37,e.RIGHT_KEY_CODE=39;var o=e.ID_OVERLAY="driver-page-overlay",n=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_POSITION_RELATIVE="driver-position-relative",e.CLASS_FIX_STACKING_CONTEXT="driver-fix-stacking",e.CLASS_STAGE_NO_ANIMATION="driver-stage-no-animation",e.CLASS_POPOVER_TIP="driver-popover-tip"),l=e.CLASS_POPOVER_TITLE="driver-popover-title",h=e.CLASS_POPOVER_DESCRIPTION="driver-popover-description",a=e.CLASS_POPOVER_FOOTER="driver-popover-footer",u=e.CLASS_CLOSE_BTN="driver-close-btn",d=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="'+l+'">Popover Title</div>\n    <div class="'+h+'">Popover Description</div>\n    <div class="'+a+'">\n      <button class="'+u+'">Close</button>\n      <span class="driver-btn-group">\n        <button class="'+c+'">&larr; Previous</button>\n        <button class="'+d+'">Next &rarr;</button>\n      </span>\n    </div>\n  </div>',e.OVERLAY_HTML='<div id="'+o+'"></div>',e.STAGE_HTML='<div id="'+n+'"></div>'},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=i(1),s=i(0),r=function(t){return t&&t.__esModule?t:{default:t}}(i(5));var l=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=e.node,o=e.options,n=e.popover,s=e.stage,r=e.overlay,l=e.window,h=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=h,this.window=l,this.options=o,this.overlay=r,this.popover=n,this.stage=s,this.animationTimeout=null}return o(t,[{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:"instant",block:"center"})}catch(t){this.scrollManually()}else this.scrollManually()}},{key:"getCalculatedPosition",value:function(){var t=this.document.body,e=this.document.documentElement,i=this.window,o=this.window.pageYOffset||e.scrollTop||t.scrollTop,n=i.pageXOffset||e.scrollLeft||t.scrollLeft,s=this.node.getBoundingClientRect();return new r.default({top:s.top+o,left:s.left+n,right:s.left+n+s.width,bottom:s.top+o+s.height})}},{key:"getPopover",value:function(){return this.popover}},{key:"onDeselected",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.hidePopover(),t&&this.hideStage(),this.removeHighlightClasses(),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.addHighlightClasses();var t=this.popover;t&&!t.isInView()&&t.bringInView(),this.isInView()||this.bringInView(),this.options.onHighlighted&&this.options.onHighlighted(this)}},{key:"removeHighlightClasses",value:function(){this.node.classList.remove(n.CLASS_DRIVER_HIGHLIGHTED_ELEMENT),this.node.classList.remove(n.CLASS_POSITION_RELATIVE);for(var t=this.document.querySelectorAll("."+n.CLASS_FIX_STACKING_CONTEXT),e=0;e<t.length;e++)t[e].classList.remove(n.CLASS_FIX_STACKING_CONTEXT)}},{key:"addHighlightClasses",value:function(){this.node.classList.add(n.CLASS_DRIVER_HIGHLIGHTED_ELEMENT),this.canMakeRelative()&&this.node.classList.add(n.CLASS_POSITION_RELATIVE),this.fixStackingContext()}},{key:"fixStackingContext",value:function(){for(var t=this.node.parentNode;t&&t.tagName&&"body"!==t.tagName.toLowerCase();){var e=(0,s.getStyleProperty)(t,"z-index"),i=parseFloat((0,s.getStyleProperty)(t,"opacity")),o=(0,s.getStyleProperty)(t,"transform",!0),r=(0,s.getStyleProperty)(t,"transform-style",!0),l=(0,s.getStyleProperty)(t,"transform-box",!0),h=(0,s.getStyleProperty)(t,"filter",!0),a=(0,s.getStyleProperty)(t,"perspective",!0);(/[0-9]+/.test(e)||i<1||o&&"none"!==o||r&&"flat"!==r||l&&"border-box"!==l||h&&"none"!==h||a&&"none"!==a)&&t.classList.add(n.CLASS_FIX_STACKING_CONTEXT),t=t.parentNode}}},{key:"canMakeRelative",value:function(){var t=this.getStyleProperty("position");return-1===["absolute","fixed","relative"].indexOf(t)}},{key:"getStyleProperty",value:function(t){return(0,s.getStyleProperty)(this.node,t)}},{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=n.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});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=i(1),s=i(0),r=function(t){return t&&t.__esModule?t:{default:t}}(i(2));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=t,n.window=i,n.document=o,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,r.default),o(e,[{key:"attachNode",value:function(){var t=this.document.getElementById(n.ID_STAGE);t||(t=(0,s.createNodeFromString)(n.STAGE_HTML),document.body.appendChild(t)),this.node=t,this.options.animate?this.node.classList.remove(n.CLASS_STAGE_NO_ANIMATION):this.node.classList.add(n.CLASS_STAGE_NO_ANIMATION)}},{key:"hide",value:function(){this.node&&this.node.parentElement&&this.node.parentElement.removeChild(this.node)}},{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.attachNode(),this.setInitialStyle();var e=2*this.options.padding,i=t.right-t.left+e,o=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=o+"px",this.node.style.top=t.top-e/2+"px",this.node.style.left=t.left-e/2+"px",this.node.style.backgroundColor=this.options.stageBackground}}]),e}();e.default=l,t.exports=e.default},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var o=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var o in i)Object.prototype.hasOwnProperty.call(i,o)&&(t[o]=i[o])}return t},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=function(t){return t&&t.__esModule?t:{default:t}}(i(2)),r=i(1),l=i(0);var h=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 s=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 s.options=o({isFirst:!0,isLast:!0,totalCount:1,currentIndex:0,showButtons:!0,closeBtnText:"Close",doneBtnText:"Done",startBtnText:"Next &rarr;",nextBtnText:"Next &rarr;",prevBtnText:"&larr; Previous"},t),s.window=i,s.document=n,s.attachNode(),s.hide(),s}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,s.default),n(e,[{key:"attachNode",value:function(){var t=this.document.getElementById(r.ID_POPOVER);t||(t=(0,l.createNodeFromString)(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:"getTitleNode",value:function(){return this.titleNode}},{key:"getDescriptionNode",value:function(){return this.descriptionNode}},{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("."+r.CLASS_POPOVER_TIP).className=r.CLASS_POPOVER_TIP}},{key:"show",value:function(t){switch(this.setInitialState(),this.titleNode.innerHTML=this.options.title,this.descriptionNode.innerHTML=this.options.description||"",this.renderFooter(),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:"renderFooter",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)}}]),e}();e.default=h,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,r=e.right,l=void 0===r?0:r,h=e.bottom,a=void 0===h?0:h;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.left=o,this.right=l,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";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=i(1),s=i(0);var r=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.highlightedElement=null,this.lastHighlightedElement=null,this.hideTimer=null,this.window=i,this.document=o,this.removeNode=this.removeNode.bind(this)}return o(t,[{key:"attachNode",value:function(){var t=this.document.getElementById(n.ID_OVERLAY);t||(t=(0,s.createNodeFromString)(n.OVERLAY_HTML),document.body.appendChild(t)),this.node=t,this.node.style.opacity="0",this.options.animate||this.node.parentElement&&this.node.parentElement.removeChild(this.node)}},{key:"highlight",value:function(t){t&&t.node?t.isSame(this.highlightedElement)||(this.window.clearTimeout(this.hideTimer),t.onHighlightStarted(),this.highlightedElement&&!this.highlightedElement.isSame(this.lastHighlightedElement)&&this.highlightedElement.onDeselected(),t.getCalculatedPosition().canHighlight()&&(this.lastHighlightedElement=this.highlightedElement,this.highlightedElement=t,this.show(),this.highlightedElement.onHighlighted())):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.attachNode(),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:"getHighlightedElement",value:function(){return this.highlightedElement}},{key:"getLastHighlightedElement",value:function(){return this.lastHighlightedElement}},{key:"clear",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(this.options.onReset&&this.options.onReset(this.highlightedElement),this.highlightedElement){this.highlightedElement.onDeselected(!0)}this.highlightedElement=null,this.lastHighlightedElement=null,this.node&&(this.window.clearTimeout(this.hideTimer),this.options.animate&&!t?(this.node.style.opacity="0",this.hideTimer=this.window.setTimeout(this.removeNode,n.ANIMATION_DURATION_MS)):this.removeNode())}},{key:"removeNode",value:function(){this.node&&this.node.parentElement&&this.node.parentElement.removeChild(this.node)}},{key:"refresh",value:function(){this.highlightedElement&&(this.highlightedElement.showPopover(),this.highlightedElement.showStage())}}]),t}();e.default=r,t.exports=e.default},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var o=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var o in i)Object.prototype.hasOwnProperty.call(i,o)&&(t[o]=i[o])}return t},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=d(i(6)),r=d(i(2)),l=d(i(4)),h=i(1),a=d(i(3)),u=i(0);function d(t){return t&&t.__esModule?t:{default:t}}var c=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=o({animate:h.SHOULD_ANIMATE_OVERLAY,opacity:h.OVERLAY_OPACITY,padding:h.OVERLAY_PADDING,scrollIntoViewOptions:null,allowClose:h.SHOULD_OUTSIDE_CLICK_CLOSE,keyboardControl:h.ALLOW_KEYBOARD_CONTROL,overlayClickNext:h.SHOULD_OUTSIDE_CLICK_NEXT,stageBackground:"#ffffff",onHighlightStarted:function(){return null},onHighlighted:function(){return null},onDeselected:function(){return null},onReset:function(){return null},onNext:function(){return null},onPrevious:function(){return null}},e),this.document=document,this.window=window,this.isActivated=!1,this.steps=[],this.currentStep=0,this.currentMovePrevented=!1,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.moveNext=this.moveNext.bind(this),this.movePrevious=this.movePrevious.bind(this),this.preventMove=this.preventMove.bind(this),this.bind()}return n(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),this.window.addEventListener("touchstart",this.onClick,!1)}},{key:"onClick",value:function(t){if(this.isActivated&&this.hasHighlightedElement()){var e=this.overlay.getHighlightedElement(),i=this.document.getElementById(h.ID_POPOVER),o=e.node.contains(t.target),n=i&&i.contains(t.target);if(o||n||!this.options.overlayClickNext)if(o||n||!this.options.allowClose){var s=t.target.classList.contains(h.CLASS_NEXT_STEP_BTN),r=t.target.classList.contains(h.CLASS_PREV_STEP_BTN);t.target.classList.contains(h.CLASS_CLOSE_BTN)?this.reset():s?this.handleNext():r&&this.handlePrevious()}else this.reset();else this.handleNext()}}},{key:"onResize",value:function(){this.isActivated&&this.overlay.refresh()}},{key:"onKeyUp",value:function(t){this.isActivated&&this.options.keyboardControl&&(t.keyCode!==h.ESC_KEY_CODE?0!==this.steps.length&&(t.keyCode===h.RIGHT_KEY_CODE?this.handleNext():t.keyCode===h.LEFT_KEY_CODE&&this.handlePrevious()):this.reset())}},{key:"movePrevious",value:function(){var t=this.steps[this.currentStep-1];t?(this.overlay.highlight(t),this.currentStep-=1):this.reset()}},{key:"preventMove",value:function(){this.currentMovePrevented=!0}},{key:"handleNext",value:function(){this.currentMovePrevented=!1;var t=this.steps[this.currentStep];t.options.onNext&&t.options.onNext(this.overlay.highlightedElement),this.currentMovePrevented||this.moveNext()}},{key:"handlePrevious",value:function(){this.currentMovePrevented=!1;var t=this.steps[this.currentStep];t.options.onPrevious&&t.options.onPrevious(this.overlay.highlightedElement),this.currentMovePrevented||this.movePrevious()}},{key:"moveNext",value:function(){var t=this.steps[this.currentStep+1];t?(this.overlay.highlight(t),this.currentStep+=1):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(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.currentStep=0,this.isActivated=!1,this.overlay.clear(t)}},{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:"defineSteps",value:function(t){this.steps=[];for(var e=0;e<t.length;e++){var i=this.prepareElementFromStep(t[e],t,e);i&&this.steps.push(i)}}},{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,n={},s=t,h="string"!=typeof t&&!(0,u.isDomElement)(t);if(!t||h&&!t.element)throw new Error("Element is required in step "+i);h&&(s=t.element,n=o({},this.options,t));var d=(0,u.isDomElement)(s)?s:this.document.querySelector(s);if(!d)return console.warn("Element to highlight "+s+" not found"),null;var c=null;if(n.popover&&n.popover.title){var p=o({},this.options,n.popover,{totalCount:e.length,currentIndex:i,isFirst:0===i,isLast:i===e.length-1});c=new l.default(p,this.window,this.document)}var f=o({},this.options,n),v=new a.default(f,this.window,this.document);return new r.default({node:d,options:n,popover:c,stage:v,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=c,t.exports=e.default},function(t,e){},function(t,e,i){i(8),t.exports=i(7)}])});
+!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,{enumerable:!0,get:o})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(i.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)i.d(o,n,function(e){return t[e]}.bind(null,n));return o},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=9)}([function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};e.createNodeFromString=function(t){var e=document.createElement("div");return e.innerHTML=t.trim(),e.firstChild},e.getStyleProperty=function t(e,i){if(arguments.length>2&&void 0!==arguments[2]&&arguments[2]){for(var o=["","-webkit-","-ms-","moz-","-o-"],n=0;n<o.length;n++){var s=t(e,o[n]+i);if(s)return s}return""}var r="";return e.currentStyle?r=e.currentStyle[i]:document.defaultView&&document.defaultView.getComputedStyle&&(r=document.defaultView.getComputedStyle(e,null).getPropertyValue(i)),r&&r.toLowerCase?r.toLowerCase():r},e.isDomElement=function(t){return t&&"object"===(void 0===t?"undefined":o(t))&&"nodeType"in t}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});e.OVERLAY_OPACITY=.75,e.OVERLAY_PADDING=10,e.SHOULD_ANIMATE_OVERLAY=!0,e.SHOULD_OUTSIDE_CLICK_CLOSE=!0,e.ALLOW_KEYBOARD_CONTROL=!0,e.SHOULD_OUTSIDE_CLICK_NEXT=!1,e.ESC_KEY_CODE=27,e.LEFT_KEY_CODE=37,e.RIGHT_KEY_CODE=39;var o=e.ID_OVERLAY="driver-page-overlay",n=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_POSITION_RELATIVE="driver-position-relative",e.CLASS_FIX_STACKING_CONTEXT="driver-fix-stacking",e.CLASS_STAGE_NO_ANIMATION="driver-stage-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",p=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      <button class="'+d+'">Close</button>\n      <span class="driver-btn-group">\n        <button class="'+p+'">&larr; Previous</button>\n        <button class="'+u+'">Next &rarr;</button>\n      </span>\n    </div>\n  </div>',e.OVERLAY_HTML='<div id="'+o+'"></div>',e.STAGE_HTML='<div id="'+n+'"></div>'},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=i(1),s=i(0),r=function(t){return t&&t.__esModule?t:{default:t}}(i(5));var h=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=e.node,o=e.options,n=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=o,this.overlay=r,this.popover=n,this.stage=s,this.animationTimeout=null}return o(t,[{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:"instant",block:"center"})}catch(t){this.scrollManually()}else this.scrollManually()}},{key:"getCalculatedPosition",value:function(){var t=this.document.body,e=this.document.documentElement,i=this.window,o=this.window.pageYOffset||e.scrollTop||t.scrollTop,n=i.pageXOffset||e.scrollLeft||t.scrollLeft,s=this.node.getBoundingClientRect();return new r.default({top:s.top+o,left:s.left+n,right:s.left+n+s.width,bottom:s.top+o+s.height})}},{key:"getPopover",value:function(){return this.popover}},{key:"onDeselected",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.hidePopover(),t&&this.hideStage(),this.removeHighlightClasses(),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.addHighlightClasses();var t=this.popover;t&&!t.isInView()&&t.bringInView(),this.isInView()||this.bringInView(),this.options.onHighlighted&&this.options.onHighlighted(this)}},{key:"removeHighlightClasses",value:function(){this.node.classList.remove(n.CLASS_DRIVER_HIGHLIGHTED_ELEMENT),this.node.classList.remove(n.CLASS_POSITION_RELATIVE);for(var t=this.document.querySelectorAll("."+n.CLASS_FIX_STACKING_CONTEXT),e=0;e<t.length;e++)t[e].classList.remove(n.CLASS_FIX_STACKING_CONTEXT)}},{key:"addHighlightClasses",value:function(){this.node.classList.add(n.CLASS_DRIVER_HIGHLIGHTED_ELEMENT),this.canMakeRelative()&&this.node.classList.add(n.CLASS_POSITION_RELATIVE),this.fixStackingContext()}},{key:"fixStackingContext",value:function(){for(var t=this.node.parentNode;t&&t.tagName&&"body"!==t.tagName.toLowerCase();){var e=(0,s.getStyleProperty)(t,"z-index"),i=parseFloat((0,s.getStyleProperty)(t,"opacity")),o=(0,s.getStyleProperty)(t,"transform",!0),r=(0,s.getStyleProperty)(t,"transform-style",!0),h=(0,s.getStyleProperty)(t,"transform-box",!0),l=(0,s.getStyleProperty)(t,"filter",!0),a=(0,s.getStyleProperty)(t,"perspective",!0);(/[0-9]+/.test(e)||i<1||o&&"none"!==o||r&&"flat"!==r||h&&"border-box"!==h||l&&"none"!==l||a&&"none"!==a)&&t.classList.add(n.CLASS_FIX_STACKING_CONTEXT),t=t.parentNode}}},{key:"canMakeRelative",value:function(){var t=this.getStyleProperty("position");return-1===["absolute","fixed","relative"].indexOf(t)}},{key:"getStyleProperty",value:function(t){return(0,s.getStyleProperty)(this.node,t)}},{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=n.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=h,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=i(1),s=i(0),r=function(t){return t&&t.__esModule?t:{default:t}}(i(2));var h=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=t,n.window=i,n.document=o,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,r.default),o(e,[{key:"attachNode",value:function(){var t=this.document.getElementById(n.ID_STAGE);t||(t=(0,s.createNodeFromString)(n.STAGE_HTML),document.body.appendChild(t)),this.node=t,this.options.animate?this.node.classList.remove(n.CLASS_STAGE_NO_ANIMATION):this.node.classList.add(n.CLASS_STAGE_NO_ANIMATION)}},{key:"hide",value:function(){this.node&&this.node.parentElement&&this.node.parentElement.removeChild(this.node)}},{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.attachNode(),this.setInitialStyle();var e=2*this.options.padding,i=t.right-t.left+e,o=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=o+"px",this.node.style.top=t.top-e/2+"px",this.node.style.left=t.left-e/2+"px",this.node.style.backgroundColor=this.options.stageBackground}}]),e}();e.default=h,t.exports=e.default},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var o=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var o in i)Object.prototype.hasOwnProperty.call(i,o)&&(t[o]=i[o])}return t},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=function(t){return t&&t.__esModule?t:{default:t}}(i(2)),r=i(1),h=i(0);var l=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 s=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 s.options=o({isFirst:!0,isLast:!0,totalCount:1,currentIndex:0,offset:0,showButtons:!0,closeBtnText:"Close",doneBtnText:"Done",startBtnText:"Next &rarr;",nextBtnText:"Next &rarr;",prevBtnText:"&larr; Previous"},t),s.window=i,s.document=n,s.attachNode(),s.hide(),s}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,s.default),n(e,[{key:"attachNode",value:function(){var t=this.document.getElementById(r.ID_POPOVER);t||(t=(0,h.createNodeFromString)(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:"getTitleNode",value:function(){return this.titleNode}},{key:"getDescriptionNode",value:function(){return this.descriptionNode}},{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("."+r.CLASS_POPOVER_TIP).className=r.CLASS_POPOVER_TIP}},{key:"show",value:function(t){switch(this.setInitialState(),this.titleNode.innerHTML=this.options.title,this.descriptionNode.innerHTML=this.options.description||"",this.renderFooter(),this.options.position){case"left":case"left-top":this.positionOnLeft(t);break;case"left-center":this.positionOnLeftCenter(t);break;case"left-bottom":this.positionOnLeftBottom(t);break;case"right":case"right-top":this.positionOnRight(t);break;case"right-center":this.positionOnRightCenter(t);break;case"right-bottom":this.positionOnRightBottom(t);break;case"top":case"top-left":this.positionOnTop(t);break;case"top-center":this.positionOnTopCenter(t);break;case"top-right":this.positionOnTopRight(t);break;case"bottom":case"bottom-left":this.positionOnBottom(t);break;case"bottom-center":this.positionOnBottomCenter(t);break;case"bottom-right":this.positionOnBottomRight(t);break;case"auto":default:this.autoPosition(t)}}},{key:"renderFooter",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.offset-this.options.padding+"px",this.node.style.right="",this.node.style.bottom="",this.tipNode.classList.add("right")}},{key:"positionOnLeftBottom",value:function(t){var e=this.getSize(),i=e.width,o=this.options.padding+10;this.node.style.left=t.left-i-o+"px",this.node.style.top=t.bottom+this.options.padding+this.options.offset-e.height+"px",this.node.style.bottom="",this.node.style.right="",this.tipNode.classList.add("right","position-bottom")}},{key:"positionOnLeftCenter",value:function(t){var e=this.getSize(),i=e.width,o=e.height/2,n=this.options.padding+10,s=(t.bottom-t.top)/2,r=t.top-o+s+this.options.offset;this.node.style.left=t.left-i-n+"px",this.node.style.top=r+"px",this.node.style.right="",this.node.style.bottom="",this.tipNode.classList.add("right","position-center")}},{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.offset-this.options.padding+"px",this.node.style.right="",this.node.style.bottom="",this.tipNode.classList.add("left")}},{key:"positionOnRightCenter",value:function(t){var e=this.getSize(),i=this.options.padding+10,o=e.height/2,n=(t.bottom-t.top)/2,s=t.top-o+n+this.options.offset;this.node.style.left=t.right+i+"px",this.node.style.top=s+"px",this.node.style.right="",this.node.style.bottom="",this.tipNode.classList.add("left","position-center")}},{key:"positionOnRightBottom",value:function(t){var e=this.options.padding+10,i=this.getSize();this.node.style.left=t.right+e+"px",this.node.style.top=t.bottom+this.options.padding+this.options.offset-i.height+"px",this.node.style.bottom="",this.node.style.right="",this.tipNode.classList.add("left","position-bottom")}},{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+this.options.offset+"px",this.node.style.right="",this.node.style.bottom="",this.tipNode.classList.add("bottom")}},{key:"positionOnTopCenter",value:function(t){var e=this.getSize(),i=e.height,o=e.width/2,n=this.options.padding+10,s=this.options.offset+t.left+(t.right-t.left)/2;this.node.style.top=t.top-i-n+"px",this.node.style.left=s-o-this.options.padding+"px",this.node.style.right="",this.node.style.bottom="",this.tipNode.classList.add("bottom","position-center")}},{key:"positionOnTopRight",value:function(t){var e=this.getSize(),i=e.height,o=this.options.padding+10;this.node.style.top=t.top-i-o+"px",this.node.style.left=t.right+this.options.padding+this.options.offset-e.width+"px",this.node.style.right="",this.node.style.bottom="",this.tipNode.classList.add("bottom","position-right")}},{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+this.options.offset+"px",this.node.style.right="",this.node.style.bottom="",this.tipNode.classList.add("top")}},{key:"positionOnBottomCenter",value:function(t){var e=this.getSize().width/2,i=this.options.padding+10,o=this.options.offset+t.left+(t.right-t.left)/2;this.node.style.top=t.bottom+i+"px",this.node.style.left=o-e-this.options.padding+"px",this.node.style.right="",this.node.style.bottom="",this.tipNode.classList.add("top","position-center")}},{key:"positionOnBottomRight",value:function(t){var e=this.getSize(),i=this.options.padding+10;this.node.style.top=t.bottom+i+"px",this.node.style.left=t.right+this.options.padding+this.options.offset-e.width+"px",this.node.style.right="",this.node.style.bottom="",this.tipNode.classList.add("top","position-right")}},{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)}}]),e}();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}}();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,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=o,this.right=h,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";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=i(1),s=i(0);var r=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.highlightedElement=null,this.lastHighlightedElement=null,this.hideTimer=null,this.window=i,this.document=o,this.removeNode=this.removeNode.bind(this)}return o(t,[{key:"attachNode",value:function(){var t=this.document.getElementById(n.ID_OVERLAY);t||(t=(0,s.createNodeFromString)(n.OVERLAY_HTML),document.body.appendChild(t)),this.node=t,this.node.style.opacity="0",this.options.animate||this.node.parentElement&&this.node.parentElement.removeChild(this.node)}},{key:"highlight",value:function(t){t&&t.node?t.isSame(this.highlightedElement)||(this.window.clearTimeout(this.hideTimer),t.onHighlightStarted(),this.highlightedElement&&!this.highlightedElement.isSame(this.lastHighlightedElement)&&this.highlightedElement.onDeselected(),t.getCalculatedPosition().canHighlight()&&(this.lastHighlightedElement=this.highlightedElement,this.highlightedElement=t,this.show(),this.highlightedElement.onHighlighted())):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.attachNode(),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:"getHighlightedElement",value:function(){return this.highlightedElement}},{key:"getLastHighlightedElement",value:function(){return this.lastHighlightedElement}},{key:"clear",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(this.options.onReset&&this.options.onReset(this.highlightedElement),this.highlightedElement){this.highlightedElement.onDeselected(!0)}this.highlightedElement=null,this.lastHighlightedElement=null,this.node&&(this.window.clearTimeout(this.hideTimer),this.options.animate&&!t?(this.node.style.opacity="0",this.hideTimer=this.window.setTimeout(this.removeNode,n.ANIMATION_DURATION_MS)):this.removeNode())}},{key:"removeNode",value:function(){this.node&&this.node.parentElement&&this.node.parentElement.removeChild(this.node)}},{key:"refresh",value:function(){this.highlightedElement&&(this.highlightedElement.showPopover(),this.highlightedElement.showStage())}}]),t}();e.default=r,t.exports=e.default},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var o=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var o in i)Object.prototype.hasOwnProperty.call(i,o)&&(t[o]=i[o])}return t},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=u(i(6)),r=u(i(2)),h=u(i(4)),l=i(1),a=u(i(3)),d=i(0);function u(t){return t&&t.__esModule?t:{default:t}}var p=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=o({animate:l.SHOULD_ANIMATE_OVERLAY,opacity:l.OVERLAY_OPACITY,padding:l.OVERLAY_PADDING,scrollIntoViewOptions:null,allowClose:l.SHOULD_OUTSIDE_CLICK_CLOSE,keyboardControl:l.ALLOW_KEYBOARD_CONTROL,overlayClickNext:l.SHOULD_OUTSIDE_CLICK_NEXT,stageBackground:"#ffffff",onHighlightStarted:function(){return null},onHighlighted:function(){return null},onDeselected:function(){return null},onReset:function(){return null},onNext:function(){return null},onPrevious:function(){return null}},e),this.document=document,this.window=window,this.isActivated=!1,this.steps=[],this.currentStep=0,this.currentMovePrevented=!1,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.moveNext=this.moveNext.bind(this),this.movePrevious=this.movePrevious.bind(this),this.preventMove=this.preventMove.bind(this),this.bind()}return n(t,[{key:"getSteps",value:function(){return this.steps}},{key:"setSteps",value:function(t){this.steps=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),this.window.addEventListener("touchstart",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),o=e.node.contains(t.target),n=i&&i.contains(t.target);if(o||n||!this.options.overlayClickNext)if(o||n||!this.options.allowClose){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.handleNext():r&&this.handlePrevious()}else this.reset();else this.handleNext()}}},{key:"onResize",value:function(){this.isActivated&&this.overlay.refresh()}},{key:"onKeyUp",value:function(t){this.isActivated&&this.options.keyboardControl&&(t.keyCode!==l.ESC_KEY_CODE?0!==this.steps.length&&(t.keyCode===l.RIGHT_KEY_CODE?this.handleNext():t.keyCode===l.LEFT_KEY_CODE&&this.handlePrevious()):this.reset())}},{key:"movePrevious",value:function(){var t=this.steps[this.currentStep-1];t?(this.overlay.highlight(t),this.currentStep-=1):this.reset()}},{key:"preventMove",value:function(){this.currentMovePrevented=!0}},{key:"handleNext",value:function(){this.currentMovePrevented=!1;var t=this.steps[this.currentStep];t.options.onNext&&t.options.onNext(this.overlay.highlightedElement),this.currentMovePrevented||this.moveNext()}},{key:"handlePrevious",value:function(){this.currentMovePrevented=!1;var t=this.steps[this.currentStep];t.options.onPrevious&&t.options.onPrevious(this.overlay.highlightedElement),this.currentMovePrevented||this.movePrevious()}},{key:"moveNext",value:function(){var t=this.steps[this.currentStep+1];t?(this.overlay.highlight(t),this.currentStep+=1):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(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.currentStep=0,this.isActivated=!1,this.overlay.clear(t)}},{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:"defineSteps",value:function(t){this.steps=[];for(var e=0;e<t.length;e++){var i=this.prepareElementFromStep(t[e],t,e);i&&this.steps.push(i)}}},{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,n={},s=t,l="string"!=typeof t&&!(0,d.isDomElement)(t);if(!t||l&&!t.element)throw new Error("Element is required in step "+i);l&&(s=t.element,n=o({},this.options,t));var u=(0,d.isDomElement)(s)?s:this.document.querySelector(s);if(!u)return console.warn("Element to highlight "+s+" not found"),null;var p=null;if(n.popover&&n.popover.title){var c=o({},this.options,n.popover,{totalCount:e.length,currentIndex:i,isFirst:0===i,isLast:i===e.length-1});p=new h.default(c,this.window,this.document)}var f=o({},this.options,n),v=new a.default(f,this.window,this.document);return new r.default({node:u,options:n,popover:p,stage:v,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=p,t.exports=e.default},function(t,e){},function(t,e,i){i(8),t.exports=i(7)}])});
 //# sourceMappingURL=driver.min.js.map

package.json

 {
   "name": "driver.js",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "A light-weight, no-dependency, vanilla JavaScript library to drive the user's focus across the page",
@@ -5,0 +5,0 @@ "main": "dist/driver.min.js",

readme.md

@@ -35,3 +35,3 @@ <h1 align="center"><img height="150" src="./demo/images/driver.png" /><br> Driver.js</h1>
 
-**No**, it is not. **Tours are just one of the many use-cases**. Driver.js can be used wherever you need some sort of overlay for the page; some common usecases could be: e.g. dimming the background when user is interacting with some component i.e. [the way Facebook does](https://i.imgur.com/Q3PzaKk.png) when you try to create a post, using it as a focus shifter to bring user's attention to some component on page, or using it to simulate those "Turn off the Lights" widgets that you might have seen on video players online, etc.
+**No**, it is not. **Tours are just one of the many use-cases**. Driver.js can be used wherever you need some sort of overlay for the page; some common usecases could be: e.g. dimming the background when user is interacting with some component i.e. [the way Facebook does](https://i.imgur.com/Q3PzaKkr.png) when you try to create a post, using it as a focus shifter to bring user's attention to some component on page, or using it to simulate those "Turn off the Lights" widgets that you might have seen on video players online, etc.
 
@@ -105,3 +105,6 @@ Driver.js is written in Vanilla JS, has zero dependencies and is highly customizable. It has several options allowing you to manipulate how it behaves and also **provides you the hooks** to manipulate the elements as they are highlighted, about to be highlighted, or deselected.
     description: 'Description for it',
-    position: 'left', // can be `top`, `left`, `right`, `bottom`
+    // position can be left, left-center, left-bottom, top,
+    // top-center, top-right, right, right-center, right-bottom,
+    // bottom, bottom-center, bottom-right
+    position: 'left',
   }
@@ -111,2 +114,19 @@ });
 
+You can also add offset to the popover position by using the `offset` property
+
+```javascript
+const driver = new Driver();
+driver.highlight({
+  element: '#some-element',
+  popover: {
+    title: 'Title for the Popover',
+    description: 'Description for it',
+    position: 'bottom',
+    // Will show it 20 pixels away from the actual position of popover
+    // You may also provide the negative values
+    offset: 20,
+  }
+});
+```
+
 ### Creating Feature Introductions – [Demo](http://kamranahmed.info/driver.js)
@@ -113,0 +133,0 @@

src/core/element.js

@@ -114,2 +114,3 @@ import {
    * @public
+   * @return {Position}
    */
@@ -116,0 +117,0 @@ getCalculatedPosition() {

src/core/popover.js

@@ -33,2 +33,3 @@ import Element from './element';
       currentIndex: 0,
+      offset: 0,
       showButtons: true,
@@ -131,13 +132,41 @@ closeBtnText: 'Close',
       case 'left':
+      case 'left-top':
         this.positionOnLeft(position);
         break;
+      case 'left-center':
+        this.positionOnLeftCenter(position);
+        break;
+      case 'left-bottom':
+        this.positionOnLeftBottom(position);
+        break;
       case 'right':
+      case 'right-top':
         this.positionOnRight(position);
         break;
+      case 'right-center':
+        this.positionOnRightCenter(position);
+        break;
+      case 'right-bottom':
+        this.positionOnRightBottom(position);
+        break;
       case 'top':
+      case 'top-left':
         this.positionOnTop(position);
         break;
+      case 'top-center':
+        this.positionOnTopCenter(position);
+        break;
+      case 'top-right':
+        this.positionOnTopRight(position);
+        break;
       case 'bottom':
+      case 'bottom-left':
         this.positionOnBottom(position);
         break;
+      case 'bottom-center':
+        this.positionOnBottomCenter(position);
+        break;
+      case 'bottom-right':
+        this.positionOnBottomRight(position);
+        break;
       case 'auto':
@@ -191,3 +220,3 @@ default:
     this.node.style.left = `${elementPosition.left - popoverWidth - popoverMargin}px`;
-    this.node.style.top = `${elementPosition.top - this.options.padding}px`;
+    this.node.style.top = `${(elementPosition.top + this.options.offset) - this.options.padding}px`;
     this.node.style.right = '';
@@ -200,2 +229,45 @@ this.node.style.bottom = '';
   /**
+   * Shows the popover on the left of the given position
+   * @param {Position} elementPosition
+   * @private
+   */
+  positionOnLeftBottom(elementPosition) {
+    const popoverDimensions = this.getSize();
+
+    const popoverWidth = popoverDimensions.width;
+    const popoverMargin = this.options.padding + 10;  // adding 10 to give it a little distance from the element
+
+    this.node.style.left = `${elementPosition.left - popoverWidth - popoverMargin}px`;
+    this.node.style.top = `${(elementPosition.bottom + this.options.padding + this.options.offset) - popoverDimensions.height}px`;
+    this.node.style.bottom = '';
+    this.node.style.right = '';
+
+    this.tipNode.classList.add('right', 'position-bottom');
+  }
+
+  /**
+   * Shows the popover on the left center of the given position
+   * @param {Position} elementPosition
+   * @private
+   */
+  positionOnLeftCenter(elementPosition) {
+    const popoverDimensions = this.getSize();
+
+    const popoverWidth = popoverDimensions.width;
+    const popoverHeight = popoverDimensions.height;
+    const popoverCenter = popoverHeight / 2;
+
+    const popoverMargin = this.options.padding + 10;  // adding 10 to give it a little distance from the element
+    const elementCenter = (elementPosition.bottom - elementPosition.top) / 2;
+    const topCenterPosition = (elementPosition.top - popoverCenter) + elementCenter + this.options.offset;
+
+    this.node.style.left = `${elementPosition.left - popoverWidth - popoverMargin}px`;
+    this.node.style.top = `${topCenterPosition}px`;
+    this.node.style.right = '';
+    this.node.style.bottom = '';
+
+    this.tipNode.classList.add('right', 'position-center');
+  }
+
+  /**
    * Shows the popover on the right of the given position
@@ -209,3 +281,3 @@ * @param {Position} elementPosition
     this.node.style.left = `${elementPosition.right + popoverMargin}px`;
-    this.node.style.top = `${elementPosition.top - this.options.padding}px`;
+    this.node.style.top = `${(elementPosition.top + this.options.offset) - this.options.padding}px`;
     this.node.style.right = '';
@@ -218,2 +290,41 @@ this.node.style.bottom = '';
   /**
+   * Shows the popover on the right of the given position
+   * @param {Position} elementPosition
+   * @private
+   */
+  positionOnRightCenter(elementPosition) {
+    const popoverDimensions = this.getSize();
+    const popoverMargin = this.options.padding + 10;  // adding 10 to give it a little distance from the element
+
+    const popoverHeight = popoverDimensions.height;
+    const popoverCenter = popoverHeight / 2;
+    const elementCenter = (elementPosition.bottom - elementPosition.top) / 2;
+    const topCenterPosition = (elementPosition.top - popoverCenter) + elementCenter + this.options.offset;
+
+    this.node.style.left = `${elementPosition.right + popoverMargin}px`;
+    this.node.style.top = `${topCenterPosition}px`;
+    this.node.style.right = '';
+    this.node.style.bottom = '';
+
+    this.tipNode.classList.add('left', 'position-center');
+  }
+
+  /**
+   * Shows the popover on the right of the given position
+   * @param {Position} elementPosition
+   * @private
+   */
+  positionOnRightBottom(elementPosition) {
+    const popoverMargin = this.options.padding + 10;  // adding 10 to give it a little distance from the element
+    const popoverDimensions = this.getSize();
+
+    this.node.style.left = `${elementPosition.right + popoverMargin}px`;
+    this.node.style.top = `${(elementPosition.bottom + this.options.padding + this.options.offset) - popoverDimensions.height}px`;
+    this.node.style.bottom = '';
+    this.node.style.right = '';
+
+    this.tipNode.classList.add('left', 'position-bottom');
+  }
+
+  /**
    * Shows the popover on the top of the given position
@@ -228,3 +339,3 @@ * @param {Position} elementPosition
     this.node.style.top = `${elementPosition.top - popoverHeight - popoverMargin}px`;
-    this.node.style.left = `${elementPosition.left - this.options.padding}px`;
+    this.node.style.left = `${(elementPosition.left - this.options.padding) + this.options.offset}px`;
     this.node.style.right = '';
@@ -237,2 +348,43 @@ this.node.style.bottom = '';
   /**
+   * Shows the popover on the top center of the given position
+   * @param {Position} elementPosition
+   * @private
+   */
+  positionOnTopCenter(elementPosition) {
+    const dimensions = this.getSize();
+    const popoverHeight = dimensions.height;
+    const popoverWidth = dimensions.width / 2;
+
+    const popoverMargin = this.options.padding + 10;  // adding 10 to give it a little distance from the element
+    const nodeCenter = this.options.offset + elementPosition.left + ((elementPosition.right - elementPosition.left) / 2);
+
+    this.node.style.top = `${elementPosition.top - popoverHeight - popoverMargin}px`;
+    this.node.style.left = `${nodeCenter - popoverWidth - this.options.padding}px`;
+    this.node.style.right = '';
+    this.node.style.bottom = '';
+
+    // Add the tip at the top center
+    this.tipNode.classList.add('bottom', 'position-center');
+  }
+
+  /**
+   * Shows the popover on the top right of the given position
+   * @param {Position} elementPosition
+   * @private
+   */
+  positionOnTopRight(elementPosition) {
+    const dimensions = this.getSize();
+    const popoverHeight = dimensions.height;
+    const popoverMargin = this.options.padding + 10;  // adding 10 to give it a little distance from the element
+
+    this.node.style.top = `${elementPosition.top - popoverHeight - popoverMargin}px`;
+    this.node.style.left = `${(elementPosition.right + this.options.padding + this.options.offset) - dimensions.width}px`;
+    this.node.style.right = '';
+    this.node.style.bottom = '';
+
+    // Add the tip at the top center
+    this.tipNode.classList.add('bottom', 'position-right');
+  }
+
+  /**
    * Shows the popover on the bottom of the given position
@@ -246,3 +398,3 @@ * @param {Position} elementPosition
     this.node.style.top = `${elementPosition.bottom + popoverMargin}px`;
-    this.node.style.left = `${elementPosition.left - this.options.padding}px`;
+    this.node.style.left = `${(elementPosition.left - this.options.padding) + this.options.offset}px`;
     this.node.style.right = '';
@@ -255,2 +407,39 @@ this.node.style.bottom = '';
   /**
+   * Shows the popover on the bottom-center of the given position
+   * @param {Position} elementPosition
+   * @private
+   */
+  positionOnBottomCenter(elementPosition) {
+    const popoverWidth = this.getSize().width / 2;
+    const popoverMargin = this.options.padding + 10;  // adding 10 to give it a little distance from the element
+    const nodeCenter = this.options.offset + elementPosition.left + ((elementPosition.right - elementPosition.left) / 2);
+
+    this.node.style.top = `${elementPosition.bottom + popoverMargin}px`;
+    this.node.style.left = `${nodeCenter - popoverWidth - this.options.padding}px`;
+    this.node.style.right = '';
+    this.node.style.bottom = '';
+
+    // Add the tip at the top center
+    this.tipNode.classList.add('top', 'position-center');
+  }
+
+  /**
+   * Shows the popover on the bottom-right of the given position
+   * @param {Position} elementPosition
+   * @private
+   */
+  positionOnBottomRight(elementPosition) {
+    const dimensions = this.getSize();
+    const popoverMargin = this.options.padding + 10;  // adding 10 to give it a little distance from the element
+
+    this.node.style.top = `${elementPosition.bottom + popoverMargin}px`;
+    this.node.style.left = `${(elementPosition.right + this.options.padding + this.options.offset) - dimensions.width}px`;
+    this.node.style.right = '';
+    this.node.style.bottom = '';
+
+    // Add the tip at the top center
+    this.tipNode.classList.add('top', 'position-right');
+  }
+
+  /**
    * Automatically positions the popover around the given position
@@ -257,0 +446,0 @@ * such that the element and popover remain in view

src/index.js

@@ -69,2 +69,20 @@ import Overlay from './core/overlay';
   /**
+   * Getter for steps property
+   * @readonly
+   * @public
+   */
+  getSteps() {
+    return this.steps;
+  }
+
+  /**
+   * Setter for steps property
+   * @param steps
+   * @public
+   */
+  setSteps(steps) {
+    this.steps = steps;
+  }
+
+  /**
    * Binds any DOM events listeners
@@ -71,0 +89,0 @@ * @todo: add throttling in all the listeners

types/index.d.ts

@@ -45,2 +45,12 @@ declare module 'driver.js' {
     /**
+     * Public getter for steps property
+     */
+    public getSteps(): Array<Driver.Step>;
+
+    /**
+     * Public setter for steps property
+     */
+    public setSteps(): Array<Driver.Step>;
+
+    /**
      * Does the required bindings for DOM Events
@@ -484,2 +494,14 @@ */
       /**
+       * Positions the popover to the left-center of the given element position
+       * @param {Driver.Position} position
+       */
+      private positionOnLeftCenter(position: Driver.Position): void;
+
+      /**
+       * Positions the popover to the left-bottom of the given element position
+       * @param {Driver.Position} position
+       */
+      private positionOnLeftBottom(position: Driver.Position): void;
+
+      /**
        * Positions the popover to the right of the given element position
@@ -491,2 +513,14 @@ * @param {Driver.Position} position
       /**
+       * Positions the popover to the right-center of the given element position
+       * @param {Driver.Position} position
+       */
+      private positionOnRightCenter(position: Driver.Position): void;
+
+      /**
+       * Positions the popover to the right-bottom of the given element position
+       * @param {Driver.Position} position
+       */
+      private positionOnRightBottom(position: Driver.Position): void;
+
+      /**
        * Positions the popover to the top of the given element position
@@ -498,2 +532,14 @@ * @param {Driver.Position} position
       /**
+       * Positions the popover to the top-center of the given element position
+       * @param {Driver.Position} position
+       */
+      private positionOnTopCenter(position: Driver.Position): void;
+
+      /**
+       * Positions the popover to the top-right of the given element position
+       * @param {Driver.Position} position
+       */
+      private positionOnTopRight(position: Driver.Position): void;
+
+      /**
        * Positions the popover to the bottom of the given element position
@@ -505,2 +551,14 @@ * @param {Driver.Position} position
       /**
+       * Positions the popover to the bottom-center of the given element position
+       * @param {Driver.Position} position
+       */
+      private positionOnBottomCenter(position: Driver.Position): void;
+
+      /**
+       * Positions the popover to the bottom-right of the given element position
+       * @param {Driver.Position} position
+       */
+      private positionOnBottomRight(position: Driver.Position): void;
+
+      /**
        * Positions the popover automatically around the element position
@@ -635,2 +693,8 @@ * @param {Driver.Position} position
       /**
+       * Additional offset of the popover
+       * @default 0
+       */
+      offset?: number;
+
+      /**
        * Counter for the current popover
@@ -637,0 +701,0 @@ * @default 0

No alert changes

Improved metrics

Total package byte prevSize

666106

increased by2.22%

Lines of code

2471

increased by11.01%

Number of lines in readme file

370

increased by5.71%

No dependency changes