From 3a59e39fb051e0d0cac6faed7dcabc769320a907 Mon Sep 17 00:00:00 2001
From: Jeremy Likness <jeremy@jeremylikness.com>
Date: Sat, 23 Nov 2019 12:20:09 -0800
Subject: [PATCH] Add key press handler

---
 css/style.css    |  1 -
 index.html       |  1 +
 js/app.js        |  3 ++-
 js/keyhandler.js | 29 +++++++++++++++++++++++++++++
 4 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 js/keyhandler.js

diff --git a/css/style.css b/css/style.css
index d745669..6634f1f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -65,7 +65,6 @@ img {
 slide-deck div {
     height: 80vh;
     padding: 1em;
-    border: solid 2px lightgray;
 }
 
 @media only screen and (max-width: 960px) {
diff --git a/index.html b/index.html
index f7e1729..45761e0 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,7 @@
         <h1>DevNexus | Vanilla.js: Modern 1st Party JavaScript</h1>
         <h2>Setting things up ...</h2>
     </slide-deck>
+    <key-handler deck="main"></key-handler>
     <div class="footer left">
         <img src="./images/devnexus.png" alt="DevNexus logo" title="DevNexus logo" />
     </div>
diff --git a/js/app.js b/js/app.js
index fd70d89..80bd951 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,10 +1,11 @@
 import { registerDeck } from "./navigator.js"
 import { registerControls } from "./controls.js"
+import { registerKeyHandler } from "./keyhandler.js"
 
 const app = async () => {
-    
     registerDeck();
     registerControls();
+    registerKeyHandler();
 };
 
 document.addEventListener("DOMContentLoaded", app);
diff --git a/js/keyhandler.js b/js/keyhandler.js
new file mode 100644
index 0000000..4808326
--- /dev/null
+++ b/js/keyhandler.js
@@ -0,0 +1,29 @@
+class KeyHandler extends HTMLElement {
+
+    constructor() {
+        super();
+        this._deck = null;
+    }
+
+    static get observedAttributes() {
+        return ["deck"];
+    }
+
+    async attributeChangedCallback(attrName, oldVal, newVal) {
+        if (attrName === "deck") {
+            if (oldVal !== newVal) {
+                this._deck = document.getElementById(newVal);
+                this._deck.parentElement.addEventListener("keydown", key => {
+                    if (key.keyCode == 39 || key.keyCode == 32) {
+                        this._deck.next();
+                    }
+                    else if (key.keyCode == 37) {
+                        this._deck.previous();
+                    }
+                });
+            }
+        }
+    }
+}
+
+export const registerKeyHandler = () => customElements.define('key-handler', KeyHandler);
\ No newline at end of file