diff --git a/index.html b/index.html index f4b6a14..dc4b06f 100644 --- a/index.html +++ b/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 diff --git a/readme.md b/readme.md index 79c038d..dc5f40c 100644 --- a/readme.md +++ b/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 diff --git a/src/common/constants.js b/src/common/constants.js index e8decf6..486eb23 100644 --- a/src/common/constants.js +++ b/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; diff --git a/src/index.js b/src/index.js index 15b27e3..53bb84e 100644 --- a/src/index.js +++ b/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(); diff --git a/types/index.d.ts b/types/index.d.ts index bd0ad56..a73a628 100644 --- a/types/index.d.ts +++ b/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'