From df77c8ea176e1ec0798999eb6d3e943d8de54a62 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 25 Feb 2019 17:15:34 +0000
Subject: [PATCH] Tab switcher now controls on-change events

---
 .../paneDisplayComponents/galleryDisplay.vue  |  6 +---
 src/components/panelDisplay.vue               | 34 +++++++++++++++----
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/components/paneDisplayComponents/galleryDisplay.vue b/src/components/paneDisplayComponents/galleryDisplay.vue
index deb31cdc..9c4c5e7f 100644
--- a/src/components/paneDisplayComponents/galleryDisplay.vue
+++ b/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"
diff --git a/src/components/panelDisplay.vue b/src/components/panelDisplay.vue
index 01df632f..6a498e2d 100644
--- a/src/components/panelDisplay.vue
+++ b/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 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 clickableTab" id="streamDisplayTab"><streamDisplay/></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: {
-    updateCaptureList: function () {
-      this.$root.$emit('globalUpdateCaptureList')
-    },
+  mounted() {
+    // Attach methods to UIkit events for tab switching
+    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 {