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