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 @@
DevNexus | Vanilla.js: Modern 1st Party JavaScript
Setting things up ...
+
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