Fix animation issue with scrollable elements

docs/package.json

@@ -17,7 +17,7 @@
     "@types/react-dom": "^18.2.6",
     "astro": "^2.7.4",
     "astro-compress": "^1.1.49",
-    "driver.js": "1.1.0",
+    "driver.js": "1.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-fast-marquee": "^1.6.0",

docs/pnpm-lock.yaml

@@ -27,8 +27,8 @@ dependencies:
     specifier: ^1.1.49
     version: 1.1.49
   driver.js:
-    specifier: 1.1.0
-    version: 1.1.0
+    specifier: 1.2.0
+    version: 1.2.0
   react:
     specifier: ^18.2.0
     version: 18.2.0
@@ -1576,8 +1576,8 @@ packages:
       tslib: 2.6.0
     dev: false
 
-  /driver.js@1.1.0:
-    resolution: {integrity: sha512-jvor5wrzu0JmHwPAuCb7j8YzHcgitq5ibgCsgBO85fv0Zst/UPdO60/hKooCKMdQMYRPKABmSDhVSftS6NaJqA==}
+  /driver.js@1.2.0:
+    resolution: {integrity: sha512-kn9YCQqvMZovs82pYhEl7IKdvv5MmZ6R/OXy5aI7L0qCBK2ynRfm6oQ47pNSdOW731QtT5vySKwz8Nk5ai3LXw==}
     dev: false
 
   /[email protected]:

docs/src/content/guides/configuration.mdx

@@ -41,6 +41,9 @@ type Config = {
   // Whether to allow keyboard navigation. (default: true)
   allowKeyboardControl?: boolean;
 
+  // Whether to disable interaction with the highlighted element. (default: false)
+  disableActiveInteraction?: boolean;
+
   // If you want to add custom class to the popover
   popoverClass?: string;
   // Distance between the popover and the highlighted element. (default: 10)

index.html

@@ -471,11 +471,12 @@ npm install driver.js</pre
             popover.title.innerHTML = `${driverObj.getActiveIndex()} ${driverObj.hasNextStep() ? 'Yes' : 'No'} ${driverObj.hasPreviousStep() ? 'Yes' : 'No'}`
             popover.description.innerHTML = `${driverObj.isFirstStep() ? 'Yes' : 'No'} ${driverObj.isLastStep() ? 'Yes' : 'No'}`
 
+            console.log(driverObj.getActiveIndex());
             console.log(driverObj.getActiveStep());
           }
         });
 
-        driverObj.drive();
+        driverObj.drive(4);
       });
 
       document.getElementById("reconfigure-steps").addEventListener("click", () => {

src/driver.ts

@@ -73,8 +73,8 @@ export function driver(options: Config = {}) {
     }
 
     const activeIndex = getState("activeIndex");
-    const activeStep = getState("activeStep");
-    const activeElement = getState("activeElement");
+    const activeStep = getState("__activeStep");
+    const activeElement = getState("__activeElement");
     if (typeof activeIndex === "undefined" || typeof activeStep === "undefined") {
       return;
     }
@@ -102,8 +102,8 @@ export function driver(options: Config = {}) {
     }
 
     const activeIndex = getState("activeIndex");
-    const activeStep = getState("activeStep");
-    const activeElement = getState("activeElement");
+    const activeStep = getState("__activeStep");
+    const activeElement = getState("__activeElement");
     if (typeof activeIndex === "undefined" || typeof activeStep === "undefined") {
       return;
     }
@@ -213,8 +213,8 @@ export function driver(options: Config = {}) {
   }
 
   function destroy(withOnDestroyStartedHook = true) {
-    const activeElement = getState("activeElement");
-    const activeStep = getState("activeStep");
+    const activeElement = getState("__activeElement");
+    const activeStep = getState("__activeStep");
 
     const activeOnDestroyed = getState("__activeOnDestroyed");
 
@@ -330,4 +330,4 @@ export function driver(options: Config = {}) {
   };
 }
 
-export type Driver = ReturnType<typeof driver>
+export type Driver = ReturnType<typeof driver>;

src/events.ts

@@ -24,7 +24,7 @@ function trapFocus(e: KeyboardEvent) {
     return;
   }
 
-  const activeElement = getState("activeElement");
+  const activeElement = getState("__activeElement");
   const popoverEl = getState("popover")?.wrapper;
 
   const focusableEls = getFocusableElements([

src/highlight.ts

@@ -43,8 +43,8 @@ export function highlight(step: DriveStep) {
 }
 
 export function refreshActiveHighlight() {
-  const activeHighlight = getState("activeElement");
-  const activeStep = getState("activeStep")!;
+  const activeHighlight = getState("__activeElement");
+  const activeStep = getState("__activeStep")!;
 
   if (!activeHighlight) {
     return;
@@ -55,12 +55,13 @@ export function refreshActiveHighlight() {
   repositionPopover(activeHighlight, activeStep);
 }
 
+
 function transferHighlight(toElement: Element, toStep: DriveStep) {
   const duration = 400;
   const start = Date.now();
 
-  const fromStep = getState("activeStep");
-  const fromElement = getState("activeElement") || toElement;
+  const fromStep = getState("__activeStep");
+  const fromElement = getState("__activeElement") || toElement;
 
   // If it's the first time we're highlighting an element, we show
   // the popover immediately. Otherwise, we wait for the animation
@@ -96,6 +97,11 @@ function transferHighlight(toElement: Element, toStep: DriveStep) {
 
   hidePopover();
 
+  setState("previousStep", fromStep);
+  setState("previousElement", fromElement);
+  setState("activeStep", toStep);
+  setState("activeElement", toElement);
+
   const animate = () => {
     const transitionCallback = getState("__transitionCallback");
 
@@ -128,16 +134,16 @@ function transferHighlight(toElement: Element, toStep: DriveStep) {
       }
 
       setState("__transitionCallback", undefined);
+      setState("__previousStep", fromStep);
+      setState("__previousElement", fromElement);
+      setState("__activeStep", toStep);
+      setState("__activeElement", toElement);
     }
 
     window.requestAnimationFrame(animate);
   };
 
   setState("__transitionCallback", animate);
-  setState("previousStep", fromStep);
-  setState("previousElement", fromElement);
-  setState("activeStep", toStep);
-  setState("activeElement", toElement);
 
   window.requestAnimationFrame(animate);
 

src/state.ts

@@ -8,12 +8,19 @@ export type State = {
   activeIndex?: number;
   activeElement?: Element;
   activeStep?: DriveStep;
-
   previousElement?: Element;
   previousStep?: DriveStep;
 
   popover?: PopoverDOM;
 
+  // actual values considering the animation
+  // and delays. These are used to determine
+  // the positions etc.
+  __previousElement?: Element;
+  __activeElement?: Element;
+  __previousStep?: DriveStep;
+  __activeStep?: DriveStep;
+
   __activeOnDestroyed?: Element;
   __resizeTimeout?: number;
   __transitionCallback?: () => void;