kamrify commited on
Commit
6dc5bde
·
2 Parent(s): 7535da6 ce979ce

Resolve merge conflicts

Browse files
Files changed (4) hide show
  1. readme.md +1 -0
  2. src/common/constants.js +2 -0
  3. src/index.js +7 -0
  4. 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'