Author: | kamranahmedse |
---|---|
Views Total: | 2,584 views |
Official Page: | Go to website |
Last Update: | March 21, 2020 |
License: | MIT |
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, // Put the close button as an X on the top right corner of popover xCloseButton: false, // Enables the steps counter showCounter: false, // Template of steps counter counterTemplate: '{current} of {total}', // 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.8 (03/21/2020)
- Resolve merge conflicts
v0.9.8 (02/29/2020)
- Adds step counter feature
v0.9.7 (06/15/2019)
- Updates Dependencies
v0.9.6 (06/01/2019)
- Fix touch issue
- Error when hiding on an element without popover
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