Adds support for overlayClickBehavior (#600)

* Add overlay click behavior

* Add overlay click behavior

Author: kamranahmedse

docs/src/content/guides/configuration.mdx

@@ -34,8 +34,8 @@ type Config = {
   // Opacity of the backdrop. (default: 0.5)
   overlayOpacity?: number;
   // What to do when the overlay backdrop is clicked.
-  // Possible options are 'close' and 'nextStep'. (default: 'close')
-  overlayClickBehavior?: string,
+  // Possible options are 'close', 'nextStep', or a custom function. (default: 'close')
+  overlayClickBehavior?: "close" | "nextStep" | ((element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void),
   // Distance between the highlighted element and the cutout. (default: 10)
   stagePadding?: number;
   // Radius of the cutout around the highlighted element. (default: 5)

index.html

@@ -172,6 +172,7 @@ <h2>Highlight Feature</h2>
         <button id="transition-highlight-btn">Transition Highlight</button>
         <button id="disallow-close">Disallow Close</button>
         <button id="click-overlay-to-next">Click Overlay to Next</button>
+        <button id="click-overlay-to-handle">Custom Overlay Click Handler</button>
         <button id="dark-highlight-btn">Super Dark Highlight</button>
         <button id="dim-highlight-btn">Super Dim Highlight</button>
         <button id="scrollable-area-btn">Scrollable Area</button>
@@ -1144,6 +1145,18 @@ <h2>Usage and Demo</h2>
         driverObj.drive();
       });
 
+      document.getElementById("click-overlay-to-handle").addEventListener("click", () => {
+        const driverObj = driver({
+          animate: true,
+          overlayClickBehavior: (element, step) => {
+            alert("Clicking me");
+          },
+          steps: basicTourSteps,
+        });
+
+        driverObj.drive();
+      });
+
       document.getElementById("destroy-btn").addEventListener("click", () => {
         driver().destroy();
       });

src/config.ts

@@ -16,7 +16,7 @@ export type Config = {
   overlayOpacity?: number;
   smoothScroll?: boolean;
   allowClose?: boolean;
-  overlayClickBehavior?: "close" | "nextStep";
+  overlayClickBehavior?: "close" | "nextStep" | DriverHook;
   stagePadding?: number;
   stageRadius?: number;
 

src/driver.ts

@@ -59,6 +59,19 @@ export function driver(options: Config = {}): Driver {
       return;
     }
 
+    if (typeof overlayClickBehavior === "function") {
+      const activeStep = getState("__activeStep");
+      const activeElement = getState("__activeElement");
+
+      overlayClickBehavior(activeElement, activeStep!, {
+        config: getConfig(),
+        state: getState(),
+        driver: getCurrentDriver(),
+      });
+
+      return;
+    }
+
     if (overlayClickBehavior === "nextStep") {
       moveNext();
     }