Confirm on exit popup

index.html

@@ -201,6 +201,7 @@
         <button id="basic-tour">Animated Tour</button>
         <button id="non-animated-tour">Non-Animated Tour</button>
         <button id="async-tour">Asynchronous Tour</button>
+        <button id="confirm-exit-tour">Confirm on Exit</button>
       </div>
 
       <ul>
@@ -398,15 +399,28 @@ npm install driver.js</pre
         driverObj.drive();
       });
 
-      document.getElementById("async-tour").addEventListener("click", () => {
+      document.getElementById("confirm-exit-tour").addEventListener("click", () => {
         const driverObj = driver({
           animate: true,
+          backdropColor: "green",
           opacity: 0.3,
-          onDestroyStarted: (element, step) => {
-            if (confirm('Are you sure?')) {
+          steps: basicTourSteps,
+          onDestroyStarted: () => {
+            if (driverObj.hasNextStep() && confirm("Are you sure?")) {
+              driverObj.destroy();
+            } else {
               driverObj.destroy();
             }
           },
+        });
+
+        driverObj.drive();
+      });
+
+      document.getElementById("async-tour").addEventListener("click", () => {
+        const driverObj = driver({
+          animate: true,
+          opacity: 0.3,
           steps: [
             {
               element: ".page-header",

src/driver.ts

@@ -145,16 +145,15 @@ export function driver(options: Config = {}) {
     });
   }
 
-  function destroy(withStartHook = true) {
+  function destroy(withOnDestroyStartedHook = true) {
     const activeElement = getState("activeElement");
     const activeStep = getState("activeStep");
 
     const onDestroyStarted = getConfig("onDestroyStarted");
-
     // `onDestroyStarted` is used to confirm the exit of tour. If we trigger
     // the hook for when user calls `destroy`, driver will get into infinite loop
     // not causing tour to be destroyed.
-    if (withStartHook && onDestroyStarted) {
+    if (withOnDestroyStartedHook && onDestroyStarted) {
       onDestroyStarted(activeElement, activeStep!);
       return;
     }
@@ -186,15 +185,25 @@ export function driver(options: Config = {}) {
 
   return {
     isActive: () => getState("isInitialized") || false,
-    refresh: () => {
-      requireRefresh();
-    },
+    refresh: requireRefresh,
     drive: (stepIndex: number = 0) => {
       init();
       drive(stepIndex);
     },
     moveNext,
     movePrevious,
+    hasNextStep: () => {
+      const steps = getConfig("steps") || [];
+      const activeIndex = getState("activeIndex");
+
+      return activeIndex !== undefined && steps[activeIndex + 1];
+    },
+    hasPreviousStep: () => {
+      const steps = getConfig("steps") || [];
+      const activeIndex = getState("activeIndex");
+
+      return activeIndex !== undefined && steps[activeIndex - 1];
+    },
     highlight: (step: DriveStep) => {
       init();
       highlight({

src/state.ts

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

src/style.css

@@ -24,11 +24,11 @@
 }
 
 .driver-fade .driver-stage {
-  animation: animate-fade-in 100ms ease-in-out;
+  animation: animate-fade-in 300ms ease-in-out;
 }
 
 .driver-fade .driver-popover {
-  animation: animate-fade-in 100ms;
+  animation: animate-fade-in 300ms;
 }
 
 /* Popover styles */