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);