Fix state being persisted

index.html

@@ -253,7 +253,13 @@ npm install driver.js</pre
       import { driver } from "./src/driver.ts";
 
       document.getElementById("highlight-btn").addEventListener("click", () => {
-        driver({ animate: true }).highlight({ element: "h1" });
+        driver({ animate: true }).highlight({
+          element: "h2",
+          popover: {
+            title: "driver.js",
+            description: "A lightweight, no-dependency JavaScript engine to drive user's focus across the page",
+          },
+        });
       });
 
       document.getElementById("simple-highlight-btn").addEventListener("click", () => {
@@ -285,18 +291,39 @@ npm install driver.js</pre
       document.getElementById("transition-highlight-btn").addEventListener("click", () => {
         const driverObj = driver({ animate: true });
 
-        driverObj.highlight({ element: "h1" });
+        driverObj.highlight({
+          popover: {
+            title: "driver.js",
+            description: "Highlight anything, anywhere on the page",
+          },
+        });
 
         window.setTimeout(() => {
-          driverObj.highlight({ element: ".buttons button:first-child" });
+          driverObj.highlight({
+            element: ".buttons button:first-child",
+            popover: {
+              title: "driver.js",
+              description: "Highlight anything, anywhere on the page",
+            },
+          });
         }, 2000);
 
         window.setTimeout(() => {
-          driverObj.highlight({});
+          driverObj.highlight({
+            popover: {
+              title: "driver.js",
+              description: "Highlight anything, anywhere on the page",
+            },
+          });
         }, 4000);
 
         window.setTimeout(() => {
-          driverObj.highlight({ element: "h2" });
+          driverObj.highlight({
+            element: "h2",
+            popover: {
+              description: "driver.js",
+            },
+          });
         }, 6000);
       });
 
@@ -311,7 +338,7 @@ npm install driver.js</pre
           popover: {
             title: "driver.js",
             description: "Highlight anything, anywhere on the page",
-          }
+          },
         });
       });
 

src/driver.ts

@@ -6,7 +6,7 @@ import { destroyHighlight, highlight } from "./highlight";
 import { destroyEmitter, listen } from "./emitter";
 
 import "./style.css";
