File size: 4,271 Bytes
6aa2828 aa3b624 7fbff02 3833190 7fbff02 63b089b 66a740c 6770eb3 836d49f aa3b624 8480986 aa3b624 66a740c 63b089b aafd6df aa3b624 9bde4cc 4c98241 9bde4cc aa3b624 3833190 63b089b d0e0b03 aafd6df aa3b624 6aa2828 aafd6df 6aa2828 aa3b624 215369d c7a3398 9bde4cc aa3b624 b8874fd aa3b624 63b089b 836d49f 215369d c7a3398 215369d c7a3398 215369d c7a3398 215369d aa3b624 ff5f16d 40c6a95 7fbff02 40c6a95 6aa2828 aa3b624 40c6a95 d656141 fe7906f 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 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 |
import { AllowedButtons, destroyPopover, Popover } from "./popover";
import { destroyStage } from "./stage";
import { destroyEvents, initEvents, requireRefresh } from "./events";
import { Config, configure, getConfig } from "./config";
import { destroyHighlight, highlight } 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;
}
destroy();
}
function handleArrowLeft() {
const steps = getConfig("steps") || [];
const currentStepIndex = getState("currentStepIndex");
if (typeof currentStepIndex === "undefined") {
return;
}
const previousStepIndex = currentStepIndex - 1;
if (steps[previousStepIndex]) {
drive(previousStepIndex);
}
}
function handleArrowRight() {
const steps = getConfig("steps") || [];
const currentStepIndex = getState("currentStepIndex");
if (typeof currentStepIndex === "undefined") {
return;
}
const nextStepIndex = currentStepIndex + 1;
if (steps[nextStepIndex]) {
drive(nextStepIndex);
} else {
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("escapePress", handleClose);
listen("arrowLeftPress", handleArrowLeft);
listen("arrowRightPress", handleArrowRight);
}
function drive(stepIndex: number = 0) {
const steps = getConfig("steps");
if (!steps) {
console.error("No steps to drive through");
destroy();
return;
}
if (!steps[stepIndex]) {
console.warn(`Step not found at index: ${stepIndex}`);
destroy();
}
setState("currentStepIndex", stepIndex);
const currentStep = steps[stepIndex];
const hasNextStep = steps[stepIndex + 1];
const hasPreviousStep = steps[stepIndex - 1];
const doneBtnText = currentStep.popover?.doneBtnText || getConfig("doneBtnText") || "Done";
highlight({
...currentStep,
popover: {
showButtons: ["next", "previous", "close"],
nextBtnText: !hasNextStep ? doneBtnText : undefined,
disableButtons: [...(!hasPreviousStep ? ["previous" as AllowedButtons] : [])],
onNextClick: () => {
if (!hasNextStep) {
destroy();
} else {
drive(stepIndex + 1);
}
},
onPrevClick: () => {
drive(stepIndex - 1);
},
onCloseClick: () => {
destroy();
},
...(currentStep?.popover || {}),
},
});
}
function destroy() {
const activeElement = getState("activeElement");
const activeStep = getState("activeStep");
const onDeselected = getConfig("onDeselected");
const onDestroyed = getConfig("onDestroyed");
document.body.classList.remove("driver-active", "driver-fade", "driver-simple");
destroyEvents();
destroyPopover();
destroyHighlight();
destroyStage();
destroyEmitter();
resetState();
if (activeElement && activeStep) {
const isActiveDummyElement = activeElement.id === "driver-dummy-element";
if (onDeselected) {
onDeselected(isActiveDummyElement ? undefined : activeElement, activeStep);
}
if (onDestroyed) {
onDestroyed(isActiveDummyElement ? undefined : activeElement, activeStep);
}
}
}
return {
isActive: () => getState("isInitialized") || false,
refresh: () => {
requireRefresh();
},
drive: (stepIndex: number = 0) => {
init();
drive(stepIndex);
},
highlight: (step: DriveStep) => {
init();
highlight({
...step,
popover: step.popover
? {
showButtons: [],
...step.popover!,
}
: undefined,
});
},
destroy,
};
}
|