Feature/support click mask to next step (#499)

* feature: Support click mask to next step

* refactor: rename `clickMaskBehavior` to `overlayClickBehavior`

index.html

@@ -169,6 +169,7 @@
         <button id="simple-highlight-btn">Simple Highlight</button>
         <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="dark-highlight-btn">Super Dark Highlight</button>
         <button id="dim-highlight-btn">Super Dim Highlight</button>
         <button id="scrollable-area-btn">Scrollable Area</button>
@@ -1099,6 +1100,16 @@ npm install driver.js</pre
         });
       });
 
+      document.getElementById("click-overlay-to-next").addEventListener("click", () => {
+        const driverObj = driver({
+          animate: true,
+          overlayClickBehavior: 'nextStep',
+          steps: basicTourSteps,
+        });
+
+        driverObj.drive();
+      });
+
       document.getElementById("destroy-btn").addEventListener("click", () => {
         driver().destroy();
       });

src/config.ts

@@ -12,6 +12,7 @@ export type Config = {
   overlayOpacity?: number;
   smoothScroll?: boolean;
   allowClose?: boolean;
+  overlayClickBehavior?: 'close' | 'nextStep';
   stagePadding?: number;
   stageRadius?: number;
 
@@ -54,6 +55,7 @@ export function configure(config: Config = {}) {
   currentConfig = {
     animate: true,
     allowClose: true,
+    overlayClickBehavior: 'close',
     overlayOpacity: 0.7,
     smoothScroll: false,
     disableActiveInteraction: false,

src/driver.ts

@@ -26,6 +26,19 @@ export function driver(options: Config = {}) {
     destroy();
   }
 
+  function handleOverlayClick() {
+    const overlayClickBehavior = getConfig("overlayClickBehavior");
+
+    if (getConfig("allowClose") && overlayClickBehavior === "close") {
+      destroy();
+      return;
+    }
+
+    if (overlayClickBehavior === "nextStep") {
+      moveNext();
+    }
+  }
+
   function moveNext() {
     const activeIndex = getState("activeIndex");
     const steps = getConfig("steps") || [];
@@ -129,7 +142,7 @@ export function driver(options: Config = {}) {
 
     initEvents();
 
-    listen("overlayClick", handleClose);
+    listen("overlayClick", handleOverlayClick);
     listen("escapePress", handleClose);
     listen("arrowLeftPress", handleArrowLeft);
     listen("arrowRightPress", handleArrowRight);