Interactive Guide For Web App – Driver.js

Preview:

Description:

Driver.js is a lightweight yet powerful JavaScript library to create an animated, interactive, user-friendly visual guide for any web elements.

Features:

• With or without animations.
• With or without background overlay.
• Highlights web elements when the guide is active.
• Popover style step-by-step guide.

Basic usage:

Installation.

# Yarn
$ yarn add driver.js

# NPM
$ npm install driver.js --save

Insert the Driver.js’ JavaScript and CSS files into the html document.

<link rel="stylesheet" href="/path/to/driver.min.css">
<script src="/path/to/driver.min.js"></script>

Create new Driver instance and we’re ready to go.

const myDriver = new Driver();

Highlight a specific element within the document.

myDriver.highlight('#element');

Highlight a specific element with a popover.

myDriver.highlight({
  element: '#element',
  popover: {
    title: 'Popover Title',
    description: 'Description',
  }
});

Create a step-by-step guide.

// define your steps
myDriver.defineSteps([
  {
    element: '#element-1',
    popover: {
      title: 'Title 1',
      description: 'Desc 1',
      position: 'left',
      offset: 20
    }
  },
  {
    element: '#element-2',
    popover: {
      title: 'Title 2',
      description: 'Desc 2',
      position: 'right'
    }
  },
  {
    element: '#element-3',
    popover: {
      title: 'Title 3',
      description: 'Desc 3',
      position: 'right'
    }
  },
  ...
]);

// start the guide
driver.start();

All possible options for the Driver.js.

const driver = new Driver({

      // className to wrap driver.js popover
      className: 'scoped-class',        

      // enable the animation
      animate: true,

      // background opacity
      opacity: 0.75,   

      // padding of element                 
      padding: 10, 

      // is closable?
      allowClose: true, 

      // Allow controlling through keyboard (escape to close, arrow keys to move)
      keyboardControl: true,

      // Whether the click on overlay should move next
      overlayClickNext: false,      

      // text on the Done button
      doneBtnText: 'Done', 

      // text on the Close button
      closeBtnText: 'Close',    

      // background color        
      stageBackground: '#ffffff',

      // text on the Next button
      nextBtnText: 'Next',

      // text on the Prev button
      prevBtnText: 'Previous',

      // shows navigation buttons
      showButtons: false,

      // scrollIntoView options
      scrollIntoViewOptions: {},

      // callback functions
      onHighlightStarted: (Element) {},
      onHighlighted: (Element) {}, 
      onDeselected: (Element) {},  
      onReset: () {},   
      onNext: () {},
      onPrevious: () {}
         
});

All possible options for steps.

myDriver.defineSteps([
  {

    // element to highlight
    element: '#some-item', 

    // custom stage background color
    stageBackground: '#ffffff',

    popover: {                   
      className: 'popover-class', 
      title: 'Title',
      description: 'Description', 
      showButtons: false, 
      doneBtnText: 'Done',
      closeBtnText: 'Close',
      nextBtnText: 'Next', 
      prevBtnText: 'Previous',
    },

    // callbacks
    onNext: () => {},
    onPrevious: () => {}
  }
]);

API methods.

// checkes if is activated
myDriver.isActivated

// defines steps
driver.defineSteps([ stepDefinition1, stepDefinition2, stepDefinition3 ]);

// starts a specified step
driver.start(stepNumber = 0);

// moves to the next step
driver.moveNext();

// moves to the previous step
driver.movePrevious();

// checks if has the next step
driver.hasNextStep();

// checks if has the previous step
driver.hasPreviousStep();

// prevents the current move
driver.preventMove();

// highlights a specified element/step
driver.highlight(string|stepDefinition);

// refreshes the driver.js
driver.refresh();

// resets the driver.js
driver.reset();

// clear immediately or not
driver.reset(clearImmediately = false);

// checks if has highlighted element
driver.hasHighlightedElement()

// gets the currently highlighted element
const activeElement = driver.getHighlightedElement();

// gets the last highlighted element
const lastActiveElement = driver.getLastHighlightedElement();

// gets screen co-ordinates of the active element
activeElement.getCalculatedPosition(); 

// hides the popover
activeElement.hidePopover();

// shows the popover
activeElement.showPopover();

// gets the DOM node of the highlighted element
activeElement.getNode();

Changelog:

v0.9.3 (02/24/2019)

• Update

v0.9.2 (02/10/2019)

• Add more options
• Doc updated

v0.7.1 (10/12/2018)

• Add more options
• Optimize

v0.6.0 (06/30/2018)

• Add support for asynchronous actions

v0.5.2 (05/23/2018)

• Add keyboardControl option and typo in readme