Add example for asynchronous tour

index.html

@@ -192,6 +192,7 @@
       <div class="buttons">
         <button id="custom-classes">Custom Classes</button>
         <button id="popover-hook">Popover Hook</button>
+        <button id="padding-change">Padding Change</button>
       </div>
 
       <h2>Tour Feature</h2>
@@ -199,6 +200,7 @@
       <div class="buttons">
         <button id="basic-tour">Animated Tour</button>
         <button id="non-animated-tour">Non-Animated Tour</button>
+        <button id="async-tour">Asynchronous Tour</button>
       </div>
 
       <ul>
@@ -396,6 +398,97 @@ npm install driver.js</pre
         driverObj.drive();
       });
 
+      document.getElementById("async-tour").addEventListener("click", () => {
+        const driverObj = driver({
+          animate: true,
+          backdropColor: "blue",
+          opacity: 0.3,
+          onDeselected: (element => {
+            if (element?.classList?.contains('dynamic-el')) {
+              element?.parentElement?.removeChild(element);
+            }
+          }),
+          steps: [
+            {
+              element: ".page-header",
+              popover: {
+                title: "Async Driver.js",
+                description:
+                        "Driver.js has been written from the ground up. The new version is more powerful, has less surprises, more customizable and tons of new features.",
+                side: "bottom",
+                align: "start",
+              },
+            },
+            {
+              element: ".page-header h1",
+              popover: {
+                title: "Async Test",
+                description: "By overriding `onNextClick` you get control over the tour.",
+                side: "left",
+                align: "start",
+                onNextClick: () => {
+                  const newDiv = document.querySelector('.dynamic-el') || document.createElement('div');
+
+                  newDiv.innerHTML = 'This is a new Element';
+                  newDiv.style.display = 'block';
+                  newDiv.style.padding = '20px';
+                  newDiv.style.backgroundColor = 'black';
+                  newDiv.style.color = 'white';
+                  newDiv.style.fontSize = '14px';
+                  newDiv.style.position = 'fixed';
+                  newDiv.style.top = `${Math.random() * (500 - 30) + 30}px`;
+                  newDiv.style.left = `${Math.random() * (500 - 30) + 30}px`;
+                  newDiv.className = 'dynamic-el';
+
+                  document.body.appendChild(newDiv);
+
+                  driverObj.moveNext();
+                }
+              },
+            },
+            {
+              element: '.dynamic-el',
+              popover: {
+                title: "Dynamic Elements",
+                description: "This was created before we moved here"
+              }
+            },
+            {
+              element: ".page-header sup",
+              popover: {
+                title: "Improved Hooks",
+                description:
+                        "Unlike the older version, new version doesn't work with z-indexes so no more positional issues.",
+                side: "bottom",
+                align: "start",
+              },
+            },
+            {
+              popover: {
+                title: "No Element",
+                description: "You can now have popovers without elements as well",
+              },
+            },
+            {
+              element: "#scrollable-area",
+              popover: {
+                title: "Scrollable Areas",
+                description: "There are no issues with scrollable element tours as well.",
+              },
+            },
+            {
+              element: "#third-scroll-paragraph",
+              popover: {
+                title: "Nested Scrolls",
+                description: "Even the nested scrollable elements work now.",
+              },
+            },
+          ],
+        });
+
+        driverObj.drive();
+      });
+
       document.getElementById("basic-tour").addEventListener("click", () => {
         const driverObj = driver({
           steps: basicTourSteps,
@@ -524,6 +617,27 @@ npm install driver.js</pre
         });
       });
 
+      document.getElementById("padding-change").addEventListener("click", () => {
+        const driverObj = driver({
+          stagePadding: 0,
+          popoverOffset: 20,
+          stageRadius: 10
+        });
+
+        driverObj.highlight({
+          element: "#padding-change",
+          popover: {
+            title: "Page Title",
+            description: "Body of the popover",
+            side: "bottom",
+            align: "start",
+            onPopoverRendered: popover => {
+              popover.title.innerText = "Modified";
+            },
+          },
+        });
+      });
+
       document.getElementById("custom-classes").addEventListener("click", () => {
         const driverObj = driver({
           popoverClass: "custom-driver-popover",

src/driver.ts

@@ -24,9 +24,39 @@ export function driver(options: Config = {}) {
     destroy();
   }
 
+  function moveNext() {
+    const activeIndex = getState('activeIndex');
+    const steps = getConfig('steps') || [];
+    if (typeof  activeIndex === 'undefined') {
+      return;
+    }
+
+    const nextStepIndex = activeIndex + 1;
+    if (steps[nextStepIndex]) {
+      drive(nextStepIndex);
+    } else {
+      destroy();
+    }
+  }
+
+  function movePrevious() {
+    const activeIndex = getState('activeIndex');
+    const steps = getConfig('steps') || [];
+    if (typeof  activeIndex === 'undefined') {
+      return;
+    }
+
+    const previousStepIndex = activeIndex - 1;
+    if (steps[previousStepIndex]) {
+      drive(previousStepIndex);
+    } else {
+      destroy();
+    }
+  }
+
   function handleArrowLeft() {
     const steps = getConfig("steps") || [];
-    const currentStepIndex = getState("currentStepIndex");
+    const currentStepIndex = getState("activeIndex");
     if (typeof currentStepIndex === "undefined") {
       return;
     }
@@ -38,18 +68,19 @@ export function driver(options: Config = {}) {
   }
 
   function handleArrowRight() {
-    const steps = getConfig("steps") || [];
-    const currentStepIndex = getState("currentStepIndex");
-    if (typeof currentStepIndex === "undefined") {
+    const activeIndex = getState("activeIndex");
+    const activeStep = getState("activeStep");
+    const activeElement = getState("activeElement");
+    if (typeof activeIndex === "undefined" || typeof activeStep === "undefined") {
       return;
     }
 
-    const nextStepIndex = currentStepIndex + 1;
-    if (steps[nextStepIndex]) {
-      drive(nextStepIndex);
-    } else {
-      destroy();
+    const onNextClick = activeStep.popover?.onNextClick || getConfig("onNextClick");
+    if (onNextClick) {
+      return onNextClick(activeElement, activeStep);
     }
+
+    moveNext();
   }
 
   function init() {
@@ -81,7 +112,7 @@ export function driver(options: Config = {}) {
       destroy();
     }
 
-    setState("currentStepIndex", stepIndex);
+    setState("activeIndex", stepIndex);
 
     const currentStep = steps[stepIndex];
     const hasNextStep = steps[stepIndex + 1];
@@ -152,6 +183,8 @@ export function driver(options: Config = {}) {
       init();
       drive(stepIndex);
     },
+    moveNext,
+    movePrevious,
     highlight: (step: DriveStep) => {
       init();
       highlight({

src/state.ts

@@ -6,18 +6,18 @@ export type State = {
   // Whether driver is initialized or not
   isInitialized?: boolean;
   // Index of the currently active step in driver tour
-  currentStepIndex?: number;
+  activeIndex?: number;
 
   // Used to bounce the resize event
   resizeTimeout?: number;
 
   // Used while transitioning between stages
-  previousElement?: Element;
   activeElement?: Element;
-  transitionCallback?: () => void;
-
   activeStep?: DriveStep;
+  previousElement?: Element;
   previousStep?: DriveStep;
+  transitionCallback?: () => void;
+
 
   activeStagePosition?: StageDefinition;
   stageSvg?: SVGSVGElement;