Add support for driver object in hooks

docs/src/content/guides/configuration.mdx

@@ -73,7 +73,7 @@ type Config = {
   // PopoverDOM is an object with references to
   // the popover DOM elements such as buttons
   // title, descriptions, body, container etc.
-  onPopoverRender?: (popover: PopoverDOM, options: { config: Config; state: State }) => void;
+  onPopoverRender?: (popover: PopoverDOM, options: { config: Config; state: State, driver: Driver }) => void;
 
   // Hooks to run before and after highlighting
   // each step. Each hook receives the following
@@ -82,9 +82,10 @@ type Config = {
   //   - step: The step object configured for the step
   //   - options.config: The current configuration options
   //   - options.state: The current state of the driver
-  onHighlightStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
-  onHighlighted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
-  onDeselected?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
+  //   - options.driver: Current driver object
+  onHighlightStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void;
+  onHighlighted?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void;
+  onDeselected?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void;
 
   // Hooks to run before and after the driver
   // is destroyed. Each hook receives
@@ -93,8 +94,9 @@ type Config = {
   //   - step: The step object configured for the currently active
   //   - options.config: The current configuration options
   //   - options.state: The current state of the driver
-  onDestroyStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
-  onDestroyed?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
+  //   - options.driver: Current driver object
+  onDestroyStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void;
+  onDestroyed?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void;
 
   // Hooks to run on button clicks. Each hook receives
   // the following parameters:
@@ -102,9 +104,10 @@ type Config = {
   //   - step: The step object configured for the step
   //   - options.config: The current configuration options
   //   - options.state: The current state of the driver
-  onNextClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
-  onPrevClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
-  onCloseClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
+  //   - options.driver: Current driver object
+  onNextClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void;
+  onPrevClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void;
+  onCloseClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void;
 };
 ```
 
@@ -167,7 +170,7 @@ type Popover = {
   // Parameter is an object with references to
   // the popover DOM elements such as buttons
   // title, descriptions, body, etc.
-  onPopoverRender?: (popover: PopoverDOM, options: { config: Config; state: State }) => void;
+  onPopoverRender?: (popover: PopoverDOM, options: { config: Config; state: State, driver: Driver }) => void;
 
   // Callbacks for button clicks. You can use
   // these to add custom behavior to the buttons.
@@ -176,9 +179,10 @@ type Popover = {
   //   - step: The step object configured for the step
   //   - options.config: The current configuration options
   //   - options.state: The current state of the driver
-  onNextClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void
-  onPrevClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void
-  onCloseClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void
+  //   - options.driver: Current driver object
+  onNextClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void
+  onPrevClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void
+  onCloseClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void
 }
 ```
 
@@ -208,9 +212,10 @@ type DriveStep = {
   //   - step: The step object configured for the step
   //   - options.config: The current configuration options
   //   - options.state: The current state of the driver
-  onDeselected?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
-  onHighlightStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
-  onHighlighted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
+  //   - options.driver: Current driver object
+  onDeselected?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void;
+  onHighlightStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void;
+  onHighlighted?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void;
 }
 ```
 

index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -388,7 +388,7 @@ npm install driver.js</pre
           },
         },
         {
-          element: '.buttons',
+          element: ".buttons",
           popover: {
             title: "Buttons",
             description: "Here are some buttons",
@@ -468,13 +468,17 @@ npm install driver.js</pre
           disableActiveInteraction: true,
           showProgress: true,
           progressText: "{{current}} of {{total}} done",
-          onPopoverRender: (popover) => {
-            popover.title.innerHTML = `${driverObj.getActiveIndex()} ${driverObj.hasNextStep() ? 'Yes' : 'No'} ${driverObj.hasPreviousStep() ? 'Yes' : 'No'}`
-            popover.description.innerHTML = `${driverObj.isFirstStep() ? 'Yes' : 'No'} ${driverObj.isLastStep() ? 'Yes' : 'No'}`
+          onPopoverRender: popover => {
+            popover.title.innerHTML = `${driverObj.getActiveIndex()} ${driverObj.hasNextStep() ? "Yes" : "No"} ${
+              driverObj.hasPreviousStep() ? "Yes" : "No"
+            }`;
+            popover.description.innerHTML = `${driverObj.isFirstStep() ? "Yes" : "No"} ${
+              driverObj.isLastStep() ? "Yes" : "No"
+            }`;
 
             console.log(driverObj.getActiveIndex());
             console.log(driverObj.getActiveStep());
-          }
+          },
         });
 
         driverObj.drive(4);
@@ -491,16 +495,16 @@ npm install driver.js</pre
           {
             element: "h1",
             popover: {
-              description: "This is a new description"
-            }
+              description: "This is a new description",
+            },
           },
           {
             element: "p",
             popover: {
-              description: "This is another new description"
-            }
-          }
-        ])
+              description: "This is another new description",
+            },
+          },
+        ]);
 
         driverObj.drive();
       });
@@ -517,16 +521,16 @@ npm install driver.js</pre
           {
             element: "h1",
             popover: {
-              description: "This is a new description"
-            }
+              description: "This is a new description",
+            },
           },
           {
             element: "p",
             popover: {
-              description: "This is another new description"
-            }
-          }
-        ])
+              description: "This is another new description",
+            },
+          },
+        ]);
 
         driverObj.drive();
       });
@@ -624,7 +628,7 @@ npm install driver.js</pre
       document.getElementById("basic-tour").addEventListener("click", () => {
         const driverObj = driver({
           showProgress: true,
-          showButtons: ["next", 'previous', 'close'],
+          showButtons: ["next", "previous", "close"],
           steps: basicTourSteps,
         });
 
@@ -667,6 +671,10 @@ npm install driver.js</pre
             title: "Next and Close",
             showButtons: ["close", "next"],
             description: "This one only has next and close buttons, nothing else.",
+            onNextClick: (step, element, opts) => {
+              console.log("Next Clicked", step, element, opts);
+              opts.driver.destroy();
+            },
           },
         });
       });
@@ -835,10 +843,10 @@ npm install driver.js</pre
             driverObj.destroy();
           },
           steps: [
-            { popover: { title: "Some title", description: "Some description" }},
-            { popover: { title: "Another title", description: "Some description" }},
-            { popover: { title: "Yet another title", description: "Some description" }},
-          ]
+            { popover: { title: "Some title", description: "Some description" } },
+            { popover: { title: "Another title", description: "Some description" } },
+            { popover: { title: "Yet another title", description: "Some description" } },
+          ],
         });
 
         driverObj.drive();
@@ -856,10 +864,10 @@ npm install driver.js</pre
             });
           },
           steps: [
-            { popover: { title: "Some title", description: "Some description" }},
-            { popover: { title: "Another title", description: "Some description" }},
-            { popover: { title: "Yet another title", description: "Some description" }},
-          ]
+            { popover: { title: "Some title", description: "Some description" } },
+            { popover: { title: "Another title", description: "Some description" } },
+            { popover: { title: "Yet another title", description: "Some description" } },
+          ],
         });
 
         driverObj.drive();
@@ -1103,7 +1111,7 @@ npm install driver.js</pre
       document.getElementById("click-overlay-to-next").addEventListener("click", () => {
         const driverObj = driver({
           animate: true,
-          overlayClickBehavior: 'nextStep',
+          overlayClickBehavior: "nextStep",
           steps: basicTourSteps,
         });
 

src/config.ts

@@ -1,8 +1,12 @@
-import { DriveStep } from "./driver";
+import { Driver, DriveStep } from "./driver";
 import { AllowedButtons, PopoverDOM } from "./popover";
 import { State } from "./state";
 
-export type DriverHook = (element: Element | undefined, step: DriveStep, opts: { config: Config; state: State }) => void;
+export type DriverHook = (
+  element: Element | undefined,
+  step: DriveStep,
+  opts: { config: Config; state: State; driver: Driver }
+) => void;
 
 export type Config = {
   steps?: DriveStep[];
@@ -12,7 +16,7 @@ export type Config = {
   overlayOpacity?: number;
   smoothScroll?: boolean;
   allowClose?: boolean;
-  overlayClickBehavior?: 'close' | 'nextStep';
+  overlayClickBehavior?: "close" | "nextStep";
   stagePadding?: number;
   stageRadius?: number;
 
@@ -50,12 +54,13 @@ export type Config = {
 };
 
 let currentConfig: Config = {};
+let currentDriver: Driver;
 
 export function configure(config: Config = {}) {
   currentConfig = {
     animate: true,
     allowClose: true,
-    overlayClickBehavior: 'close',
+    overlayClickBehavior: "close",
     overlayOpacity: 0.7,
     smoothScroll: false,
     disableActiveInteraction: false,
@@ -75,3 +80,11 @@ export function getConfig<K extends keyof Config>(key: K): Config[K];
 export function getConfig<K extends keyof Config>(key?: K) {
   return key ? currentConfig[key] : currentConfig;
 }
+
+export function setCurrentDriver(driver: Driver) {
+  currentDriver = driver;
+}
+
+export function getCurrentDriver() {
+  return currentDriver;
+}

src/driver.ts

@@ -1,7 +1,7 @@
 import { AllowedButtons, destroyPopover, Popover } from "./popover";
 import { destroyOverlay } from "./overlay";
 import { destroyEvents, initEvents, requireRefresh } from "./events";
-import { Config, configure, DriverHook, getConfig } from "./config";
+import { Config, configure, DriverHook, getConfig, getCurrentDriver, setCurrentDriver } from "./config";
 import { destroyHighlight, highlight } from "./highlight";
 import { destroyEmitter, listen } from "./emitter";
 import { getState, resetState, setState } from "./state";
@@ -16,7 +16,31 @@ export type DriveStep = {
   disableActiveInteraction?: boolean;
 };
 
-export function driver(options: Config = {}) {
+export interface Driver {
+  isActive: () => boolean;
+  refresh: () => void;
+  drive: (stepIndex?: number) => void;
+  setConfig: (config: Config) => void;
+  setSteps: (steps: DriveStep[]) => void;
+  getConfig: () => Config;
+  getState: (key?: string) => any;
+  getActiveIndex: () => number | undefined;
+  isFirstStep: () => boolean;
+  isLastStep: () => boolean;
+  getActiveStep: () => DriveStep | undefined;
+  getActiveElement: () => Element | undefined;
+  getPreviousElement: () => Element | undefined;
+  getPreviousStep: () => DriveStep | undefined;
+  moveNext: () => void;
+  movePrevious: () => void;
+  moveTo: (index: number) => void;
+  hasNextStep: () => boolean;
+  hasPreviousStep: () => boolean;
+  highlight: (step: DriveStep) => void;
+  destroy: () => void;
+}
+
+export function driver(options: Config = {}): Driver {
   configure(options);
 
   function handleClose() {
@@ -103,6 +127,7 @@ export function driver(options: Config = {}) {
       return onPrevClick(activeElement, activeStep, {
         config: getConfig(),
         state: getState(),
+        driver: getCurrentDriver(),
       });
     }
 
@@ -127,6 +152,7 @@ export function driver(options: Config = {}) {
       return onNextClick(activeElement, activeStep, {
         config: getConfig(),
         state: getState(),
+        driver: getCurrentDriver(),
       });
     }
 
@@ -241,6 +267,7 @@ export function driver(options: Config = {}) {
       onDestroyStarted(isActiveDummyElement ? undefined : activeElement, activeStep!, {
         config: getConfig(),
         state: getState(),
+        driver: getCurrentDriver(),
       });
       return;
     }
@@ -264,6 +291,7 @@ export function driver(options: Config = {}) {
         onDeselected(isActiveDummyElement ? undefined : activeElement, activeStep, {
           config: getConfig(),
           state: getState(),
+          driver: getCurrentDriver(),
         });
       }
 
@@ -271,6 +299,7 @@ export function driver(options: Config = {}) {
         onDestroyed(isActiveDummyElement ? undefined : activeElement, activeStep, {
           config: getConfig(),
           state: getState(),
+          driver: getCurrentDriver(),
         });
       }
     }
@@ -280,7 +309,7 @@ export function driver(options: Config = {}) {
     }
   }
 
-  return {
+  const api: Driver = {
     isActive: () => getState("isInitialized") || false,
     refresh: requireRefresh,
     drive: (stepIndex: number = 0) => {
@@ -316,13 +345,13 @@ export function driver(options: Config = {}) {
       const steps = getConfig("steps") || [];
       const activeIndex = getState("activeIndex");
 
-      return activeIndex !== undefined && steps[activeIndex + 1];
+      return activeIndex !== undefined && !!steps[activeIndex + 1];
     },
     hasPreviousStep: () => {
       const steps = getConfig("steps") || [];
       const activeIndex = getState("activeIndex");
 
-      return activeIndex !== undefined && steps[activeIndex - 1];
+      return activeIndex !== undefined && !!steps[activeIndex - 1];
     },
     highlight: (step: DriveStep) => {
       init();
@@ -342,6 +371,8 @@ export function driver(options: Config = {}) {
       destroy(false);
     },
   };
-}
 
-export type Driver = ReturnType<typeof driver>;
+  setCurrentDriver(api);
+
+  return api;
+}

src/highlight.ts

@@ -1,6 +1,6 @@
 import { DriveStep } from "./driver";
 import { refreshOverlay, trackActiveElement, transitionStage } from "./overlay";
-import { getConfig } from "./config";
+import { getConfig, getCurrentDriver } from "./config";
 import { hidePopover, renderPopover, repositionPopover } from "./popover";
 import { bringInView } from "./utils";
 import { getState, setState } from "./state";
@@ -56,7 +56,6 @@ export function refreshActiveHighlight() {
   repositionPopover(activeHighlight, activeStep);
 }
 
-
 function transferHighlight(toElement: Element, toStep: DriveStep) {
   const duration = 400;
   const start = Date.now();
@@ -83,6 +82,7 @@ function transferHighlight(toElement: Element, toStep: DriveStep) {
     deselectedHook(isFromDummyElement ? undefined : fromElement, fromStep!, {
       config,
       state,
+      driver: getCurrentDriver(),
     });
   }
 
@@ -90,6 +90,7 @@ function transferHighlight(toElement: Element, toStep: DriveStep) {
     highlightStartedHook(isToDummyElement ? undefined : toElement, toStep, {
       config,
       state,
+      driver: getCurrentDriver(),
     });
   }
 
@@ -131,6 +132,7 @@ function transferHighlight(toElement: Element, toStep: DriveStep) {
         highlightedHook(isToDummyElement ? undefined : toElement, toStep, {
           config: getConfig(),
           state: getState(),
+          driver: getCurrentDriver(),
         });
       }
 

src/popover.ts

@@ -1,7 +1,7 @@
 import { bringInView, getFocusableElements } from "./utils";
-import { Config, DriverHook, getConfig } from "./config";
+import { Config, DriverHook, getConfig, getCurrentDriver } from "./config";
 import { getState, setState, State } from "./state";
-import { DriveStep } from "./driver";
+import { Driver, DriveStep } from "./driver";
 import { onDriverClick } from "./events";
 import { emit } from "./emitter";
 
@@ -28,7 +28,7 @@ export type Popover = {
   prevBtnText?: string;
 
   // Called after the popover is rendered
-  onPopoverRender?: (popover: PopoverDOM, opts: { config: Config; state: State }) => void;
+  onPopoverRender?: (popover: PopoverDOM, opts: { config: Config; state: State; driver: Driver }) => void;
 
   // Button callbacks
   onNextClick?: DriverHook;
@@ -168,6 +168,7 @@ export function renderPopover(element: Element, step: DriveStep) {
           return onNextClick(element, step, {
             config: getConfig(),
             state: getState(),
+            driver: getCurrentDriver(),
           });
         } else {
           return emit("nextClick");
@@ -179,6 +180,7 @@ export function renderPopover(element: Element, step: DriveStep) {
           return onPrevClick(element, step, {
             config: getConfig(),
             state: getState(),
+            driver: getCurrentDriver(),
           });
         } else {
           return emit("prevClick");
@@ -190,6 +192,7 @@ export function renderPopover(element: Element, step: DriveStep) {
           return onCloseClick(element, step, {
             config: getConfig(),
             state: getState(),
+            driver: getCurrentDriver(),
           });
         } else {
           return emit("closeClick");
@@ -204,7 +207,7 @@ export function renderPopover(element: Element, step: DriveStep) {
       return (
         !popover?.description.contains(target) &&
         !popover?.title.contains(target) &&
-        typeof target.className === 'string' &&
+        typeof target.className === "string" &&
         target.className.includes("driver-popover")
       );
     }
@@ -217,6 +220,7 @@ export function renderPopover(element: Element, step: DriveStep) {
     onPopoverRender(popover, {
       config: getConfig(),
       state: getState(),
+      driver: getCurrentDriver(),
     });
   }