Add callbacks for onNext, onPrevious

demo/scripts/demo.js

@@ -1,5 +1,5 @@
 /* eslint-disable */
-document.addEventListener("DOMContentLoaded", function () {
+document.addEventListener('DOMContentLoaded', function () {
 
   const tourSteps = [
     {
@@ -8,7 +8,7 @@ document.addEventListener("DOMContentLoaded", function () {
         title: 'Before we start',
         description: 'This is just one use-case, make sure to check out the rest of the docs below.',
         nextBtnText: 'Okay, Start!'
-      }
+      },
     }, {
       element: '#logo_emoji',
       popover: {
@@ -102,7 +102,7 @@ document.addEventListener("DOMContentLoaded", function () {
     animate: false,
     opacity: 0.8,
     padding: 5,
-    showButtons: true,
+    showButtons: true
   });
 
   boringTourDriver.defineSteps(tourSteps);
@@ -145,7 +145,7 @@ document.addEventListener("DOMContentLoaded", function () {
 /////////////////////////////////////////////
 // Form focus examples
 /////////////////////////////////////////////
-  const focusDriver = new Driver({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
@@ -375,7 +375,7 @@ document.addEventListener("DOMContentLoaded", function () {
       featureIntroductionDriver.start();
     });
 
-  const newURL = location.href.split("?")[0];
+  const newURL = location.href.split('?')[0];
   if (newURL !== location.href) {
     window.location = newURL;
     window.location.href = newURL;

src/index.js

@@ -45,6 +45,10 @@ export default class Driver {
       },
       onReset: () => {              // When overlay is about to be cleared
       },
+      onNext: () => {               // When next button is clicked
+      },
+      onPrevious: () => {           // When previous button is clicked
+      },
       ...options,
     };
 
@@ -166,12 +170,21 @@ export default class Driver {
    * @public
    */
   movePrevious() {
-    this.currentStep -= 1;
-    if (this.steps[this.currentStep]) {
-      this.overlay.highlight(this.steps[this.currentStep]);
-    } else {
+    const currentStep = this.steps[this.currentStep];
+    const previousStep = this.steps[this.currentStep - 1];
+
+    if (!previousStep) {
       this.reset();
+      return;
     }
+
+    // If there is an event binding on the current step
+    if (currentStep.options.onPrevious) {
+      currentStep.options.onPrevious();
+    }
+
+    this.overlay.highlight(previousStep);
+    this.currentStep -= 1;
   }
 
   /**
@@ -180,12 +193,21 @@ export default class Driver {
    * @public
    */
   moveNext() {
-    this.currentStep += 1;
-    if (this.steps[this.currentStep]) {
-      this.overlay.highlight(this.steps[this.currentStep]);
-    } else {
+    const currentStep = this.steps[this.currentStep];
+    const nextStep = this.steps[this.currentStep + 1];
+
+    if (!nextStep) {
       this.reset();
+      return;
+    }
+
+    // If there is an event binding on the current step
+    if (currentStep.options.onNext) {
+      currentStep.options.onNext();
     }
+
+    this.overlay.highlight(nextStep);
+    this.currentStep += 1;
   }
 
   /**
@@ -285,12 +307,10 @@ export default class Driver {
 
     if (isStepDefinition) {
       querySelector = currentStep.element;
-      elementOptions = {
-        ...this.options,
-        ...currentStep,
-      };
+      elementOptions = { ...this.options, ...currentStep };
     }
 
+    // If the given element is a query selector or a DOM element?
     const domElement = isDomElement(querySelector) ? querySelector : this.document.querySelector(querySelector);
     if (!domElement) {
       console.warn(`Element to highlight ${querySelector} not found`);