Rename from sholo to driver

demo/scripts/demo.js

 /* eslint-disable */
 
-const tourSholo = new Sholo({
+const tourDriver = new Driver({
   animate: true,
   opacity: 0.8,
   padding: 5,
   showButtons: false,
 });
 
-tourSholo.defineSteps([
+tourDriver.defineSteps([
   {
     element: '.emoji',
     popover: {
@@ -66,7 +66,7 @@ tourSholo.defineSteps([
 
 document.querySelector('.btn__example')
   .addEventListener('click', () => {
-    tourSholo.start();
+    tourDriver.start();
   });
 
 
@@ -78,33 +78,33 @@ document.querySelectorAll('pre code').forEach((element) => {
 /////////////////////////////////////////////
 // First example – highlighting without popover
 /////////////////////////////////////////////
-const singleSholoNoPopover = new Sholo();
+const singleDriverNoPopover = new Driver();
 document.querySelector('#run-single-element-no-popover')
   .addEventListener('click', (e) => {
     e.preventDefault();
-    singleSholoNoPopover.highlight('#single-element-no-popover');
+    singleDriverNoPopover.highlight('#single-element-no-popover');
   });
 
 /////////////////////////////////////////////
 // Form focus examples
 /////////////////////////////////////////////
-const focusSholo = new Sholo({ padding: 0 });
+const focusDriver = new Driver({ padding: 0 });
 const inputIds = ['creation-input', 'creation-input-2', 'creation-input-3', 'creation-input-4'];
 inputIds.forEach(inputId => {
   // Highlight the section on focus
   document.getElementById(inputId).addEventListener('focus', () => {
-    focusSholo.highlight(`#${inputId}`);
+    focusDriver.highlight(`#${inputId}`);
   });
 });
 
 /////////////////////////////////////////////
 // Highlighting single element with popover
 /////////////////////////////////////////////
-const singleSholoWithPopover = new Sholo();
+const singleDriverWithPopover = new Driver();
 document.querySelector('#run-single-element-with-popover')
   .addEventListener('click', (e) => {
     e.preventDefault();
-    singleSholoWithPopover.highlight({
+    singleDriverWithPopover.highlight({
       element: '#single-element-with-popover',
       popover: {
         title: 'Did you know?',
@@ -117,12 +117,12 @@ document.querySelector('#run-single-element-with-popover')
 /////////////////////////////////////////////////////
 // Highlighting single element with popover position
 /////////////////////////////////////////////////////
-const singleSholoWithPopoverPosition = new Sholo();
+const singleDriverWithPopoverPosition = new Driver();
 document.querySelector('#run-single-element-with-popover-position')
   .addEventListener('click', (e) => {
     e.preventDefault();
 
-    singleSholoWithPopoverPosition.highlight({
+    singleDriverWithPopoverPosition.highlight({
       element: '#single-element-with-popover-position',
       popover: {
         title: 'Did you know?',
@@ -135,7 +135,7 @@ document.querySelector('#run-single-element-with-popover-position')
 /////////////////////////////////////////////////////
 // Highlighting single element with popover position
 /////////////////////////////////////////////////////
-const positionBtnsSholo = new Sholo({
+const positionBtnsDriver = new Driver({
   padding: 0,
 });
 
@@ -143,7 +143,7 @@ document.querySelector('#position-btn-left')
   .addEventListener('click', (e) => {
     e.preventDefault();
 
-    positionBtnsSholo.highlight({
+    positionBtnsDriver.highlight({
       element: '#position-btn-left',
       popover: {
         title: 'Did you know?',
@@ -157,7 +157,7 @@ document.querySelector('#position-btn-right')
   .addEventListener('click', (e) => {
     e.preventDefault();
 
-    positionBtnsSholo.highlight({
+    positionBtnsDriver.highlight({
       element: '#position-btn-right',
       popover: {
         title: 'Did you know?',
@@ -171,7 +171,7 @@ document.querySelector('#position-btn-bottom')
   .addEventListener('click', (e) => {
     e.preventDefault();
 
-    positionBtnsSholo.highlight({
+    positionBtnsDriver.highlight({
       element: '#position-btn-bottom',
       popover: {
         title: 'Did you know?',
@@ -185,7 +185,7 @@ document.querySelector('#position-btn-top')
   .addEventListener('click', (e) => {
     e.preventDefault();
 
-    positionBtnsSholo.highlight({
+    positionBtnsDriver.highlight({
       element: '#position-btn-top',
       popover: {
         title: 'Did you know?',
@@ -198,13 +198,13 @@ document.querySelector('#position-btn-top')
 /////////////////////////////////////////////////////
 // Highlighting single element with popover position
 /////////////////////////////////////////////////////
-const htmlSholo = new Sholo();
+const htmlDriver = new Driver();
 
 document.querySelector('#run-single-element-with-popover-html')
   .addEventListener('click', (e) => {
     e.preventDefault();
 
-    htmlSholo.highlight({
+    htmlDriver.highlight({
       element: '#single-element-with-popover-html',
       popover: {
         title: '<em>Tags</em> in title or <u>body</u>',
@@ -217,7 +217,7 @@ document.querySelector('#run-single-element-with-popover-html')
 /////////////////////////////////////////////////////
 // Without Overlay Example
 /////////////////////////////////////////////////////
-const withoutOverlay = new Sholo({
+const withoutOverlay = new Driver({
   opacity: 0,
   padding: 0
 });
@@ -239,8 +239,8 @@ document.querySelector('#run-element-without-popover')
 /////////////////////////////////////////////////////
 // Highlighting single element with popover position
 /////////////////////////////////////////////////////
-const featureIntroductionSholo = new Sholo();
-featureIntroductionSholo.defineSteps([
+const featureIntroductionDriver = new Driver();
+featureIntroductionDriver.defineSteps([
   {
     element: '#first-element-introduction',
     popover: {
@@ -286,6 +286,6 @@ featureIntroductionSholo.defineSteps([
 document.querySelector('#run-multi-element-popovers')
   .addEventListener('click', (e) => {
     e.preventDefault();
-    featureIntroductionSholo.start();
+    featureIntroductionDriver.start();
   });
 

demo/styles/demo.scss

 @import "./base";
-@import "../../src/sholo";
+@import "../../src/driver";
 
 img.emoji {
   height: 1em;

dist/driver.min.css

+div#driver-popover-item{display:none;position:absolute;background:#fff;color:#2d2d2d;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;box-shadow:0 1px 10px rgba(0,0,0,.4);z-index:1000000000}div#driver-popover-item .driver-popover-tip{border:5px solid #fff;content:"";position:absolute}div#driver-popover-item .driver-popover-tip.bottom{bottom:-10px;border-top-color:#fff;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}div#driver-popover-item .driver-popover-tip.left{left:-10px;top:10px;border-top-color:transparent;border-right-color:#fff;border-bottom-color:transparent;border-left-color:transparent}div#driver-popover-item .driver-popover-tip.right{right:-10px;top:10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:#fff}div#driver-popover-item .driver-popover-tip.top{top:-10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:#fff;border-left-color:transparent}div#driver-popover-item .driver-popover-footer{display:block;clear:both;margin-top:5px}div#driver-popover-item .driver-popover-footer a{display:inline-block;padding:3px 10px;border:1px solid #d4d4d4;text-decoration:none;text-shadow:1px 1px 0 #fff;color:#2d2d2d;font:11px/normal sans-serif;cursor:pointer;outline:0;background-color:#f1f1f1;border-radius:2px;zoom:1;margin:10px 0 0}div#driver-popover-item .driver-popover-footer a.driver-disabled{color:gray;cursor:default;pointer-events:none}div#driver-popover-item .driver-popover-footer .driver-close-btn{float:left}div#driver-popover-item .driver-popover-footer .driver-btn-group{float:right}div#driver-popover-item .driver-popover-title{font:19px/normal sans-serif;margin:0 0 5px;font-weight:700;display:block;position:relative;line-height:1.5;zoom:1}div#driver-popover-item .driver-popover-description{margin-bottom:0;font:14px/normal sans-serif;line-height:1.5;color:#2d2d2d;font-weight:400;zoom:1}
+/*# sourceMappingURL=driver.min.css.map*/
\ No newline at end of file

dist/driver.min.css.map

+{"version":3,"file":"driver.min.css","sources":[],"mappings":"","sourceRoot":""}
\ No newline at end of file

dist/driver.min.js.map

+{"version":3,"file":"driver.min.js","sources":["webpack://Driver/webpack/universalModuleDefinition"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"Driver\"] = factory();\n\telse\n\t\troot[\"Driver\"] = factory();\n})(window, function() {\nreturn "],"mappings":"AAAA","sourceRoot":""}
\ No newline at end of file

dist/sholo.min.css

-div#sholo-popover-item{display:none;position:absolute;background:#fff;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;box-shadow:0 1px 10px rgba(0,0,0,.4);z-index:1000000000}div#sholo-popover-item .sholo-popover-tip{border:5px solid #fff;content:"";position:absolute}div#sholo-popover-item .sholo-popover-tip.bottom{bottom:-10px;border-top-color:#fff;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}div#sholo-popover-item .sholo-popover-tip.left{left:-10px;top:10px;border-top-color:transparent;border-right-color:#fff;border-bottom-color:transparent;border-left-color:transparent}div#sholo-popover-item .sholo-popover-tip.right{right:-10px;top:10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:#fff}div#sholo-popover-item .sholo-popover-tip.top{top:-10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:#fff;border-left-color:transparent}div#sholo-popover-item .sholo-popover-footer{display:block;clear:both;margin-top:5px}div#sholo-popover-item .sholo-popover-footer a{display:inline-block;padding:3px 10px;border:1px solid #d4d4d4;text-decoration:none;text-shadow:1px 1px 0 #fff;color:#2d2d2d;font:11px/normal sans-serif;cursor:pointer;outline:0;background-color:#f1f1f1;border-radius:2px;zoom:1;margin:10px 0 0}div#sholo-popover-item .sholo-popover-footer a.sholo-disabled{color:gray;cursor:default;pointer-events:none}div#sholo-popover-item .sholo-popover-footer .sholo-close-btn{float:left}div#sholo-popover-item .sholo-popover-footer .sholo-btn-group{float:right}div#sholo-popover-item .sholo-popover-title{font-size:19px;margin:0 0 5px;font-weight:700;display:block;position:relative}div#sholo-popover-item .sholo-popover-description{margin-bottom:0;font-size:14px;line-height:1.5;color:#2d2d2d;font-weight:400}
-/*# sourceMappingURL=sholo.min.css.map*/
\ No newline at end of file

dist/sholo.min.css.map

-{"version":3,"file":"sholo.min.css","sources":[],"mappings":"","sourceRoot":""}
\ No newline at end of file

dist/sholo.min.js

-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Sholo=e():t.Sholo=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="sholo-canvas-overlay";var o=e.ID_POPOVER="sholo-popover-item",n=e.CLASS_POPOVER_TIP="sholo-popover-tip",s=e.CLASS_POPOVER_TITLE="sholo-popover-title",h=e.CLASS_POPOVER_DESCRIPTION="sholo-popover-description",r=e.CLASS_POPOVER_FOOTER="sholo-popover-footer",l=e.CLASS_CLOSE_BTN="sholo-close-btn",a=e.CLASS_NEXT_STEP_BTN="sholo-next-btn",d=e.CLASS_PREV_STEP_BTN="sholo-prev-btn";e.CLASS_BTN_DISABLED="sholo-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="sholo-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}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:"bringInView",value:function(){if(!this.isInView()){var t=this.getCalculatedPosition().top+this.window.pageYOffset-this.window.innerHeight/2;this.window.scrollTo(0,t)}}},{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.popover&&this.popover.hide()}},{key:"onHighlightStarted",value:function(){this.popover&&this.showPopover()}},{key:"onHighlighted",value:function(){this.popover&&this.showPopover();var t=this.overlay.getLastHighlightedElement(),e=this.popover;this.node!==(t&&t.node)&&(this.isInView()||this.bringInView(),e&&!e.isInView()&&e.bringInView())}},{key:"showPopover",value:function(){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},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},function(t,e){},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,doneBtnText:"Done",closeBtnText:"Close",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.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)}this.renderButtons()}},{key:"renderButtons",value:function(){this.nextBtnNode.innerHTML=this.options.nextBtnText,this.prevBtnNode.innerHTML=this.options.prevBtnText,this.closeBtnNode.innerHTML=this.options.closeBtnText,this.options.totalCount&&1!==this.options.totalCount?(this.footerNode.style.display="block",this.options.isFirst?this.prevBtnNode.classList.add(r.CLASS_BTN_DISABLED):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},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){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},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(6)),s=l(i(1)),h=l(i(5));i(4);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},e),this.document=document,this.window=window,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()){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.overlay.clear()}}},{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.steps=[],this.overlay.clear()}},{key:"hasHighlightedElement",value:function(){var t=this.overlay.getHighlightedElement();return t&&t.node}},{key:"onScroll",value:function(){this.overlay.refresh(!1)}},{key:"onResize",value:function(){this.overlay.refresh(!0)}},{key:"onKeyUp",value:function(t){t.keyCode===r.ESC_KEY_CODE?this.overlay.clear():t.keyCode===r.RIGHT_KEY_CODE&&this.hasNextStep()?this.moveNext():t.keyCode===r.LEFT_KEY_CODE&&this.hasPreviousStep()&&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.currentStep=t,this.overlay.highlight(this.steps[t])}},{key:"highlight",value:function(t){var e=this.prepareElementFromStep(t);e&&this.overlay.highlight(e)}}]),t}();e.default=a},function(t,e,i){i(7),t.exports=i(3)}])});
-//# sourceMappingURL=sholo.min.js.map
\ No newline at end of file

dist/sholo.min.js.map

-{"version":3,"file":"sholo.min.js","sources":["webpack://Sholo/webpack/universalModuleDefinition"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"Sholo\"] = factory();\n\telse\n\t\troot[\"Sholo\"] = factory();\n})(window, function() {\nreturn "],"mappings":"AAAA","sourceRoot":""}
\ No newline at end of file

index.html

@@ -5,13 +5,13 @@
   <meta name="viewport"
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Sholo</title>
+  <title>Driver</title>
   <link rel="stylesheet" href="./dist/demo.css">
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai.min.css">
 </head>
 <body>
 <div class="page-wrap">
-  <section class="section__header" data-sholo="Hey welcome to presenter!">
+  <section class="section__header" data-driver="Hey welcome to presenter!">
     <h1><span class="emoji">👨‍🔧️</span> Driver</h1>
     <p class="text-muted">A light-weight, no-dependency, vanilla JavaScript library to drive the user's focus across the
       page</p>
@@ -311,7 +311,7 @@ activeElement.getNode();  // Gets the DOM Element behind this element
 <script src="//twemoji.maxcdn.com/2/twemoji.min.js?2.5"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
 
-<script src="./dist/sholo.js"></script>
+<script src="./dist/driver.js"></script>
 <script src="./dist/demo.js"></script>
 <script src="./dist/emoji.js"></script>
 </body>

package.json

 {
-  "name": "sholo",
+  "name": "driver.js",
   "version": "1.0.0",
   "description": "A light-weight, vanilla JS library to bring certain parts of page in spotlight",
-  "main": "./assets/scripts/dist/sholo.min.js",
+  "main": "./assets/scripts/dist/driver.min.js",
   "scripts": {
     "start": "node server.js",
     "build": "webpack --config webpack.config.prod.js "
   },
-  "repository": "https://github.com/kamranahmedse/sholo",
+  "repository": "https://github.com/kamranahmedse/driver.js",
   "author": "Kamran Ahmed <kamranahmed.se@gmail.com>",
   "license": "MIT",
   "devDependencies": {

src/common/constants.js

@@ -7,17 +7,17 @@ export const ESC_KEY_CODE = 27;
 export const LEFT_KEY_CODE = 37;
 export const RIGHT_KEY_CODE = 39;
 
-export const ID_OVERLAY = 'sholo-canvas-overlay';
+export const ID_OVERLAY = 'driver-canvas-overlay';
 
-export const ID_POPOVER = 'sholo-popover-item';
-export const CLASS_POPOVER_TIP = 'sholo-popover-tip';
-export const CLASS_POPOVER_TITLE = 'sholo-popover-title';
-export const CLASS_POPOVER_DESCRIPTION = 'sholo-popover-description';
-export const CLASS_POPOVER_FOOTER = 'sholo-popover-footer';
-export const CLASS_CLOSE_BTN = 'sholo-close-btn';
-export const CLASS_NEXT_STEP_BTN = 'sholo-next-btn';
-export const CLASS_PREV_STEP_BTN = 'sholo-prev-btn';
-export const CLASS_BTN_DISABLED = 'sholo-disabled';
+export const ID_POPOVER = 'driver-popover-item';
+export const CLASS_POPOVER_TIP = 'driver-popover-tip';
+export const CLASS_POPOVER_TITLE = 'driver-popover-title';
+export const CLASS_POPOVER_DESCRIPTION = 'driver-popover-description';
+export const CLASS_POPOVER_FOOTER = 'driver-popover-footer';
+export const CLASS_CLOSE_BTN = 'driver-close-btn';
+export const CLASS_NEXT_STEP_BTN = 'driver-next-btn';
+export const CLASS_PREV_STEP_BTN = 'driver-prev-btn';
+export const CLASS_BTN_DISABLED = 'driver-disabled';
 
 // language=HTML
 export const POPOVER_HTML = `
@@ -27,7 +27,7 @@ export const POPOVER_HTML = `
     <div class="${CLASS_POPOVER_DESCRIPTION}">Popover Description</div>
     <div class="${CLASS_POPOVER_FOOTER}">
       <a href="javascript:void(0)" class="${CLASS_CLOSE_BTN}">Close</a>
-      <span class="sholo-btn-group">
+      <span class="driver-btn-group">
         <a class="${CLASS_PREV_STEP_BTN}" href="javascript:void(0)">&larr; Previous</a>
         <a class="${CLASS_NEXT_STEP_BTN}" href="javascript:void(0)">Next &rarr;</a>
       </span>

src/sholo.scss → src/driver.scss

-div#sholo-popover-item {
+div#driver-popover-item {
   display: none;
   position: absolute;
   background: white;
@@ -11,7 +11,7 @@ div#sholo-popover-item {
   box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
   z-index: 1000000000;
 
-  .sholo-popover-tip {
+  .driver-popover-tip {
     border: 5px solid white;
     content: '';
     position: absolute;
@@ -51,7 +51,7 @@ div#sholo-popover-item {
     }
   }
 
-  .sholo-popover-footer {
+  .driver-popover-footer {
     display: block;
     clear: both;
     margin-top: 5px;
@@ -72,22 +72,22 @@ div#sholo-popover-item {
       margin: 10px 0 0;
     }
 
-    a.sholo-disabled {
+    a.driver-disabled {
       color: #808080;
       cursor: default;
       pointer-events: none;
     }
 
-    .sholo-close-btn {
+    .driver-close-btn {
       float: left;
     }
 
-    .sholo-btn-group {
+    .driver-btn-group {
       float: right;
     }
   }
 
-  .sholo-popover-title {
+  .driver-popover-title {
     font: 19px/normal sans-serif;
     margin: 0 0 5px;
     font-weight: bold;
@@ -97,7 +97,7 @@ div#sholo-popover-item {
     zoom: 1;
   }
 
-  .sholo-popover-description {
+  .driver-popover-description {
     margin-bottom: 0;
     font: 14px/normal sans-serif;
     line-height: 1.5;

src/index.js

@@ -18,7 +18,7 @@ import {
 /**
  * Plugin class that drives the plugin
  */
-export default class Sholo {
+export default class Driver {
   /**
    * @param {Object} options
    */

webpack.config.dev.js

@@ -12,9 +12,9 @@ module.exports = {
   output: {
     path: path.join(__dirname, '/dist'),
     publicPath: '/dist/',
-    filename: 'sholo.js',
+    filename: 'driver.js',
     libraryTarget: 'umd',
-    library: 'Sholo',
+    library: 'Driver',
   },
   module: {
     rules: [

webpack.config.prod.js

@@ -5,14 +5,14 @@ module.exports = {
   mode: 'production',
   entry: [
     './src/index.js',
-    './src/sholo.scss',
+    './src/driver.scss',
   ],
   output: {
     path: path.join(__dirname, '/dist'),
     publicPath: '/dist/',
-    filename: 'sholo.min.js',
+    filename: 'driver.min.js',
     libraryTarget: 'umd',
-    library: 'Sholo',
+    library: 'Driver',
   },
   module: {
     rules: [
@@ -48,7 +48,7 @@ module.exports = {
   },
   plugins: [
     new ExtractTextPlugin({
-      filename: 'sholo.min.css',
+      filename: 'driver.min.css',
       allChunks: true,
     }),
   ],