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 -
- -A light-weight, no-dependency, vanilla JavaScript library to drive the user's focus across the +
+ Driver.js
+ Light-weight, no-dependency, vanilla JavaScript engine to drive user's focus across + the page
- Quick Tour + + With Animation + Without Animation + + +@@ -53,8 +64,7 @@How does it do that?
Can you show some Examples?
-Below you find some of the examples and sample use-cases on how you can use it. Run by clicking the -
+RUNbutton.Below you find some of the examples and sample use-cases on how you can use it.
Highlighting a Single Element – Without Popover
@@ -114,8 +124,8 @@Highlighting a Single Element – With Popover
-Popover Positioning
-You can also, change the position of the popover to be either
+left,top, -rightorbottom.You can also, change the position of the popover to be either
Show Demoleft,left-center,left-bottom,top,top-center,top-right, +right,right-center,right-bottomorbottom,bottom-center,bottom-right,mid-center.@@ -154,10 +167,32 @@const driver = new Driver(); driver.highlight({ @@ -123,7 +133,10 @@Popover Positioning
popover: { title: 'Title for the Popover', description: 'Description for it', - position: 'left', // can be `top`, `left`, `right`, `bottom` + // position can be left, left-center, left-bottom, top, + // top-center, top-right, right, right-center, right-bottom, + // bottom, bottom-center, bottom-right, mid-center + position: 'left', } });HTML in Popovers
And of-course it can be any valid HTML.
+And of course it can be any valid HTML.
+++ +Disable Close on Outside Click
+By default, driver.js gets reset if user clicks outside the highlighted element, you can disable this:
+ Show Demo ++const driver = new Driver({ + allowClose: false, +}); +driver.highlight({ + element: '#some-element', + popover: { + title: '<em>An italicized title</em>', + description: 'Description may also contain <strong>HTML</strong>' + } +}); ++ If you use this option, for multi-step driver, it would close after you are done with the popover or you can close it programmatically. For single element popover, you need to close it properly, otherwise it won't be closed +
+driver.reset()+
+Creating Feature Introductions
You can also make powerful feature introductions to guide the users @@ -172,6 +207,7 @@
Creating Feature Introductions
{ element: '#first-element-introduction', popover: { + className: 'first-step-popover-class', title: 'Title on Popover', description: 'Body of the popover', position: 'left' @@ -237,29 +273,44 @@..and much much more
Driver Definition
Here are the options that Driver understands
const driver = new Driver({ + className: 'scoped-class', // className to wrap driver.js popover 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 + allowClose: true, // Whether clicking on overlay should close or not + overlayClickNext: false, // Should it move to next step on overlay click + doneBtnText: 'Done', // Text on the final button + closeBtnText: 'Close', // Text on the close button for this step + nextBtnText: 'Next', // Next button text for this step + prevBtnText: 'Previous', // Previous button text for this step + showButtons: false, // Do not show control buttons in footer + keyboardControl: true, // Allow controlling through keyboard (escape to close, arrow keys to move) + 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 + onReset: (Element) {}, // Called when overlay is about to be cleared + onNext: (Element) => {}, // Called when moving to next step on any step + onPrevious: (Element) => {}, // Called when moving to next step on any step });Note that all the button options that you provide in the driver definition can be overridden for a + specific step by giving them in the step definition
Step Definition
Here are the set of options that you can pass in each step i.e. an item in array of steps or the object that you pass to
highlightmethod@@ -279,10 +330,14 @@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 + element: '#some-item', // Query selector string or Node to be highlighted + popover: { // There will be no popover if empty or not given + className: 'popover-class', // className to wrap this specific step popover in addition to the general className in Driver options + 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 + showButtons: false, // Do not show control buttons in footer + closeBtnText: 'Close', // Text on the close button for this step + nextBtnText: 'Next', // Next button text for this step + prevBtnText: 'Previous', // Previous button text for this step } };API Methods
driver.hasNextStep(); // Checks if there is next step to move to driver.hasPreviousStep(); // Checks if there is previous step to move to +// Prevents the current move. Useful in `onNext` or `onPrevious` if you want to +// perform some asynchronous task and manually move to next step +driver.preventMove(); + // 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.getCalculatedPosition(); // Gets screen co-ordinates of the active element activeElement.hidePopover(); // Hide the popover activeElement.showPopover(); // Show the popover @@ -290,20 +345,20 @@API Methods
You can use a variety of options to achieve whatever you may want. I have some plans on improving - it further, make sure to keep an eye on the github + it further, make sure to keep an eye on the GitHub page
Contributing
You can find the contribution instructions on the github page. Feel free to submit an + target="_blank">GitHub page. Feel free to submit an issue, create a pull request or spread the word
A product by Kamran produced out of boredom and - frustration in cold Berlin after he gave up on trying to find a perfect solution to integrate journey introduction + frustration after he gave up on trying to find a perfect solution to integrate journey introduction and overlays.
Contributing - - - - - -
- 
- 
-