-import { getState, setState } from "./state";
+import { getState, resetState, setState } from "./state";
 
 export type DriveStep = {
   element?: string | Element;
@@ -39,8 +39,6 @@ export function driver(options: Config = {}) {
   }
 
   function destroy() {
-    setState("isInitialized", false);
-
     document.body.classList.remove("driver-active", "driver-fade", "driver-simple");
 
     destroyEvents();
@@ -48,6 +46,8 @@ export function driver(options: Config = {}) {
     destroyHighlight();
     destroyStage();
     destroyEmitter();
+
+    resetState();
   }
 
   return {

src/highlight.ts

@@ -31,23 +31,32 @@ export function highlight(step: DriveStep) {
   const { element } = step;
   let elemObj = typeof element === "string" ? document.querySelector(element) : element;
 
+  // If the element is not found, we mount a 1px div
+  // at the center of the screen to highlight and show
+  // the popover on top of that. This is to show a
+  // modal-like highlight.
   if (!elemObj) {
     elemObj = mountDummyElement();
   }
 
-  const previousHighlight = getState("activeHighlight");
+  // Keep track of the previous step so that we can
+  // animate the transition between the two steps.
+  setState("previousStep", getState("activeStep"));
+  setState("activeStep", step);
 
-  const transferHighlightFrom = previousHighlight || elemObj;
+  const transferHighlightFrom = getState("activeElement") || elemObj;
   const transferHighlightTo = elemObj;
 
-  transferHighlight(transferHighlightFrom, transferHighlightTo);
+  transferHighlight(transferHighlightFrom, transferHighlightTo, step);
 
-  setState("previousHighlight", transferHighlightFrom);
-  setState("activeHighlight", transferHighlightTo);
+  // Keep track of the previous element so that we can
+  // animate the transition between the two elements.
+  setState("previousElement", transferHighlightFrom);
+  setState("activeElement", transferHighlightTo);
 }
 
 export function refreshActiveHighlight() {
-  const activeHighlight = getState("activeHighlight");
+  const activeHighlight = getState("activeElement");
   if (!activeHighlight) {
     return;
   }
@@ -57,14 +66,28 @@ export function refreshActiveHighlight() {
   repositionPopover(activeHighlight);
 }
 
-function transferHighlight(from: Element, to: Element) {
+function transferHighlight(from: Element, to: Element, toStep: DriveStep) {
   const duration = 400;
   const start = Date.now();
 
+  const previousStep = getState("previousStep");
+
   // If it's the first time we're highlighting an element, we show
   // the popover immediately. Otherwise, we wait for the animation
   // to finish before showing the popover.
-  const hasDelayedPopover = !from || from !== to;
+  const isFirstHighlight = !from || from === to;
+  const hasNoPreviousPopover = previousStep && !previousStep.popover;
+  const isNextOrPrevDummyElement = to.id === "driver-dummy-element" || from.id === "driver-dummy-element";
+
+  const hasDelayedPopover = !isFirstHighlight && (hasNoPreviousPopover || isNextOrPrevDummyElement);
+
+  console.log("--------------------");
+  console.log("from", from);
+  console.log("to", to);
+  console.log("hasDelayedPopover", hasDelayedPopover);
+  console.log("isFirstHighlight", isFirstHighlight);
+  console.log("hasNoPreviousPopover", hasNoPreviousPopover);
+  console.log("isNextOrPrevDummyElement", isNextOrPrevDummyElement);
 
   hidePopover();
 
@@ -85,7 +108,7 @@ function transferHighlight(from: Element, to: Element) {
     } else {
       trackActiveElement(to);
 
-      if (hasDelayedPopover) {
+      if (hasDelayedPopover && toStep.popover) {
         renderPopover(to);
       }
 
@@ -99,7 +122,7 @@ function transferHighlight(from: Element, to: Element) {
   window.requestAnimationFrame(animate);
 
   bringInView(to);
-  if (!hasDelayedPopover) {
+  if (!hasDelayedPopover && toStep.popover) {
     renderPopover(to);
   }
 
@@ -108,13 +131,7 @@ function transferHighlight(from: Element, to: Element) {
 }
 
 export function destroyHighlight() {
-  setState("activeHighlight", undefined);
-  setState("previousHighlight", undefined);
-
-  setState("transitionCallback", undefined);
-
   document.getElementById("driver-dummy-element")?.remove();
-
   document.querySelectorAll(".driver-active-element").forEach(element => {
     element.classList.remove("driver-active-element");
   });

src/popover.ts

@@ -478,5 +478,4 @@ export function destroyPopover() {
   }
 
   popover.wrapper.parentElement?.removeChild(popover.wrapper);
-  setState("popover", undefined);
 }

src/stage.ts

@@ -174,8 +174,5 @@ export function destroyStage() {
   const stageSvg = getState("stageSvg");
   if (stageSvg) {
     stageSvg.remove();
-    setState("stageSvg", undefined);
   }
-
-  setState("activeStagePosition", undefined);
 }

src/state.ts

@@ -1,5 +1,6 @@
 import { StageDefinition } from "./stage";
 import { PopoverDOM } from "./popover";
+import { DriveStep } from "./driver";
 
 export type State = {
   // Whether driver is initialized or not
@@ -9,10 +10,13 @@ export type State = {
   resizeTimeout?: number;
 
   // Used while transitioning between stages
-  previousHighlight?: Element;
-  activeHighlight?: Element;
+  previousElement?: Element;
+  activeElement?: Element;
   transitionCallback?: () => void;
 
+  activeStep?: DriveStep;
+  previousStep?: DriveStep;
+
   activeStagePosition?: StageDefinition;
   stageSvg?: SVGSVGElement;
 
@@ -30,3 +34,7 @@ export function getState<K extends keyof State>(key: K): State[K];
 export function getState<K extends keyof State>(key?: K) {
   return key ? currentState[key] : currentState;
 }
+
+export function resetState() {
+  currentState = {};
+}