Browser compatibility and refactor

demo/scripts/demo.js

@@ -331,6 +331,7 @@ document.addEventListener("DOMContentLoaded", function () {
   document.querySelector('#run-multi-element-popovers')
     .addEventListener('click', (e) => {
       e.preventDefault();
+      e.stopPropagation();
       featureIntroductionDriver.start();
     });
 

readme.md

@@ -153,7 +153,6 @@ Here are the options that Driver understands
 
 ```javascript
 const driver = new Driver({
-  animate: true,                    // Animate while changing highlighted element
   opacity: 0.75,                    // Background opacity (0 means only popovers and without overlay)
   padding: 10,                      // Distance of element from around the edges
   onHighlightStarted: (Element) {}, // Called when element is about to be highlighted

src/core/element.js

@@ -34,8 +34,6 @@ export default class Element {
     this.stage = stage;
 
     this.animationTimeout = null;
-
-    this.highlightFinished = false; // To track when the element has fully highlighted
   }
 
   /**
@@ -161,8 +159,6 @@ export default class Element {
     // If there was any animation in progress, cancel that
     this.window.clearTimeout(this.animationTimeout);
 
-    this.highlightFinished = false;
-
     if (this.options.onDeselected) {
       this.options.onDeselected(this);
     }
@@ -187,10 +183,6 @@ export default class Element {
    * this element of has just decided to highlight it
    */
   onHighlightStarted() {
-    // Because element has just started highlighting
-    // and hasn't completely highlighted
-    this.highlightFinished = false;
-
     if (this.options.onHighlightStarted) {
       this.options.onHighlightStarted(this);
     }
@@ -205,8 +197,6 @@ export default class Element {
 
     this.node.classList.add(CLASS_DRIVER_HIGHLIGHTED_ELEMENT);
 
-    this.highlightFinished = true;
-
     const highlightedElement = this;
     const popoverElement = this.popover;
 

src/core/overlay.js

@@ -22,8 +22,6 @@ export default class Overlay {
 
     this.window = window;
     this.document = document;
-
-    this.makeNode();
   }
 
   /**
@@ -37,12 +35,12 @@ export default class Overlay {
     }
 
     this.node = pageOverlay;
+    this.node.style.opacity = '0';
   }
 
   /**
    * Highlights the dom element on the screen
    * @param {Element} element
-   * @param {boolean} animate
    */
   highlight(element) {
     if (!element || !element.node) {
@@ -84,12 +82,16 @@ export default class Overlay {
   }
 
   showOverlay() {
-    this.node.style.opacity = `${this.options.opacity}`;
-    this.node.style.position = 'fixed';
-    this.node.style.left = '0';
-    this.node.style.top = '0';
-    this.node.style.bottom = '0';
-    this.node.style.right = '0';
+    this.makeNode();
+
+    window.setTimeout(() => {
+      this.node.style.opacity = `${this.options.opacity}`;
+      this.node.style.position = 'fixed';
+      this.node.style.left = '0';
+      this.node.style.top = '0';
+      this.node.style.bottom = '0';
+      this.node.style.right = '0';
+    });
   }
 
   hideOverlay() {
@@ -101,6 +103,8 @@ export default class Overlay {
       this.node.style.top = '';
       this.node.style.bottom = '';
       this.node.style.right = '';
+
+      this.node.parentElement.removeChild(this.node);
     }, ANIMATION_DURATION_MS);
   }
 

src/core/popover.js

@@ -3,9 +3,11 @@ import {
   CLASS_BTN_DISABLED,
   CLASS_CLOSE_BTN,
   CLASS_NEXT_STEP_BTN,
-  CLASS_POPOVER_DESCRIPTION, CLASS_POPOVER_FOOTER,
+  CLASS_POPOVER_DESCRIPTION,
+  CLASS_POPOVER_FOOTER,
   CLASS_POPOVER_TIP,
-  CLASS_POPOVER_TITLE, CLASS_PREV_STEP_BTN,
+  CLASS_POPOVER_TITLE,
+  CLASS_PREV_STEP_BTN,
   ID_POPOVER,
   POPOVER_HTML,
 } from '../common/constants';
@@ -53,7 +55,6 @@ export default class Popover extends Element {
       document.body.appendChild(popover);
     }
 
-
     this.node = popover;
     this.tipNode = popover.querySelector(`.${CLASS_POPOVER_TIP}`);
     this.titleNode = popover.querySelector(`.${CLASS_POPOVER_TITLE}`);
@@ -68,7 +69,7 @@ export default class Popover extends Element {
     this.node.style.display = 'none';
   }
 
-  reset() {
+  setInitialState() {
     this.node.style.display = 'block';
     this.node.style.left = '0';
     this.node.style.top = '0';
@@ -86,7 +87,7 @@ export default class Popover extends Element {
    * @param {Position} position
    */
   show(position) {
-    this.reset();
+    this.setInitialState();
 
     // Set the title and descriptions
     this.titleNode.innerHTML = this.options.title;

src/core/stage.js

-import { ID_STAGE, POPOVER_HTML, STAGE_HTML } from '../common/constants';
+import { ID_STAGE, STAGE_HTML } from '../common/constants';
 import { createNodeFromString } from '../common/utils';
 import Element from './element';
 
@@ -36,11 +36,20 @@ export default class Stage extends Element {
     this.node = stage;
   }
 
+  removeNode() {
+    if (!this.node) {
+      return;
+    }
+
+    this.node.parentElement.removeChild(this.node);
+  }
+
   /**
    * Simply hides the stage
    */
   hide() {
     this.node.style.display = 'none';
+    this.removeNode();
   }
 
   /**
@@ -55,6 +64,8 @@ export default class Stage extends Element {
   }
 
   show(position) {
+    this.makeNode();
+
     this.setInitialStyle();
 
     // Make it two times the padding because, half will be given on left and half on right

src/driver.scss

@@ -110,7 +110,12 @@ div#driver-popover-item {
 div#driver-page-overlay {
   background: black;
   position: absolute;
-  opacity: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  zoom: 1;
+  filter: alpha(opacity=75);
+  opacity: 0.75;
   z-index: 100002 !important;
 
   // If you update this duration, make sure to update `ANIMATION_DURATION_MS` constant

src/index.js

@@ -156,7 +156,7 @@ export default class Driver {
    */
   hasHighlightedElement() {
     const highlightedElement = this.overlay.getHighlightedElement();
-    return highlightedElement && highlightedElement.node && highlightedElement.highlightFinished;
+    return highlightedElement && highlightedElement.node;
   }
 
   /**
@@ -177,8 +177,7 @@ export default class Driver {
 
   /**
    * Handler for the onResize DOM event
-   * Refreshes with animation on scroll to make sure that
-   * the highlighted part travels with the width change of window
+   * Makes sure highlighted element stays at valid position
    */
   onResize() {
     if (!this.isActivated) {