kamrify commited on
Commit
d656141
·
1 Parent(s): a688e23

Add on deselected hook

Browse files
Files changed (4) hide show
  1. index.html +15 -1
  2. src/config.ts +2 -0
  3. src/driver.ts +13 -4
  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({ animate: true });
 
 
 
 
 
 
 
 
 
 
 
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
- showButtons: false,
65
- ...step.popover!,
66
- } : undefined,
 
 
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);