Add configuration option

index.html

@@ -77,7 +77,7 @@
       <div class="buttons">
         <button id="highlight-btn">Simple Highlight</button>
         <button id="tour-btn">Start Tour</button>
-        <button id="highlight-destroy">Destroy after 2s</button>
+        <button id="destroy-btn">Destroy</button>
       </div>
 
       <ul>
@@ -90,24 +90,25 @@
     <script type="module">
       import { driver } from "./src/driver.ts";
 
-      const driverObj = driver();
+      const driverObj = driver({
+        animate: true,
+      });
 
       document.getElementById("highlight-btn").addEventListener("click", () => {
         driverObj.highlight({
           element: "h1",
         });
-      });
 
-      document
-        .getElementById("highlight-destroy")
-        .addEventListener("click", () => {
+        window.setTimeout(() => {
           driverObj.highlight({
-            element: "h1",
+            element: ".buttons",
           });
-          setTimeout(() => {
-            driverObj.destroy();
-          }, 2000);
-        });
+        }, 1000);
+      });
+
+      document.getElementById("destroy-btn").addEventListener("click", () => {
+        driverObj.destroy();
+      });
     </script>
   </body>
 </html>

src/config.ts

@@ -0,0 +1,18 @@
+export type Config = {
+  animate?: boolean;
+};
+
+let currentConfig: Config = {};
+
+export function configure(config: Config = {}) {
+  currentConfig = {
+    animate: true,
+    ...config,
+  };
+}
+
+export function getConfig(): Config;
+export function getConfig<K extends keyof Config>(key: K): Config[K];
+export function getConfig<K extends keyof Config>(key?: K) {
+  return key ? currentConfig[key] : currentConfig;
+}

src/driver.ts

@@ -1,21 +1,33 @@
 import { initEvents, destroyEvents } from "./events";
 import { destroyHighlight, highlight } from "./highlight";
 import { destroyStage } from "./stage";
+import { configure, Config, getConfig } from "./config";
+
 import "./style.css";
 
 export type DriveStep = {
   element?: string | Element;
 };
 
-export function driver() {
+export function driver(options: Config = {}) {
+  configure(options);
+
+  const shouldAnimate = getConfig("animate");
+
   function init() {
-    document.body.classList.add("driver-active", "driver-fade");
+    document.body.classList.add(
+      "driver-active",
+      shouldAnimate ? "driver-fade" : "driver-simple"
+    );
 
     initEvents();
   }
 
   function destroy() {
-    document.body.classList.remove("driver-active", "driver-fade");
+    document.body.classList.remove(
+      "driver-active",
+      shouldAnimate ? "driver-fade" : "driver-simple"
+    );
 
     destroyEvents();
     destroyHighlight();

src/events.ts

@@ -10,6 +10,59 @@ function onResize() {
   resizeTimeout = window.requestAnimationFrame(refreshActiveHighlight);
 }
 
+/**
+ * Attaches click handler to the elements created by driver.js. It makes
+ * sure to give the listener the first chance to handle the event, and
+ * prevents all other pointer-events to make sure no external-library
+ * ever knows the click happened.
+ *
+ * @param {Element} element Element to listen for click events
+ * @param {(pointer: MouseEvent | PointerEvent) => void} listener Click handler
+ * @param {(target: HTMLElement) => boolean} shouldPreventDefault Whether to prevent default action i.e. link clicks etc
+ */
+export function onDriverClick(
+  element: Element,
+  listener: (pointer: MouseEvent | PointerEvent) => void,
+  shouldPreventDefault?: (target: HTMLElement) => boolean
+) {
+  const listenerWrapper = (
+    e: MouseEvent | PointerEvent,
+    listener?: (pointer: MouseEvent | PointerEvent) => void
+  ) => {
+    const target = e.target as HTMLElement;
+    if (!element.contains(target)) {
+      return;
+    }
+
+    if (!shouldPreventDefault || shouldPreventDefault(target)) {
+      e.preventDefault();
+    }
+
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+
+    listener?.(e);
+  };
+
+  // We want to be the absolute first one to hear about the event
+  const useCapture = true;
+
+  // Events to disable
+  document.addEventListener("pointerdown", listenerWrapper, useCapture);
+  document.addEventListener("mousedown", listenerWrapper, useCapture);
+  document.addEventListener("pointerup", listenerWrapper, useCapture);
+  document.addEventListener("mouseup", listenerWrapper, useCapture);
+
+  // Actual click handler
+  document.addEventListener(
+    "click",
+    e => {
+      listenerWrapper(e, listener);
+    },
+    useCapture
+  );
+}
+
 export function initEvents() {
   window.addEventListener("resize", onResize);
 }

src/highlight.ts

@@ -1,5 +1,6 @@
 import { DriveStep } from "./driver";
 import { refreshStage, trackActiveElement, transitionStage } from "./stage";
+import { getConfig } from "./config";
 
 let previousHighlight: Element | undefined;
 let activeHighlight: Element | undefined;
@@ -32,6 +33,7 @@ export function refreshActiveHighlight() {
 function transferHighlight(from: Element, to: Element) {
   const duration = 400;
   const start = Date.now();
+
   isTransitioning = true;
 
   const animate = () => {
@@ -41,7 +43,7 @@ function transferHighlight(from: Element, to: Element) {
 
     const elapsed = Date.now() - start;
 
-    if (elapsed < duration) {
+    if (getConfig("animate") && elapsed < duration) {
       transitionStage(elapsed, duration, from, to);
     } else {
       trackActiveElement(to);

src/stage.ts

@@ -1,4 +1,5 @@
 import { easeInOutQuad } from "./math";
+import { onDriverClick } from "./events";
 
 export type StageDefinition = {
   x: number;
@@ -95,10 +96,24 @@ export function refreshStage() {
   stageSvg.setAttribute("viewBox", `0 0 ${windowX} ${windowY}`);
 }
 
+function mountStage(stagePosition: StageDefinition) {
+  stageSvg = createStageSvg(stagePosition);
+
+  document.body.appendChild(stageSvg);
+
+  onDriverClick(stageSvg, e => {
+    const target = e.target as SVGElement;
+    if (target.tagName !== "path") {
+      return;
+    }
+
+    console.log("Overlay clicked");
+  });
+}
+
 function renderStage(stagePosition: StageDefinition) {
   if (!stageSvg) {
-    stageSvg = createStageSvg(stagePosition);
-    document.body.appendChild(stageSvg);
+    mountStage(stagePosition);
 
     return;
   }

src/style.css

@@ -9,7 +9,6 @@
 .driver-active .driver-active-element,
 .driver-active .driver-active-element * {
   pointer-events: auto;
-  cursor: auto;
 }
 
 @keyframes animate-fade-in {