diff --git a/index.html b/index.html
index f4840a3..eebb746 100644
--- a/index.html
+++ b/index.html
@@ -314,6 +314,9 @@ npm install driver.js {
+ console.log("Deselected element", element, step);
+ },
onHighlightStarted: (element, step) => {
console.log("Started highlighting element", element, step);
},
@@ -359,7 +362,18 @@ npm install driver.js {
- const driverObj = driver({ animate: true });
+ const driverObj = driver({
+ animate: true,
+ onDeselected: (element, step) => {
+ console.log("Deselected element", element, step);
+ },
+ onHighlightStarted: (element, step) => {
+ console.log("Started highlighting element", element, step);
+ },
+ onHighlighted: (element, step) => {
+ console.log("Highlighted element", element, step);
+ },
+ });
driverObj.highlight({
popover: {
diff --git a/src/config.ts b/src/config.ts
index b2b3f4f..c60c6c4 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -13,6 +13,8 @@ export type Config = {
onHighlightStarted?: (element: Element, step: DriveStep) => void;
onHighlighted?: (element: Element, step: DriveStep) => void;
+
+ onDeselected?: (element: Element, step: DriveStep) => void;
};
let currentConfig: Config = {};
diff --git a/src/driver.ts b/src/driver.ts
index 40e9a35..cbd33d1 100644
--- a/src/driver.ts
+++ b/src/driver.ts
@@ -21,6 +21,13 @@ export function driver(options: Config = {}) {
return;
}
+ const activeStep = getState("activeStep");
+ const activeElement = getState("activeElement");
+ const onDeselected = getConfig("onDeselected");
+ if (activeStep && activeElement && onDeselected) {
+ onDeselected(activeElement, activeStep);
+ }
+
destroy();
}
@@ -60,10 +67,12 @@ export function driver(options: Config = {}) {
init();
highlight({
...step,
- popover: step.popover ? {
- showButtons: false,
- ...step.popover!,
- } : undefined,
+ popover: step.popover
+ ? {
+ showButtons: false,
+ ...step.popover!,
+ }
+ : undefined,
});
},
destroy,
diff --git a/src/highlight.ts b/src/highlight.ts
index db33eb5..aececf6 100644
--- a/src/highlight.ts
+++ b/src/highlight.ts
@@ -72,6 +72,11 @@ function transferHighlight(toElement: Element, toStep: DriveStep) {
const highlightStartedHook = getConfig("onHighlightStarted");
const highlightedHook = getConfig("onHighlighted");
+ const deselectedHook = getConfig("onDeselected");
+
+ if (!isFirstHighlight && !isFromDummyElement && deselectedHook) {
+ deselectedHook(fromElement, fromStep!);
+ }
if (!isToDummyElement && highlightStartedHook) {
highlightStartedHook(toElement, toStep);