Commit f5c59d3a authored by Joel Collins's avatar Joel Collins
Browse files

Added basic click, key, and scroll capture

parent 02587b5a

src/components/paneDisplayComponents/streamDisplay.vue

+9 −4
Original line number Diff line number Diff line 
<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 → 100644
+59 −0
Original line number Diff line number Diff line 
<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>
 
 No newline at end of file

src/components/panelLeft.vue

+3 −0
Original line number Diff line number Diff line
@@ -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>