Merge pull request #18 from OneBusAway/escape

Closes the StopPane when the Escape key is pressed on the keyboard

src/components/oba/StopPane.svelte

@@ -2,6 +2,7 @@
 	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
 	import { faX } from '@fortawesome/free-solid-svg-icons';
 	import { createEventDispatcher } from 'svelte';
+	import { keybinding } from '$lib/keybinding';
 	import ArrivalDeparture from '../ArrivalDeparture.svelte';
 
 	export let stop;
@@ -71,7 +72,7 @@
 					<h1 class="text-lg text-white">Routes: {stop.name}</h1>
 				</div>
 				<div class="absolute -right-4 -top-6">
-					<button type="button" on:click={closePane}>
+					<button type="button" on:click={closePane} use:keybinding={{ code: 'Escape' }}>
 						<FontAwesomeIcon icon={faX} class="text-black dark:text-white" />
 						<span class="sr-only">Close</span>
 					</button>

src/lib/keybinding.js

@@ -0,0 +1,40 @@
+/**
+ * Create a keybinding for an HTML element.
+ * @example
+ *  <button use:keybinding={{code: 'Escape'}} on:click={yourEventHere}>
+ *    Triggers a click on the button when the Escape key is pressed.
+ *  </button>
+ * @param {HTMLElement} node The HTML element to bind to.
+ * @param {Object} params The keybinding parameters. See the example above.
+ * @returns {Object} An object with the update and destroy methods.
+ */
+export const keybinding = (node, params) => {
+	let handler;
+	const removeHandler = () => window.removeEventListener('keydown', handler);
+	const setHandler = () => {
+		removeHandler();
+		if (!params) {
+			return;
+		}
+
+		handler = (e) => {
+			if (
+				!!params.alt != e.altKey ||
+				!!params.shift != e.shiftKey ||
+				!!params.control != (e.ctrlKey || e.metaKey) ||
+				params.code != e.code
+			)
+				return;
+			e.preventDefault();
+			params.callback ? params.callback() : node.click();
+		};
+		window.addEventListener('keydown', handler);
+	};
+
+	setHandler();
+
+	return {
+		update: setHandler,
+		destroy: removeHandler
+	};
+};