diff --git a/docs/src/content/guides/configuration.mdx b/docs/src/content/guides/configuration.mdx index cbbcb1a..2826a3d 100644 --- a/docs/src/content/guides/configuration.mdx +++ b/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) diff --git a/index.html b/index.html index bb8aa00..b1891c8 100644 --- a/index.html +++ b/index.html @@ -172,6 +172,7 @@ + @@ -1144,6 +1145,18 @@ npm install driver.js { + const driverObj = driver({ + animate: true, + overlayClickBehavior: (element, step) => { + alert("Clicking me"); + }, + steps: basicTourSteps, + }); + + driverObj.drive(); + }); + document.getElementById("destroy-btn").addEventListener("click", () => { driver().destroy(); }); diff --git a/src/config.ts b/src/config.ts index 7696f92..c4a8e6c 100644 --- a/src/config.ts +++ b/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; diff --git a/src/driver.ts b/src/driver.ts index 9108aff..1bbe529 100644 --- a/src/driver.ts +++ b/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(); }