Add support for listening to events

index.html

@@ -161,7 +161,7 @@
       <br />
       <p>You can Attach events to buttons.</p>
       <div class="buttons">
-        <button id="button-config-events">Global Button Listeners</button>
+        <button id="button-config-events">Button Listeners</button>
       </div>
 
       <ul>
@@ -395,6 +395,25 @@ npm install driver.js</pre
         });
       });
 
+      document.getElementById("button-config-events").addEventListener("click", () => {
+        const driverObj = driver({
+          onNextClick: () => alert("Next Clicked"),
+          onPrevClick: () => alert("Previous Clicked"),
+          onCloseClick: () => {
+            driverObj.destroy();
+          },
+        });
+
+        driverObj.highlight({
+          popover: {
+            title: "Global Button Listener",
+            description: "You can listen to the button clicks globally.",
+            showButtons: ["close", "next", "previous"],
+            onPrevClick: () => alert("Overriding — Previous Clicked"),
+          },
+        });
+      });
+
       document.getElementById("is-active-btn").addEventListener("click", () => {
         alert(driver().isActive());
       });

src/config.ts

@@ -26,7 +26,7 @@ export type Config = {
 
   // Event based callbacks, called upon events
   onNextClick?: (element: Element | undefined, step: DriveStep) => void;
-  onPreviousClick?: (element: Element | undefined, step: DriveStep) => void;
+  onPrevClick?: (element: Element | undefined, step: DriveStep) => void;
   onCloseClick?: (element: Element | undefined, step: DriveStep) => void;
 };
 

src/driver.ts

@@ -42,7 +42,7 @@ export function driver(options: Config = {}) {
     initEvents();
 
     listen("overlayClick", handleClose);
-    listen("escape", handleClose);
+    listen("escapePress", handleClose);
   }
 
   function destroy() {
@@ -74,7 +74,6 @@ export function driver(options: Config = {}) {
     },
     drive: (steps: DriveStep[]) => console.log(steps),
     highlight: (step: DriveStep) => {
-      console.log(step.popover?.showButtons);
       init();
       highlight({
         ...step,

src/emitter.ts

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

src/events.ts

@@ -13,7 +13,7 @@ export function requireRefresh() {
 
 function onKeyup(e: KeyboardEvent) {
   if (e.key === "Escape") {
-    emit("escape");
+    emit("escapePress");
   }
 }
 

src/popover.ts

@@ -2,6 +2,8 @@ import { bringInView } from "./utils";
 import { getConfig } from "./config";
 import { getState, setState } from "./state";
 import { DriveStep } from "./driver";
+import { onDriverClick } from "./events";
+import { emit } from "./emitter";
 
 export type Side = "top" | "right" | "bottom" | "left" | "over";
 export type Alignment = "start" | "center" | "end";
@@ -15,10 +17,16 @@ export type Popover = {
 
   showButtons?: AllowedButtons[];
 
+  // Button texts
   doneBtnText?: string;
   closeBtnText?: string;
   nextBtnText?: string;
   prevBtnText?: string;
+
+  // Button callbacks
+  onNextClick?: (element: Element | undefined, step: DriveStep) => void;
+  onPrevClick?: (element: Element | undefined, step: DriveStep) => void;
+  onCloseClick?: (element: Element | undefined, step: DriveStep) => void;
 };
 
 export type PopoverDOM = {
@@ -80,7 +88,6 @@ export function renderPopover(element: Element, step: DriveStep) {
   const showButtonsConfig: AllowedButtons[] =
     popoverShowButtons !== undefined ? popoverShowButtons : getConfig("showButtons")!;
 
-  console.log(popoverShowButtons);
   if (showButtonsConfig?.length! > 0) {
     popover.footer.style.display = "flex";
 
@@ -111,6 +118,51 @@ export function renderPopover(element: Element, step: DriveStep) {
   const popoverArrow = popover.arrow;
   popoverArrow.className = "driver-popover-arrow";
 
+  // Handles the popover button clicks
+  onDriverClick(
+    popover.wrapper,
+    e => {
+      const target = e.target as HTMLElement;
+
+      const onNextClick = step.popover?.onNextClick || getConfig("onNextClick");
+      const onPrevClick = step.popover?.onPrevClick || getConfig("onPrevClick");
+      const onCloseClick = step.popover?.onCloseClick || getConfig("onCloseClick");
+
+      if (target.classList.contains("driver-popover-next-btn")) {
+        // If the user has provided a custom callback, call it
+        // otherwise, emit the event.
+        if (onNextClick) {
+          return onNextClick(element, step);
+        } else {
+          return emit("nextClick");
+        }
+      }
+
+      if (target.classList.contains("driver-popover-prev-btn")) {
+        if (onPrevClick) {
+          return onPrevClick(element, step);
+        } else {
+          return emit("prevClick");
+        }
+      }
+
+      if (target.classList.contains("driver-popover-close-btn")) {
+        if (onCloseClick) {
+          return onCloseClick(element, step);
+        } else {
+          return emit("closeClick");
+        }
+      }
+
+      return undefined;
+    },
+    target => {
+      // Only prevent the default action if we're clicking on a button
+      // This allows us to have links inside the popover title and description
+      return !popover?.description.contains(target) && !popover?.title.contains(target);
+    }
+  );
+
   setState("popover", popover);
 
   repositionPopover(element, step);

src/style.css

@@ -97,6 +97,10 @@
   border-radius: 3px;
 }
 
+.driver-popover-footer button:hover {
+  background-color: #f7f7f7;
+}
+
 .driver-popover-navigation-btns {
   display: flex;
   flex-grow: 1;