File size: 2,012 Bytes
b8874fd
aa3b624
3833190
 
40c6a95
63b089b
66a740c
6770eb3
836d49f
aa3b624
 
 
8480986
aa3b624
 
66a740c
 
 
63b089b
 
 
 
 
d656141
 
 
 
eb375ea
d656141
 
63b089b
 
 
aa3b624
9bde4cc
4c98241
 
 
9bde4cc
 
aa3b624
 
3833190
63b089b
 
aa3b624
 
 
9bde4cc
aa3b624
 
b8874fd
aa3b624
 
63b089b
836d49f
 
aa3b624
 
 
ff5f16d
40c6a95
 
 
aa3b624
 
 
40c6a95
 
d656141
 
 
 
 
 
40c6a95
aa3b624
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import { destroyPopover, Popover } from "./popover";
import { destroyStage } from "./stage";
import { destroyEvents, initEvents } from "./events";
import { Config, configure, getConfig } from "./config";
import { destroyHighlight, highlight, refreshActiveHighlight } from "./highlight";
import { destroyEmitter, listen } from "./emitter";

import "./style.css";
import { getState, resetState, setState } from "./state";

export type DriveStep = {
  element?: string | Element;
  popover?: Popover;
};

export function driver(options: Config = {}) {
  configure(options);

  function handleClose() {
    if (!getConfig("allowClose")) {
      return;
    }

    const activeStep = getState("activeStep");
    const activeElement = getState("activeElement");
    const onDeselected = getConfig("onDeselected");
    if (activeStep && activeElement && onDeselected) {
      onDeselected(activeElement.id === "driver-dummy-element" ? undefined : activeElement, activeStep);
    }

    destroy();
  }

  function init() {
    if (getState("isInitialized")) {
      return;
    }

    setState("isInitialized", true);
    document.body.classList.add("driver-active", getConfig("animate") ? "driver-fade" : "driver-simple");

    initEvents();

    listen("overlayClick", handleClose);
    listen("escape", handleClose);
  }

  function destroy() {
    document.body.classList.remove("driver-active", "driver-fade", "driver-simple");

    destroyEvents();
    destroyPopover();
    destroyHighlight();
    destroyStage();
    destroyEmitter();

    resetState();
  }

  return {
    isActive: () => getState("isInitialized") || false,
    refresh: () => {
      refreshActiveHighlight();
    },
    drive: (steps: DriveStep[]) => console.log(steps),
    highlight: (step: DriveStep) => {
      init();
      highlight({
        ...step,
        popover: step.popover
          ? {
              showButtons: false,
              ...step.popover!,
            }
          : undefined,
      });
    },
    destroy,
  };
}