File size: 2,111 Bytes
aa3b624 66a740c f86a242 82a88c5 aa3b624 4c98241 aa3b624 66a740c aa3b624 4c98241 aa3b624 66a740c aa3b624 8480986 4c98241 aa3b624 b8874fd aa3b624 4c98241 aa3b624 82a88c5 b8874fd 82a88c5 aa3b624 4c98241 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 |
import { DriveStep } from "./driver";
import { refreshStage, trackActiveElement, transitionStage } from "./stage";
import { getConfig } from "./config";
import { repositionPopover, renderPopover } from "./popover";
import { bringInView } from "./utils";
let previousHighlight: Element | undefined;
let activeHighlight: Element | undefined;
let currentTransitionCallback: undefined | (() => void);
export function highlight(step: DriveStep) {
const { element } = step;
const elemObj =
typeof element === "string" ? document.querySelector(element) : element;
if (!elemObj) {
return;
}
previousHighlight = activeHighlight;
activeHighlight = elemObj;
transferHighlight(previousHighlight || elemObj, elemObj);
}
export function refreshActiveHighlight() {
if (!activeHighlight) {
return;
}
trackActiveElement(activeHighlight);
refreshStage();
}
function transferHighlight(from: Element, to: Element) {
const duration = 400;
const start = Date.now();
const animate = () => {
// This makes sure that the repeated calls to transferHighlight
// don't interfere with each other. Only the last call will be
// executed.
if (currentTransitionCallback !== animate) {
return;
}
const elapsed = Date.now() - start;
if (getConfig("animate") && elapsed < duration) {
transitionStage(elapsed, duration, from, to);
} else {
trackActiveElement(to);
currentTransitionCallback = undefined;
}
// refreshStage();
// refreshPopover();
window.requestAnimationFrame(animate);
};
currentTransitionCallback = animate;
window.requestAnimationFrame(animate);
bringInView(to);
renderPopover(to);
from.classList.remove("driver-active-element");
to.classList.add("driver-active-element");
}
export function destroyHighlight() {
activeHighlight = undefined;
currentTransitionCallback = undefined;
previousHighlight = undefined;
activeHighlight = undefined;
document.querySelectorAll(".driver-active-element").forEach(element => {
element.classList.remove("driver-active-element");
});
}
|