Move next on click of overlay
Browse files- index.html +1 -0
- readme.md +1 -1
- src/common/constants.js +0 -1
- src/index.js +2 -2
- types/index.d.ts +1 -1
index.html
CHANGED
|
@@ -272,6 +272,7 @@ driver.highlight({
|
|
| 272 |
opacity: 0.75, // Background opacity (0 means only popovers and without overlay)
|
| 273 |
padding: 10, // Distance of element from around the edges
|
| 274 |
allowClose: true, // Whether clicking on overlay should close or not
|
|
|
|
| 275 |
doneBtnText: 'Done', // Text on the final button
|
| 276 |
closeBtnText: 'Close', // Text on the close button for this step
|
| 277 |
nextBtnText: 'Next', // Next button text for this step
|
|
|
|
| 272 |
opacity: 0.75, // Background opacity (0 means only popovers and without overlay)
|
| 273 |
padding: 10, // Distance of element from around the edges
|
| 274 |
allowClose: true, // Whether clicking on overlay should close or not
|
| 275 |
+
overlayClickNext: false, // Should it move to next step on overlay click
|
| 276 |
doneBtnText: 'Done', // Text on the final button
|
| 277 |
closeBtnText: 'Close', // Text on the close button for this step
|
| 278 |
nextBtnText: 'Next', // Next button text for this step
|
readme.md
CHANGED
|
@@ -160,7 +160,7 @@ const driver = new Driver({
|
|
| 160 |
opacity: 0.75, // Background opacity (0 means only popovers and without overlay)
|
| 161 |
padding: 10, // Distance of element from around the edges
|
| 162 |
allowClose: true, // Whether the click on overlay should close or not
|
| 163 |
-
|
| 164 |
doneBtnText: 'Done', // Text on the final button
|
| 165 |
closeBtnText: 'Close', // Text on the close button for this step
|
| 166 |
stageBackground: '#ffffff', // Background color for the staged behind highlighted element
|
|
|
|
| 160 |
opacity: 0.75, // Background opacity (0 means only popovers and without overlay)
|
| 161 |
padding: 10, // Distance of element from around the edges
|
| 162 |
allowClose: true, // Whether the click on overlay should close or not
|
| 163 |
+
overlayClickNext: false, // Whether the click on overlay should move next
|
| 164 |
doneBtnText: 'Done', // Text on the final button
|
| 165 |
closeBtnText: 'Close', // Text on the close button for this step
|
| 166 |
stageBackground: '#ffffff', // Background color for the staged behind highlighted element
|
src/common/constants.js
CHANGED
|
@@ -3,7 +3,6 @@ export const OVERLAY_PADDING = 10;
|
|
| 3 |
|
| 4 |
export const SHOULD_ANIMATE_OVERLAY = true;
|
| 5 |
export const SHOULD_OUTSIDE_CLICK_CLOSE = true;
|
| 6 |
-
|
| 7 |
export const SHOULD_OUTSIDE_CLICK_NEXT = false;
|
| 8 |
|
| 9 |
export const ESC_KEY_CODE = 27;
|
|
|
|
| 3 |
|
| 4 |
export const SHOULD_ANIMATE_OVERLAY = true;
|
| 5 |
export const SHOULD_OUTSIDE_CLICK_CLOSE = true;
|
|
|
|
| 6 |
export const SHOULD_OUTSIDE_CLICK_NEXT = false;
|
| 7 |
|
| 8 |
export const ESC_KEY_CODE = 27;
|
src/index.js
CHANGED
|
@@ -32,7 +32,7 @@ export default class Driver {
|
|
| 32 |
padding: OVERLAY_PADDING, // Spacing around the element from the overlay
|
| 33 |
scrollIntoViewOptions: null, // Options to be passed to `scrollIntoView`
|
| 34 |
allowClose: SHOULD_OUTSIDE_CLICK_CLOSE, // Whether to close overlay on click outside the element
|
| 35 |
-
|
| 36 |
stageBackground: '#ffffff', // Background color for the stage
|
| 37 |
onHighlightStarted: () => { // When element is about to be highlighted
|
| 38 |
},
|
|
@@ -89,7 +89,7 @@ export default class Driver {
|
|
| 89 |
const clickedHighlightedElement = highlightedElement.node.contains(e.target);
|
| 90 |
const clickedPopover = popover && popover.contains(e.target);
|
| 91 |
|
| 92 |
-
if (!clickedHighlightedElement && !clickedPopover && this.options.
|
| 93 |
this.moveNext();
|
| 94 |
return;
|
| 95 |
}
|
|
|
|
| 32 |
padding: OVERLAY_PADDING, // Spacing around the element from the overlay
|
| 33 |
scrollIntoViewOptions: null, // Options to be passed to `scrollIntoView`
|
| 34 |
allowClose: SHOULD_OUTSIDE_CLICK_CLOSE, // Whether to close overlay on click outside the element
|
| 35 |
+
overlayClickNext: SHOULD_OUTSIDE_CLICK_NEXT, // Whether to move next on click outside the element
|
| 36 |
stageBackground: '#ffffff', // Background color for the stage
|
| 37 |
onHighlightStarted: () => { // When element is about to be highlighted
|
| 38 |
},
|
|
|
|
| 89 |
const clickedHighlightedElement = highlightedElement.node.contains(e.target);
|
| 90 |
const clickedPopover = popover && popover.contains(e.target);
|
| 91 |
|
| 92 |
+
if (!clickedHighlightedElement && !clickedPopover && this.options.overlayClickNext) {
|
| 93 |
this.moveNext();
|
| 94 |
return;
|
| 95 |
}
|
types/index.d.ts
CHANGED
|
@@ -649,7 +649,7 @@ declare module 'driver.js' {
|
|
| 649 |
* Clicking outside the highlighted element should move next
|
| 650 |
* @default false
|
| 651 |
*/
|
| 652 |
-
|
| 653 |
|
| 654 |
/**
|
| 655 |
* Background color for the stage behind the highlighted element
|
|
|
|
| 649 |
* Clicking outside the highlighted element should move next
|
| 650 |
* @default false
|
| 651 |
*/
|
| 652 |
+
overlayClickNext?: boolean,
|
| 653 |
|
| 654 |
/**
|
| 655 |
* Background color for the stage behind the highlighted element
|