Add option to close on outside click

index.html

@@ -249,6 +249,8 @@ driver.highlight({
   animate: true,  // Animate while changing highlighted element
   opacity: 0.75,  // Background opacity (0 means only popovers and without overlay)
   padding: 10,    // Distance of element from around the edges
+  clickOutsideToClose: true, // Whether clicking on overlay should close or not
+  scrollIntoViewOptions: {}, // We use `scrollIntoView()` when possible, pass here the options for it if you want any
   onHighlightStarted: (Element) {}, // Called when element is about to be highlighted
   onHighlighted: (Element) {}, // Called when element is fully highlighted
   onDeselected: (Element) {}, // Called when element has been deselected

package.json

@@ -1,6 +1,6 @@
 {
   "name": "driver.js",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "A light-weight, no-dependency, vanilla JavaScript library to drive the user's focus across the page",
   "main": "dist/driver.min.js",
   "scripts": {

readme.md

@@ -153,8 +153,11 @@ Here are the options that Driver understands
 
 ```javascript
 const driver = new Driver({
+  animate: true,                    // Whether to animate or not
   opacity: 0.75,                    // Background opacity (0 means only popovers and without overlay)
   padding: 10,                      // Distance of element from around the edges
+  clickOutsideToClose: true,        // Whether the click on overlay should close or not
+  scrollIntoViewOptions: {},        // We use `scrollIntoView()` when possible, pass here the options for it if you want any
   onHighlightStarted: (Element) {}, // Called when element is about to be highlighted
   onHighlighted: (Element) {},      // Called when element is fully highlighted
   onDeselected: (Element) {},       // Called when element has been deselected

src/common/constants.js

@@ -1,6 +1,8 @@
 export const OVERLAY_OPACITY = 0.75;
 export const OVERLAY_PADDING = 10;
-export const OVERLAY_ANIMATE = true;
+
+export const SHOULD_ANIMATE_OVERLAY = true;
+export const SHOULD_OUTSIDE_CLICK_CLOSE = true;
 
 export const ESC_KEY_CODE = 27;
 export const LEFT_KEY_CODE = 37;

src/index.js

@@ -9,10 +9,10 @@ import {
   ESC_KEY_CODE,
   ID_POPOVER,
   LEFT_KEY_CODE,
-  OVERLAY_ANIMATE,
+  SHOULD_ANIMATE_OVERLAY,
   OVERLAY_OPACITY,
   OVERLAY_PADDING,
-  RIGHT_KEY_CODE,
+  RIGHT_KEY_CODE, SHOULD_OUTSIDE_CLICK_CLOSE,
 } from './common/constants';
 import Stage from './core/stage';
 
@@ -25,10 +25,11 @@ export default class Driver {
    */
   constructor(options = {}) {
     this.options = {
-      animate: OVERLAY_ANIMATE,     // Whether to animate or not
+      animate: SHOULD_ANIMATE_OVERLAY,     // Whether to animate or not
       opacity: OVERLAY_OPACITY,     // Overlay opacity
       padding: OVERLAY_PADDING,     // Spacing around the element from the overlay
       scrollIntoViewOptions: null,  // Options to be passed to `scrollIntoView`
+      clickOutsideToClose: SHOULD_OUTSIDE_CLICK_CLOSE,    // Whether to close overlay on click outside the element
       onHighlightStarted: () => {   // When element is about to be highlighted
       },
       onHighlighted: () => {        // When element has been highlighted
@@ -81,7 +82,7 @@ export default class Driver {
     const clickedPopover = popover && popover.contains(e.target);
 
     // Remove the overlay If clicked outside the highlighted element
-    if (!clickedHighlightedElement && !clickedPopover) {
+    if (!clickedHighlightedElement && !clickedPopover && this.options.clickOutsideToClose) {
       this.reset();
       return;
     }