Additional methods and fixes

src/core/element.js

@@ -21,6 +21,8 @@ export default class Element {
     this.options = options;
     this.overlay = overlay;
     this.popover = popover;
+
+    this.highlightFinished = false; // To track when the element has fully highlighted
   }
 
   /**
@@ -114,11 +116,12 @@ export default class Element {
    * i.e. when moving the focus to next element of closing
    */
   onDeselected() {
-    if (!this.popover) {
-      return;
-    }
+    this.hidePopover();
+    this.highlightFinished = false;
 
-    this.popover.hide();
+    if (this.options.onDeselected) {
+      this.options.onDeselected(this);
+    }
   }
 
   /**
@@ -127,20 +130,24 @@ export default class Element {
    * this element of has just decided to highlight it
    */
   onHighlightStarted() {
-    if (!this.popover) {
-      return;
-    }
-
     this.showPopover();
+
+    // Because element has just started highlighting
+    // and hasn't completely highlighted
+    this.highlightFinished = false;
+
+    if (this.options.onHighlightStarted) {
+      this.options.onHighlightStarted(this);
+    }
   }
 
   /**
    * Is called when the element has been successfully highlighted
    */
   onHighlighted() {
-    if (this.popover) {
-      this.showPopover();
-    }
+    this.showPopover();
+
+    this.highlightFinished = true;
 
     const highlightedElement = this;
     const lastHighlightedElement = this.overlay.getLastHighlightedElement();
@@ -160,12 +167,28 @@ export default class Element {
         highlightedElement.bringInView();
       }
     }
+
+    if (this.options.onHighlighted) {
+      this.options.onHighlighted(this);
+    }
+  }
+
+  hidePopover() {
+    if (!this.popover) {
+      return;
+    }
+
+    this.popover.hide();
   }
 
   /**
    * Shows the popover on the current element
    */
   showPopover() {
+    if (!this.popover) {
+      return;
+    }
+
     const position = this.getCalculatedPosition();
 
     this.popover.show(position);

src/core/popover.js

@@ -27,6 +27,7 @@ export default class Popover extends Element {
       isLast: true,
       totalCount: 1,
       currentIndex: 0,
+      showButtons: true,
       doneBtnText: 'Done',
       closeBtnText: 'Close',
       nextBtnText: 'Next →',
@@ -145,7 +146,7 @@ export default class Popover extends Element {
     this.closeBtnNode.innerHTML = this.options.closeBtnText;
 
     // If there was only one item, hide the buttons
-    if (!this.options.totalCount || this.options.totalCount === 1) {
+    if (!this.options.showButtons || !this.options.totalCount || this.options.totalCount === 1) {
       this.footerNode.style.display = 'none';
       return;
     }

src/index.js

@@ -27,6 +27,12 @@ export default class Sholo {
       animate: OVERLAY_ANIMATE,     // Whether to animate or not
       opacity: OVERLAY_OPACITY,     // Overlay opacity
       padding: OVERLAY_PADDING,     // Spacing around the element from the overlay
+      onHighlightStarted: () => {   // When element is about to be highlighted
+      },
+      onHighlighted: () => {        // When element has been highlighted
+      },
+      onDeselected: () => {         // When the element has been deselected
+      },
     }, options);
 
     this.document = document;
@@ -144,7 +150,6 @@ export default class Sholo {
   reset() {
     this.currentStep = 0;
     this.isActivated = false;
-    this.steps = [];
     this.overlay.clear();
   }
 
@@ -154,7 +159,23 @@ export default class Sholo {
    */
   hasHighlightedElement() {
     const highlightedElement = this.overlay.getHighlightedElement();
-    return highlightedElement && highlightedElement.node;
+    return highlightedElement && highlightedElement.node && highlightedElement.highlightFinished;
+  }
+
+  /**
+   * Gets the currently highlighted element in overlay
+   * @returns {Element}
+   */
+  getHighlightedElement() {
+    return this.overlay.getHighlightedElement();
+  }
+
+  /**
+   * Gets the element that was highlighted before currently highlighted element
+   * @returns {Element}
+   */
+  getLastHighlightedElement() {
+    return this.overlay.getLastHighlightedElement();
   }
 
   /**
@@ -195,9 +216,9 @@ export default class Sholo {
 
     if (event.keyCode === ESC_KEY_CODE) {
       this.reset();
-    } else if (event.keyCode === RIGHT_KEY_CODE && this.hasNextStep()) {
+    } else if (event.keyCode === RIGHT_KEY_CODE) {
       this.moveNext();
-    } else if (event.keyCode === LEFT_KEY_CODE && this.hasPreviousStep()) {
+    } else if (event.keyCode === LEFT_KEY_CODE) {
       this.movePrevious();
     }
   }