Added basic click, key, and scroll capture

src/components/paneDisplayComponents/streamDisplay.vue

@@ -1,7 +1,7 @@
 <template>
-	<div class="streamDisplay">
+	<div class="streamDisplay scrollTarget">
 
-		<img v-if="$store.state.connected" v-bind:src="streamImgUri" alt="Stream">
+		<img v-on:dblclick="clickmonitor" v-if="$store.state.connected" v-bind:src="streamImgUri" alt="Stream">
 
 		<div v-else-if="$store.state.waiting" class="uk-position-center">
 			<div uk-spinner="ratio: 4.5" ></div>
@@ -14,10 +14,15 @@
 export default {
   name: 'streamDisplay',
 
+  methods: {
+    clickmonitor: function(event) {
+			// TODO: Add logic
+			console.log("The preview was clicked!");
+    }
+  },
+
   computed: {
-    // a computed getter
     streamImgUri: function () {
-      // `this` points to the vm instance
       return this.$store.getters.uri + "/stream"
     }
   }

src/components/paneNavigate.vue

@@ -0,0 +1,59 @@
+<template>
+<div id="paneNavigate">
+  Navigate
+  <p>
+  TODO: Basic keyboard control by adding event listeners to this pane (e.g. v-on:keyup.)
+  <br>
+  TODO: Add step-size boxes
+  <br>
+  TODO: Add click-navigation (and scroll focus) by adding event listeners to the stream panel (e.g. v-on:click, v-on:scroll)
+  <br>
+  TODO: Add absolute-positioning input boxes
+  </p>
+</div>
+</template>
+
+<script>
+// Export main app
+export default {
+  name: 'paneNavigate',
+
+  methods: {
+    // Handle global mouse wheel events to be associated with navigation
+    wheelmonitor: function(event) {
+      // TODO: Add logic
+      console.log(event.deltaY)
+      console.log(event.target.parentNode.classList)
+
+      // Only capture scroll if the event target's parent contains the "scrollTarget" class
+      if (event.target.parentNode.classList.contains("scrollTarget")) {
+        console.log("Wheel captured");
+      }
+      else {
+        console.log("Scrolled outside of a scroll capture target")
+      }
+    },
+
+    // Handle global key press events to be associated with navigation
+    keymonitor: function(event) {
+      // TODO: Add logic
+      if (!(event.target instanceof HTMLInputElement)) {
+        console.log("A key was pressed:");
+        console.log(event.keyCode)
+      }
+    }
+  },
+
+  created: function () {
+    window.addEventListener('keydown', this.keymonitor);
+    window.addEventListener('wheel', this.wheelmonitor)
+  },
+
+  computed: {
+    positionApiUri: function () {
+      return this.$store.getters.uri + "/stage/position"
+    }
+  }
+
+}
+</script>

src/components/panelLeft.vue

@@ -12,6 +12,7 @@
     </ul>
     <ul class="uk-switcher uk-padding-small uk-flex uk-flex-1 panel-content">
       <li class="uk-width-expand"><paneConnect/></li>
+      <li class="uk-width-expand"><paneNavigate/></li>
     </ul>
   </div>
 </template>
@@ -19,12 +20,14 @@
 <script>
 // Import components
 import paneConnect from './paneConnect.vue'
+import paneNavigate from './paneNavigate.vue'
 
 // Export main app
 export default {
   name: 'panelLeft',
   components: {
     paneConnect,
+    paneNavigate
   }
 }
 </script>