Tab switcher now controls on-change events

src/components/paneDisplayComponents/galleryDisplay.vue

@@ -24,7 +24,7 @@
         </div>
     </nav>
 
-    <div class="uk-padding-remove-top" uk-lightbox="toggle: .lightbox-link">
+    <div v-if="$store.getters.ready" class="uk-padding-remove-top" uk-lightbox="toggle: .lightbox-link">
       <div class="uk-grid-medium uk-padding uk-padding-remove-right uk-grid-match" uk-grid>
       
         <captureCard 
@@ -83,10 +83,6 @@ export default {
     }
   },
 
-  created: function () {
-    this.updateCaptureList()
-  },
-
   computed: {
     captureApiUri: function () {
       return this.$store.getters.uri + "/camera/capture"

src/components/panelDisplay.vue

@@ -2,16 +2,18 @@
   <div id="panelDisplay" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-height-1-1">
     <ul class="uk-flex-none uk-flex-center uk-margin-remove-bottom uk-text-center" uk-tab="swiping: false">
       <li><a href="#" uk-switcher-item="preview" uk-icon="play-circle" uk-tooltip="Live"></a></li>
-      <li v-bind:class="disableIfDisconnected"><a href="#" v-on:click="updateCaptureList()" uk-switcher-item="gallery" uk-icon="image" uk-tooltip="Captures"></a></li>
+      <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="gallery" uk-icon="image" uk-tooltip="Captures"></a></li>
     </ul>
     <ul class="uk-switcher uk-flex uk-flex-1">
-      <li class="uk-height-1-1 uk-width-1-1 "><streamDisplay/></li>
+      <li class="uk-height-1-1 uk-width-1-1 clickableTab" id="streamDisplayTab"><streamDisplay/></li>
-      <li v-if="$store.getters.ready" class="uk-height-1-1 uk-width-1-1 uk-overflow-auto "><galleryDisplay/></li>
+      <li class="uk-height-1-1 uk-width-1-1 uk-overflow-auto" id="galleryDisplayTab"><galleryDisplay/></li>
     </ul>
   </div>
 </template>
 
 <script>
+import UIkit from 'uikit';
+
 // Import components
 import streamDisplay from './paneDisplayComponents/streamDisplay.vue'
 import galleryDisplay from './paneDisplayComponents/galleryDisplay.vue'
@@ -25,12 +27,30 @@ export default {
     galleryDisplay
   },
 
-  methods: {
+  mounted() {
-    updateCaptureList: function () {
+    // Attach methods to UIkit events for tab switching
-      this.$root.$emit('globalUpdateCaptureList')
+    var self=this;
-    },
+    // Gallery tab
+    UIkit.util.on('#galleryDisplayTab', 'shown', function(event, area) {
+      console.log("Gallery tab entered")
+      if (self.$store.state.settings.trackWindow == true) {
+        self.$root.$emit('globalTogglePreview', false)
+      }
+      self.$root.$emit('globalUpdateCaptureList');
+    });
+
+    // Stream tab
+    UIkit.util.on('#streamDisplayTab', 'shown', function(event, area) {
+      console.log("Stream tab entered")
+      UIkit.update()
+      if (self.$store.state.settings.trackWindow == true) {
+        self.$root.$emit('globalTogglePreview', true)
+      }
+    });
+
   },
 
+
   computed: {
     disableIfDisconnected: function () {
       return {