WIP: Feat/keyboard navigation

src/constants/keyboard-mapping.js

@@ -0,0 +1,13 @@
+const keyboardMappings = {
+  ArrowLeft: 'navigateLeft',
+  ArrowRight: 'navigateRight',
+  ArrowUp: 'navigateUp',
+  ArrowDown: 'navigateDown',
+  BracketRight: 'zoomIn',
+  Slash: 'zoomOut',
+  KeyP: 'preview',
+  Enter: 'print', // Because Macbooks dont have a Print Key omglol
+  PrintScreen: 'print'
+};
+
+export default keyboardMappings;

src/lib/custom-controls.js

@@ -0,0 +1,73 @@
+import keyboardMappings from '../constants/keyboard-mapping.js';
+
+export default class Controller {
+  constructor(map) {
+    this.map = map;
+    this.step = 100;
+
+    const joystickIsConnected = false;
+
+    if (joystickIsConnected) {
+      this.initGamepadControls();
+    } else {
+      this.initKeyboardControls();
+    }
+  }
+
+  initGamepadControls() {
+    console.log('init gamepad controls');
+  }
+
+  initKeyboardControls() {
+    const label = document.querySelector('#label');
+
+    window.addEventListener('keyup', event => {
+      if (keyboardMappings[event.code]) {
+        if (document.activeElement !== label) {
+          const action = keyboardMappings[event.code];
+          this[action]();
+        }
+      }
+    });
+  }
+
+  navigateLeft() {
+    this.map.panBy([-this.step, 0]);
+  }
+
+  navigateRight() {
+    this.map.panBy([this.step, 0]);
+  }
+
+  navigateUp() {
+    this.map.panBy([0, -this.step]);
+  }
+
+  navigateDown() {
+    this.map.panBy([0, this.step]);
+  }
+
+  zoomIn() {
+    this.map.zoomIn();
+  }
+
+  zoomOut() {
+    this.map.zoomOut();
+  }
+
+  preview() {
+    const button = document.querySelector(
+      '#action-buttons > button.preview-button'
+    );
+
+    button.click();
+  }
+
+  print() {
+    const button = document.querySelector(
+      '#action-buttons > button.print-button'
+    );
+
+    button.click();
+  }
+}

src/preview.js

@@ -1,4 +1,5 @@
 import plotMap from './lib/plot-map';
+import CustomControls from './lib/custom-controls';
 
 mapboxgl.accessToken =
   'pk.eyJ1IjoidWJpbGFicyIsImEiOiJ4Tm02bDJrIn0.aA51umnsZbzugtBiFLZPoQ';
@@ -10,6 +11,8 @@ const map = new mapboxgl.Map({
   zoom: 11
 });
 
+new CustomControls(map);
+
 map.dragRotate.disable();
 
 map.addControl(
@@ -19,7 +22,7 @@ map.addControl(
 );
 
 const label = document.getElementById('label');
-let labelText = "HAMBURG";
+let labelText = 'HAMBURG';
 
 label.addEventListener('input', event => {
   labelText = label.innerText.toUpperCase();