Add on deselected hook
Browse files- index.html +15 -1
- src/config.ts +2 -0
- src/driver.ts +13 -4
- src/highlight.ts +5 -0
index.html
CHANGED
@@ -314,6 +314,9 @@ npm install driver.js</pre
|
|
314 |
animate: true,
|
315 |
popoverOffset: 10,
|
316 |
stagePadding: 10,
|
|
|
|
|
|
|
317 |
onHighlightStarted: (element, step) => {
|
318 |
console.log("Started highlighting element", element, step);
|
319 |
},
|
@@ -359,7 +362,18 @@ npm install driver.js</pre
|
|
359 |
});
|
360 |
|
361 |
document.getElementById("transition-highlight-btn").addEventListener("click", () => {
|
362 |
-
const driverObj = driver({
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
363 |
|
364 |
driverObj.highlight({
|
365 |
popover: {
|
|
|
314 |
animate: true,
|
315 |
popoverOffset: 10,
|
316 |
stagePadding: 10,
|
317 |
+
onDeselected: (element, step) => {
|
318 |
+
console.log("Deselected element", element, step);
|
319 |
+
},
|
320 |
onHighlightStarted: (element, step) => {
|
321 |
console.log("Started highlighting element", element, step);
|
322 |
},
|
|
|
362 |
});
|
363 |
|
364 |
document.getElementById("transition-highlight-btn").addEventListener("click", () => {
|
365 |
+
const driverObj = driver({
|
366 |
+
animate: true,
|
367 |
+
onDeselected: (element, step) => {
|
368 |
+
console.log("Deselected element", element, step);
|
369 |
+
},
|
370 |
+
onHighlightStarted: (element, step) => {
|
371 |
+
console.log("Started highlighting element", element, step);
|
372 |
+
},
|
373 |
+
onHighlighted: (element, step) => {
|
374 |
+
console.log("Highlighted element", element, step);
|
375 |
+
},
|
376 |
+
});
|
377 |
|
378 |
driverObj.highlight({
|
379 |
popover: {
|
src/config.ts
CHANGED
@@ -13,6 +13,8 @@ export type Config = {
|
|
13 |
|
14 |
onHighlightStarted?: (element: Element, step: DriveStep) => void;
|
15 |
onHighlighted?: (element: Element, step: DriveStep) => void;
|
|
|
|
|
16 |
};
|
17 |
|
18 |
let currentConfig: Config = {};
|
|
|
13 |
|
14 |
onHighlightStarted?: (element: Element, step: DriveStep) => void;
|
15 |
onHighlighted?: (element: Element, step: DriveStep) => void;
|
16 |
+
|
17 |
+
onDeselected?: (element: Element, step: DriveStep) => void;
|
18 |
};
|
19 |
|
20 |
let currentConfig: Config = {};
|
src/driver.ts
CHANGED
@@ -21,6 +21,13 @@ export function driver(options: Config = {}) {
|
|
21 |
return;
|
22 |
}
|
23 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
24 |
destroy();
|
25 |
}
|
26 |
|
@@ -60,10 +67,12 @@ export function driver(options: Config = {}) {
|
|
60 |
init();
|
61 |
highlight({
|
62 |
...step,
|
63 |
-
popover: step.popover
|
64 |
-
|
65 |
-
|
66 |
-
|
|
|
|
|
67 |
});
|
68 |
},
|
69 |
destroy,
|
|
|
21 |
return;
|
22 |
}
|
23 |
|
24 |
+
const activeStep = getState("activeStep");
|
25 |
+
const activeElement = getState("activeElement");
|
26 |
+
const onDeselected = getConfig("onDeselected");
|
27 |
+
if (activeStep && activeElement && onDeselected) {
|
28 |
+
onDeselected(activeElement, activeStep);
|
29 |
+
}
|
30 |
+
|
31 |
destroy();
|
32 |
}
|
33 |
|
|
|
67 |
init();
|
68 |
highlight({
|
69 |
...step,
|
70 |
+
popover: step.popover
|
71 |
+
? {
|
72 |
+
showButtons: false,
|
73 |
+
...step.popover!,
|
74 |
+
}
|
75 |
+
: undefined,
|
76 |
});
|
77 |
},
|
78 |
destroy,
|
src/highlight.ts
CHANGED
@@ -72,6 +72,11 @@ function transferHighlight(toElement: Element, toStep: DriveStep) {
|
|
72 |
|
73 |
const highlightStartedHook = getConfig("onHighlightStarted");
|
74 |
const highlightedHook = getConfig("onHighlighted");
|
|
|
|
|
|
|
|
|
|
|
75 |
|
76 |
if (!isToDummyElement && highlightStartedHook) {
|
77 |
highlightStartedHook(toElement, toStep);
|
|
|
72 |
|
73 |
const highlightStartedHook = getConfig("onHighlightStarted");
|
74 |
const highlightedHook = getConfig("onHighlighted");
|
75 |
+
const deselectedHook = getConfig("onDeselected");
|
76 |
+
|
77 |
+
if (!isFirstHighlight && !isFromDummyElement && deselectedHook) {
|
78 |
+
deselectedHook(fromElement, fromStep!);
|
79 |
+
}
|
80 |
|
81 |
if (!isToDummyElement && highlightStartedHook) {
|
82 |
highlightStartedHook(toElement, toStep);
|