Add documentation and update type definitions

index.html

@@ -186,7 +186,8 @@ driver.highlight({
       <p class="top-20">
         If you use this option, for multi-step driver, it would close after you are done with the popover or you can close it programmatically. For single element popover, you need to close it properly, otherwise it won't be closed
       </p>
-      <pre><code class="javascript">driver.reset()</code></div>
+      <pre><code class="javascript">driver.reset()</code>
+    </div>
 
     <hr class="hr__fancy">
     <div id="third-element-introduction" class="section__example">
@@ -283,6 +284,7 @@ driver.highlight({
   onHighlightStarted: (Element) {}, // Called when element is about to be highlighted
   onHighlighted: (Element) {}, // Called when element is fully highlighted
   onDeselected: (Element) {}, // Called when element has been deselected
+  onReset: (Element) {},      // Called when overlay is about to be cleared
 });
 </code></pre>
     </div>
@@ -369,10 +371,17 @@ activeElement.getNode();  // Gets the DOM Element behind this element
 <script src="./dist/demo/driver-demo.js"></script>
 
 <script>
-  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+  (function (i, s, o, g, r, a, m) {
+    i['GoogleAnalyticsObject'] = r;
+    i[r] = i[r] || function () {
+      (i[r].q = i[r].q || []).push(arguments);
+    }, i[r].l = 1 * new Date();
+    a = s.createElement(o),
+      m = s.getElementsByTagName(o)[0];
+    a.async = 1;
+    a.src = g;
+    m.parentNode.insertBefore(a, m);
+  })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
   ga('create', 'UA-58155965-1', 'auto');
   ga('send', 'pageview');
 </script>

readme.md

@@ -171,10 +171,12 @@ const driver = new Driver({
   showButtons: false,               // Do not show control buttons in footer
   keyboardControl: true,            // Allow controlling through keyboard (escape to close, arrow keys to move)
   scrollIntoViewOptions: {},        // We use `scrollIntoView()` when possible, pass here the options for it if you want any
-  onHighlightStarted: (Element) {}, // Called when element is about to be highlighted
-  onHighlighted: (Element) {},      // Called when element is fully highlighted
-  onDeselected: (Element) {},       // Called when element has been deselected
-  onReset: () {},                   // Called when overlay is about to be cleared
+  onHighlightStarted: (Element) => {}, // Called when element is about to be highlighted
+  onHighlighted: (Element) => {},      // Called when element is fully highlighted
+  onDeselected: (Element) => {},       // Called when element has been deselected
+  onReset: (Element) => {},            // Called when overlay is about to be cleared
+  onNext: () => {},                    // Called when moving to next step on any step
+  onPrevious: () => {},                // Called when moving to next step on any step
 });
 ```
 Note that all the button options that you provide in the driver definition can be overridden for a specific step by giving them in the step definition
@@ -195,7 +197,9 @@ const stepDefinition = {
     closeBtnText: 'Close',      // Text on the close button
     nextBtnText: 'Next',        // Next button text
     prevBtnText: 'Previous',    // Previous button text
-  }
+  },
+  onNext: () => {},             // Called when moving to next step from current step
+  onPrevious: () => {},         // Called when moving to next step from current step
 };
 ```
 

src/core/overlay.js

@@ -140,7 +140,7 @@ export default class Overlay {
   clear(immediate = false) {
     // Callback for when overlay is about to be reset
     if (this.options.onReset) {
-      this.options.onReset();
+      this.options.onReset(this.highlightedElement);
     }
 
     // Deselect the highlighted element if any

src/index.js

@@ -30,25 +30,19 @@ export default class Driver {
   constructor(options = {}) {
     this.options = {
       animate: SHOULD_ANIMATE_OVERLAY, // Whether to animate or not
-      opacity: OVERLAY_OPACITY, // Overlay opacity
-      padding: OVERLAY_PADDING, // Spacing around the element from the overlay
-      scrollIntoViewOptions: null,  // Options to be passed to `scrollIntoView`
-      allowClose: SHOULD_OUTSIDE_CLICK_CLOSE,    // Whether to close overlay on click outside the element
-      keyboardControl: ALLOW_KEYBOARD_CONTROL,  // Whether to allow controlling through keyboard or not
-      overlayClickNext: SHOULD_OUTSIDE_CLICK_NEXT,  // Whether to move next on click outside the element
-      stageBackground: '#ffffff',   // Background color for the stage
-      onHighlightStarted: () => {   // When element is about to be highlighted
-      },
-      onHighlighted: () => {        // When element has been highlighted
-      },
-      onDeselected: () => {         // When the element has been deselected
-      },
-      onReset: () => {              // When overlay is about to be cleared
-      },
-      onNext: () => {               // When next button is clicked
-      },
-      onPrevious: () => {           // When previous button is clicked
-      },
+      opacity: OVERLAY_OPACITY,    // Overlay opacity
+      padding: OVERLAY_PADDING,    // Spacing around the element from the overlay
+      scrollIntoViewOptions: null, // Options to be passed to `scrollIntoView`
+      allowClose: SHOULD_OUTSIDE_CLICK_CLOSE,      // Whether to close overlay on click outside the element
+      keyboardControl: ALLOW_KEYBOARD_CONTROL,     // Whether to allow controlling through keyboard or not
+      overlayClickNext: SHOULD_OUTSIDE_CLICK_NEXT, // Whether to move next on click outside the element
+      stageBackground: '#ffffff',       // Background color for the stage
+      onHighlightStarted: () => null,   // When element is about to be highlighted
+      onHighlighted: () => null,        // When element has been highlighted
+      onDeselected: () => null,         // When the element has been deselected
+      onReset: () => null,              // When overlay is about to be cleared
+      onNext: () => null,               // When next button is clicked
+      onPrevious: () => null,           // When previous button is clicked
       ...options,
     };
 

types/index.d.ts

@@ -150,6 +150,16 @@ declare module 'driver.js' {
        * Options representing popover for this step
        */
       popover?: Driver.PopoverOptions;
+
+      /**
+       * Is called when the next element is about to be highlighted
+       */
+      onNext?: () => void,
+
+      /**
+       * Is called when the previous element is about to be highlighted
+       */
+      onPrevious?: () => void,
     }
 
     class Element {
@@ -717,7 +727,17 @@ declare module 'driver.js' {
       /**
        * Is called when the overlay is about to reset
        */
-      onReset?: () => void,
+      onReset?: (element: Driver.Element) => void,
+
+      /**
+       * Is called when the next element is about to be highlighted
+       */
+      onNext?: () => void,
+
+      /**
+       * Is called when the previous element is about to be highlighted
+       */
+      onPrevious?: () => void,
     }
 
     interface ElementOptions extends Driver.DriverOptions {