Add tour control using keyboard keys

index.html

@@ -370,6 +370,20 @@ npm install driver.js</pre
                 description: "You can now have popovers without elements as well",
               },
             },
+            {
+              element: "#scrollable-area",
+              popover: {
+                title: "Scrollable Areas",
+                description: "There are no issues with scrollable element tours as well."
+              }
+            },
+            {
+              element: "#third-scroll-paragraph",
+              popover: {
+                title: "Nested Scrolls",
+                description: "Even the nested scrollable elements work now."
+              }
+            }
           ],
         });
 

src/driver.ts

@@ -24,6 +24,34 @@ export function driver(options: Config = {}) {
     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;
@@ -36,6 +64,8 @@ export function driver(options: Config = {}) {
 
     listen("overlayClick", handleClose);
     listen("escapePress", handleClose);
+    listen("arrowLeftPress", handleArrowLeft);
+    listen("arrowRightPress", handleArrowRight);
   }
 
   function drive(stepIndex: number = 0) {
@@ -51,6 +81,8 @@ export function driver(options: Config = {}) {
       destroy();
     }
 
+    setState("currentStepIndex", stepIndex);
+
     const currentStep = steps[stepIndex];
     const hasNextStep = steps[stepIndex + 1];
     const hasPreviousStep = steps[stepIndex - 1];

src/emitter.ts

@@ -1,4 +1,11 @@
-type allowedEvents = "overlayClick" | "escapePress" | "nextClick" | "prevClick" | "closeClick";
+type allowedEvents =
+  | "overlayClick"
+  | "escapePress"
+  | "nextClick"
+  | "prevClick"
+  | "closeClick"
+  | "arrowRightPress"
+  | "arrowLeftPress";
 
 let registeredListeners: Partial<{ [key in allowedEvents]: () => void }> = {};
 

src/events.ts

@@ -20,6 +20,10 @@ function onKeyup(e: KeyboardEvent) {
 
   if (e.key === "Escape") {
     emit("escapePress");
+  } else if (e.key === "ArrowRight") {
+    emit("arrowRightPress");
+  } else if (e.key === "ArrowLeft") {
+    emit("arrowLeftPress");
   }
 }
 

src/state.ts

@@ -5,6 +5,8 @@ import { DriveStep } from "./driver";
 export type State = {
   // Whether driver is initialized or not
   isInitialized?: boolean;
+  // Index of the currently active step in driver tour
+  currentStepIndex?: number;
 
   // Used to bounce the resize event
   resizeTimeout?: number;