Driver.js

Powerful yet light-weight, vanilla JavaScript engine to drive the user's focus across the page
_{Only ~4kb, no external dependency, supports all major browsers and highly customizable}

* **Simple**: is simple to use and has no external dependency at all * **Light-weight**: ~4kb in size, vanilla JavaScript and no external dependency * **Highly customizable**: has a powerful API and can be used however you want * **Highlight anything**: highlight any (literally any) element on page * **Feature introductions**: create powerful feature introductions for your web applications * **Focus shifters**: add focus shifters for users * **User friendly**: Everything is controllable by keyboard * **Consistent behavior**: usable across all browsers (including in-famous IE) * **MIT Licensed**: free for personal and commercial use ![](./demo/images/split.png) For Usage and Examples, [have a look at demo](http://kamranahmed.info/driver) ## Installation You can install it using `yarn` or `npm`, whatever you prefer ```sh yarn add driver.js npm install driver.js ``` Or grab the code from `dist` directory and include it directly ```html ``` ![](./demo/images/split.png) ## Usage and Demo Demos and many more usage examples can be found [through the docs page](http://kamranahmed.info/driver). ### Highlighting Single Element – [Demo](http://kamranahmed.info/driver#single-element-no-popover) If all you want is just highlight a single element, you can do that simply by passing the selector ```javascript const driver = new Driver(); driver.highlight('#create-post'); ``` A real world usage example for this could be using it to dim the background and highlight the required element e.g. the way facebook does it on creating a post. ![](./demo/images/split.png) ### Highlight and Popover – [Demo](http://kamranahmed.info/driver#single-element-with-popover) You can show additional details beside the highlighted element using the popover ```javascript const driver = new Driver(); driver.highlight({ element: '#some-element', popover: { title: 'Title for the Popover', description: 'Description for it', } }); ``` Also, `title` and `description` can have HTML as well. ![](./demo/images/split.png) ### Positioning the Popover – [Demo](http://kamranahmed.info/driver#single-element-with-popover-position) By default, driver automatically finds the suitable position for the popover and displays it, you can override it using `position` property ```javascript const driver = new Driver(); driver.highlight({ element: '#some-element', popover: { title: 'Title for the Popover', description: 'Description for it', position: 'left', // can be `top`, `left`, `right`, `bottom` } }); ``` ![](./demo/images/split.png) ### Creating Feature Introductions – [Demo](http://kamranahmed.info/driver) Feature introductions are helpful in onboarding new users and giving them idea about different parts of the application, you can create them seemlessly with driver. Define the steps and call the `start` when you want to start presenting. User will be able to control the steps using keyboard or using the buttons on popovers. ```javascript const driver = new Driver(); // Define the steps for introduction driver.defineSteps([ { element: '#first-element-introduction', popover: { title: 'Title on Popover', description: 'Body of the popover', position: 'left' } }, { element: '#second-element-introduction', popover: { title: 'Title on Popover', description: 'Body of the popover', position: 'top' } }, { element: '#third-element-introduction', popover: { title: 'Title on Popover', description: 'Body of the popover', position: 'right' } }, ]); // Start the introduction driver.start(); ``` You can also hide the buttons and control the introductions programmatically by using the API methods listed below ![](./demo/images/split.png) # API Driver comes with several options that you can manipulate to make driver behave as you may like ### Driver Definition Here are the options that Driver understands ```javascript const driver = new Driver({ 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 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 }); ``` ### Step Definition Here are the set of options that you can pass while defining steps `defineSteps` or the object that you pass to `highlight` method ```javascript const stepDefinition = { element: '#some-item', // Query selector for the item to be highlighted popover: { // There will be no popover if empty or not given title: 'Title', // Title on the popover description: 'Description', // Body of the popover showButtons: false, // Do not show control buttons in footer doneBtnText: 'Done', // Text on the last button closeBtnText: 'Close', // Text on the close button nextBtnText: 'Next', // Next button text prevBtnText: 'Previous', // Previous button text } }; ``` ### API Methods Below are the set of methods that are available to you ```javascript const driver = new Driver(driverOptions); const isActivated = driver.isActivated; // Checks if the driver is active or not driver.moveNext(); // Moves to next step in the steps list driver.movePrevious(); // Moves to previous step in the steps list driver.start(stepNumber = 0); // Starts driving through the defined steps driver.highlight(string|stepDefinition); // highlights the element using query selector or the step definition driver.reset(); // Resets the overlay and clears the screen driver.hasHighlightedElement(); // Checks if there is any highlighted element driver.hasNextStep(); // Checks if there is next step to move to driver.hasPreviousStep(); // Checks if there is previous step to move to // Gets the currently highlighted element on screen const activeElement = driver.getHighlightedElement(); const lastActiveElement = driver.getLastHighlightedElement(); activeElement.getScreenCoordinates(); // Gets screen co-ordinates of the active element activeElement.hidePopover(); // Hide the popover activeElement.showPopover(); // Show the popover activeElement.getNode(); // Gets the DOM Element behind this element ``` ![](./demo/images/split.png) ## License MIT © [Kamran Ahmed](https://twitter.com/kamranahmedse)