diff --git a/index.html b/index.html
index eebb746..9c6d7ef 100644
--- a/index.html
+++ b/index.html
@@ -419,6 +419,15 @@ npm install driver.js {
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 c60c6c4..5d41e12 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -11,10 +11,10 @@ export type Config = {
popoverOffset?: number;
showButtons?: boolean;
- onHighlightStarted?: (element: Element, step: DriveStep) => void;
- onHighlighted?: (element: Element, step: DriveStep) => void;
+ onHighlightStarted?: (element: Element | undefined, step: DriveStep) => void;
+ onHighlighted?: (element: Element | undefined, step: DriveStep) => void;
- onDeselected?: (element: Element, step: DriveStep) => void;
+ onDeselected?: (element: Element | undefined, step: DriveStep) => void;
};
let currentConfig: Config = {};
diff --git a/src/driver.ts b/src/driver.ts
index cbd33d1..a788020 100644
--- a/src/driver.ts
+++ b/src/driver.ts
@@ -25,7 +25,7 @@ export function driver(options: Config = {}) {
const activeElement = getState("activeElement");
const onDeselected = getConfig("onDeselected");
if (activeStep && activeElement && onDeselected) {
- onDeselected(activeElement, activeStep);
+ onDeselected(activeElement.id === "driver-dummy-element" ? undefined : activeElement, activeStep);
}
destroy();
diff --git a/src/highlight.ts b/src/highlight.ts
index aececf6..ad12deb 100644
--- a/src/highlight.ts
+++ b/src/highlight.ts
@@ -74,12 +74,12 @@ function transferHighlight(toElement: Element, toStep: DriveStep) {
const highlightedHook = getConfig("onHighlighted");
const deselectedHook = getConfig("onDeselected");
- if (!isFirstHighlight && !isFromDummyElement && deselectedHook) {
- deselectedHook(fromElement, fromStep!);
+ if (!isFirstHighlight && deselectedHook) {
+ deselectedHook(isFromDummyElement ? undefined : fromElement, fromStep!);
}
- if (!isToDummyElement && highlightStartedHook) {
- highlightStartedHook(toElement, toStep);
+ if (highlightStartedHook) {
+ highlightStartedHook(isToDummyElement ? undefined : toElement, toStep);
}
const hasDelayedPopover = !isFirstHighlight && (hasNoPreviousPopover || isFromDummyElement || isToDummyElement);
@@ -111,8 +111,8 @@ function transferHighlight(toElement: Element, toStep: DriveStep) {
} else {
trackActiveElement(toElement);
- if (!isToDummyElement && highlightedHook) {
- highlightedHook(toElement, toStep);
+ if (highlightedHook) {
+ highlightedHook(isToDummyElement ? undefined : toElement, toStep);
}
setState("transitionCallback", undefined);