Resolve merge conflicts
Browse files- readme.md +1 -0
- src/common/constants.js +2 -0
- src/index.js +7 -0
- types/index.d.ts +6 -0
readme.md
CHANGED
@@ -160,6 +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 |
doneBtnText: 'Done', // Text on the final button
|
164 |
closeBtnText: 'Close', // Text on the close button for this step
|
165 |
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 |
+
outsideClickNext: 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
@@ -4,6 +4,8 @@ export const OVERLAY_PADDING = 10;
|
|
4 |
export const SHOULD_ANIMATE_OVERLAY = true;
|
5 |
export const SHOULD_OUTSIDE_CLICK_CLOSE = true;
|
6 |
|
|
|
|
|
7 |
export const ESC_KEY_CODE = 27;
|
8 |
export const LEFT_KEY_CODE = 37;
|
9 |
export const RIGHT_KEY_CODE = 39;
|
|
|
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;
|
10 |
export const LEFT_KEY_CODE = 37;
|
11 |
export const RIGHT_KEY_CODE = 39;
|
src/index.js
CHANGED
@@ -14,6 +14,7 @@ import {
|
|
14 |
RIGHT_KEY_CODE,
|
15 |
SHOULD_ANIMATE_OVERLAY,
|
16 |
SHOULD_OUTSIDE_CLICK_CLOSE,
|
|
|
17 |
} from './common/constants';
|
18 |
import Stage from './core/stage';
|
19 |
|
@@ -31,6 +32,7 @@ export default class Driver {
|
|
31 |
padding: OVERLAY_PADDING, // Spacing around the element from the overlay
|
32 |
scrollIntoViewOptions: null, // Options to be passed to `scrollIntoView`
|
33 |
allowClose: SHOULD_OUTSIDE_CLICK_CLOSE, // Whether to close overlay on click outside the element
|
|
|
34 |
stageBackground: '#ffffff', // Background color for the stage
|
35 |
onHighlightStarted: () => { // When element is about to be highlighted
|
36 |
},
|
@@ -87,6 +89,11 @@ export default class Driver {
|
|
87 |
const clickedHighlightedElement = highlightedElement.node.contains(e.target);
|
88 |
const clickedPopover = popover && popover.contains(e.target);
|
89 |
|
|
|
|
|
|
|
|
|
|
|
90 |
// Remove the overlay If clicked outside the highlighted element
|
91 |
if (!clickedHighlightedElement && !clickedPopover && this.options.allowClose) {
|
92 |
this.reset();
|
|
|
14 |
RIGHT_KEY_CODE,
|
15 |
SHOULD_ANIMATE_OVERLAY,
|
16 |
SHOULD_OUTSIDE_CLICK_CLOSE,
|
17 |
+
SHOULD_OUTSIDE_CLICK_NEXT,
|
18 |
} from './common/constants';
|
19 |
import Stage from './core/stage';
|
20 |
|
|
|
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 |
+
outsideClickNext: 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.outsideClickNext) {
|
93 |
+
this.moveNext();
|
94 |
+
return;
|
95 |
+
}
|
96 |
+
|
97 |
// Remove the overlay If clicked outside the highlighted element
|
98 |
if (!clickedHighlightedElement && !clickedPopover && this.options.allowClose) {
|
99 |
this.reset();
|
types/index.d.ts
CHANGED
@@ -645,6 +645,12 @@ declare module 'driver.js' {
|
|
645 |
*/
|
646 |
allowClose?: boolean,
|
647 |
|
|
|
|
|
|
|
|
|
|
|
|
|
648 |
/**
|
649 |
* Background color for the stage behind the highlighted element
|
650 |
* @default '#ffffff'
|
|
|
645 |
*/
|
646 |
allowClose?: boolean,
|
647 |
|
648 |
+
/**
|
649 |
+
* Clicking outside the highlighted element should move next
|
650 |
+
* @default false
|
651 |
+
*/
|
652 |
+
outsideClickNext?: boolean,
|
653 |
+
|
654 |
/**
|
655 |
* Background color for the stage behind the highlighted element
|
656 |
* @default '#ffffff'
|