Merge branch 'ryo-ma-feature/outside_click_next_move'

index.html

@@ -272,6 +272,7 @@ driver.highlight({
   opacity: 0.75,  // Background opacity (0 means only popovers and without overlay)
   padding: 10,    // Distance of element from around the edges
   allowClose: true, // Whether clicking on overlay should close or not
+  overlayClickNext: false, // Should it move to next step on overlay click
   doneBtnText: 'Done', // Text on the final button
   closeBtnText: 'Close', // Text on the close button for this step
   nextBtnText: 'Next', // Next button text for this step

readme.md

@@ -160,6 +160,7 @@ const driver = new Driver({
   opacity: 0.75,                    // Background opacity (0 means only popovers and without overlay)
   padding: 10,                      // Distance of element from around the edges
   allowClose: true,                 // Whether the click on overlay should close or not
+  overlayClickNext: false,          // Whether the click on overlay should move next
   doneBtnText: 'Done',              // Text on the final button
   closeBtnText: 'Close',            // Text on the close button for this step
   stageBackground: '#ffffff',       // Background color for the staged behind highlighted element

src/common/constants.js

@@ -3,6 +3,7 @@ export const OVERLAY_PADDING = 10;
 
 export const SHOULD_ANIMATE_OVERLAY = true;
 export const SHOULD_OUTSIDE_CLICK_CLOSE = true;
+export const SHOULD_OUTSIDE_CLICK_NEXT = false;
 
 export const ESC_KEY_CODE = 27;
 export const LEFT_KEY_CODE = 37;

src/index.js

@@ -14,6 +14,7 @@ import {
   RIGHT_KEY_CODE,
   SHOULD_ANIMATE_OVERLAY,
   SHOULD_OUTSIDE_CLICK_CLOSE,
+  SHOULD_OUTSIDE_CLICK_NEXT,
 } from './common/constants';
 import Stage from './core/stage';
 
@@ -31,6 +32,7 @@ export default class Driver {
       padding: OVERLAY_PADDING, // Spacing around the element from the overlay
       scrollIntoViewOptions: null,  // Options to be passed to `scrollIntoView`
       allowClose: SHOULD_OUTSIDE_CLICK_CLOSE,    // Whether to close overlay on click outside the element
+      overlayClickNext: SHOULD_OUTSIDE_CLICK_NEXT,  // Whether to move next on click outside the element
       stageBackground: '#ffffff',   // Background color for the stage
       onHighlightStarted: () => {   // When element is about to be highlighted
       },
@@ -87,6 +89,11 @@ export default class Driver {
     const clickedHighlightedElement = highlightedElement.node.contains(e.target);
     const clickedPopover = popover && popover.contains(e.target);
 
+    if (!clickedHighlightedElement && !clickedPopover && this.options.overlayClickNext) {
+      this.moveNext();
+      return;
+    }
+
     // Remove the overlay If clicked outside the highlighted element
     if (!clickedHighlightedElement && !clickedPopover && this.options.allowClose) {
       this.reset();

types/index.d.ts

@@ -645,6 +645,12 @@ declare module 'driver.js' {
        */
       allowClose?: boolean,
 
+      /**
+       * Clicking outside the highlighted element should move next
+       * @default false
+       */
+      overlayClickNext?: boolean,
+
       /**
        * Background color for the stage behind the highlighted element
        * @default '#ffffff'