Refactor hooks

src/driver.ts

@@ -3,7 +3,7 @@ import { destroyStage } from "./stage";
 import { destroyEvents, initEvents } from "./events";
 import { Config, configure, getConfig } from "./config";
 import { destroyHighlight, highlight } from "./highlight";
-import { destroyHooks, register } from "./hooks";
+import { destroyEmitter, listen } from "./emitter";
 
 import "./style.css";
 
@@ -17,6 +17,14 @@ let isInitialized = false;
 export function driver(options: Config = {}) {
   configure(options);
 
+  function handleClose() {
+    if (!getConfig("allowClose")) {
+      return;
+    }
+
+    destroy();
+  }
+
   function init() {
     // Avoid multiple initialization
     if (isInitialized) {
@@ -32,13 +40,8 @@ export function driver(options: Config = {}) {
     initEvents();
 
     // Register hooks
-    register("overlayClick", () => {
-      if (!getConfig("allowClose")) {
-        return;
-      }
-
-      destroy();
-    });
+    listen("overlayClick", handleClose);
+    listen("escape", handleClose);
   }
 
   function destroy() {
@@ -51,7 +54,7 @@ export function driver(options: Config = {}) {
     destroyEvents();
     destroyHighlight();
     destroyStage();
-    destroyHooks();
+    destroyEmitter();
   }
 
   return {

src/emitter.ts

@@ -0,0 +1,15 @@
+type allowedEvents = "overlayClick" | "escape";
+
+let registeredListeners: Partial<{ [key in allowedEvents]: () => void }> = {};
+
+export function listen(hook: allowedEvents, callback: () => void) {
+  registeredListeners[hook] = callback;
+}
+
+export function emit(hook: allowedEvents) {
+  registeredListeners[hook]?.();
+}
+
+export function destroyEmitter() {
+  registeredListeners = {};
+}

src/events.ts

@@ -1,4 +1,5 @@
 import { refreshActiveHighlight } from "./highlight";
+import { emit } from "./emitter";
 
 let resizeTimeout: number;
 
@@ -10,6 +11,12 @@ function requireRefresh() {
   resizeTimeout = window.requestAnimationFrame(refreshActiveHighlight);
 }
 
+function onKeyup(e: KeyboardEvent) {
+  if (e.key === "Escape") {
+    emit("escape");
+  }
+}
+
 /**
  * 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
@@ -64,6 +71,7 @@ export function onDriverClick(
 }
 
 export function initEvents() {
+  window.addEventListener("keyup", onKeyup, false);
   window.addEventListener("resize", requireRefresh);
   window.addEventListener("scroll", requireRefresh);
 }

src/hooks.ts

@@ -1,15 +0,0 @@
-type allowedHooks = "overlayClick";
-
-let registeredHooks: Partial<{ [key in allowedHooks]: () => void }> = {};
-
-export function register(hook: allowedHooks, callback: () => void) {
-  registeredHooks[hook] = callback;
-}
-
-export function trigger(hook: allowedHooks) {
-  registeredHooks[hook]?.();
-}
-
-export function destroyHooks() {
-  registeredHooks = {};
-}

src/stage.ts

@@ -1,6 +1,6 @@
 import { easeInOutQuad } from "./utils";
 import { onDriverClick } from "./events";
-import { trigger } from "./hooks";
+import { emit } from "./emitter";
 import { getConfig } from "./config";
 
 export type StageDefinition = {
@@ -108,7 +108,7 @@ function mountStage(stagePosition: StageDefinition) {
       return;
     }
 
-    trigger("overlayClick");
+    emit("overlayClick");
   });
 }