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
|