Add confirmation of destroying

index.html

@@ -402,6 +402,11 @@ npm install driver.js</pre
         const driverObj = driver({
           animate: true,
           opacity: 0.3,
+          onDestroyStarted: (element, step) => {
+            if (confirm('Are you sure?')) {
+              driverObj.destroy();
+            }
+          },
           steps: [
             {
               element: ".page-header",

src/config.ts

@@ -33,6 +33,7 @@ export type Config = {
   onHighlightStarted?: (element: Element | undefined, step: DriveStep) => void;
   onHighlighted?: (element: Element | undefined, step: DriveStep) => void;
   onDeselected?: (element: Element | undefined, step: DriveStep) => void;
+  onDestroyStarted?: (element: Element | undefined, step: DriveStep) => void;
   onDestroyed?: (element: Element | undefined, step: DriveStep) => void;
 
   // Event based callbacks, called upon events

src/driver.ts

@@ -25,9 +25,9 @@ export function driver(options: Config = {}) {
   }
 
   function moveNext() {
-    const activeIndex = getState('activeIndex');
-    const steps = getConfig('steps') || [];
-    if (typeof  activeIndex === 'undefined') {
+    const activeIndex = getState("activeIndex");
+    const steps = getConfig("steps") || [];
+    if (typeof activeIndex === "undefined") {
       return;
     }
 
@@ -40,9 +40,9 @@ export function driver(options: Config = {}) {
   }
 
   function movePrevious() {
-    const activeIndex = getState('activeIndex');
-    const steps = getConfig('steps') || [];
-    if (typeof  activeIndex === 'undefined') {
+    const activeIndex = getState("activeIndex");
+    const steps = getConfig("steps") || [];
+    if (typeof activeIndex === "undefined") {
       return;
     }
 
@@ -145,10 +145,20 @@ export function driver(options: Config = {}) {
     });
   }
 
-  function destroy() {
+  function destroy(withStartHook = 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) {
+      onDestroyStarted(activeElement, activeStep!);
+      return;
+    }
+
     const onDeselected = activeStep?.popover?.onDeselected || getConfig("onDeselected");
     const onDestroyed = getConfig("onDestroyed");
 
@@ -197,6 +207,8 @@ export function driver(options: Config = {}) {
           : undefined,
       });
     },
-    destroy,
+    destroy: () => {
+      destroy(false);
+    },
   };
 }