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.
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)
### Highlight and Popover – [Demo](http://kamranahmed.info/driver#single-element-with-popover)
You can show additional details beside the highlighted element using the popover
You can show additional details beside the highlighted element using the popover
...
@@ -87,8 +82,6 @@ driver.highlight({
...
@@ -87,8 +82,6 @@ driver.highlight({
Also, `title` and `description` can have HTML as well.
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)
### 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
By default, driver automatically finds the suitable position for the popover and displays it, you can override it using `position` property
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.
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.
...
@@ -149,7 +140,7 @@ You can also hide the buttons and control the introductions programmatically by
...
@@ -149,7 +140,7 @@ You can also hide the buttons and control the introductions programmatically by
![](./demo/images/split.png)
![](./demo/images/split.png)
# API
## API
Driver comes with several options that you can manipulate to make driver behave as you may like
Driver comes with several options that you can manipulate to make driver behave as you may like
...
@@ -159,12 +150,12 @@ Here are the options that Driver understands
...
@@ -159,12 +150,12 @@ Here are the options that Driver understands
```javascript
```javascript
constdriver=newDriver({
constdriver=newDriver({
animate:true,// Animate while changing highlighted element
animate:true,// Animate while changing highlighted element
opacity:0.75,// Background opacity (0 means only popovers and without overlay)
opacity:0.75,// Background opacity (0 means only popovers and without overlay)
padding:10,// Distance of element from around the edges
padding:10,// Distance of element from around the edges
onHighlightStarted:(Element){},// Called when element is about to be highlighted
onHighlightStarted:(Element){},// Called when element is about to be highlighted
onHighlighted:(Element){},// Called when element is fully highlighted
onHighlighted:(Element){},// Called when element is fully highlighted
onDeselected:(Element){},// Called when element has been deselected
onDeselected:(Element){},// Called when element has been deselected
});
});
```
```
...
@@ -174,19 +165,38 @@ Here are the set of options that you can pass while defining steps `defineSteps`
...
@@ -174,19 +165,38 @@ Here are the set of options that you can pass while defining steps `defineSteps`
```javascript
```javascript
conststepDefinition={
conststepDefinition={
element:'#some-item',// Query selector for the item to be highlighted
element:'#some-item',// Query selector for the item to be highlighted
popover:{// There will be no popover if empty or not given
popover:{// There will be no popover if empty or not given
title:'Title',// Title on the popover
title:'Title',// Title on the popover
description:'Description',// Body of the popover
description:'Description',// Body of the popover
showButtons:false,// Do not show control buttons in footer
showButtons:false,// Do not show control buttons in footer
doneBtnText:'Done',// Text on the last button
doneBtnText:'Done',// Text on the last button
closeBtnText:'Close',// Text on the close button
closeBtnText:'Close',// Text on the close button
nextBtnText:'Next',// Next button text
nextBtnText:'Next',// Next button text
prevBtnText:'Previous',// Previous button text
prevBtnText:'Previous',// Previous button text
}
}
};
};
```
```
For example, here is how it would look when highlighting a single element
```javascript
constdriver=newDriver(driverOptions);
driver.highlight(stepDefinition);
```
And this is how it would look when creating a step by step guide
```javascript
constdriver=newDriver(driverOptions);
driver.defineSteps([
stepDefinition1,
stepDefinition2,
stepDefinition3,
stepDefinition4,
]);
```
### API Methods
### API Methods
Below are the set of methods that are available to you
Below are the set of methods that are available to you
...
@@ -194,22 +204,40 @@ Below are the set of methods that are available to you
...
@@ -194,22 +204,40 @@ Below are the set of methods that are available to you
```javascript
```javascript
constdriver=newDriver(driverOptions);
constdriver=newDriver(driverOptions);
constisActivated=driver.isActivated;// Checks if the driver is active or not
// Checks if the driver is active or not
driver.moveNext();// Moves to next step in the steps list
if(driver.isActivated){
driver.movePrevious();// Moves to previous step in the steps list
console.log('Driver is active');
}
// In case of the steps guide, you can call below methods