kamrify commited on
Commit
ddf993e
·
1 Parent(s): 6dc5bde

Move next on click of overlay

Browse files
Files changed (5) hide show
  1. index.html +1 -0
  2. readme.md +1 -1
  3. src/common/constants.js +0 -1
  4. src/index.js +2 -2
  5. 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
- 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
 
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
- 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,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.outsideClickNext) {
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
- outsideClickNext?: boolean,
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