From 0c74042fad1f0f47ead402e4d65dc0a447a9e316 Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Wed, 9 Jan 2019 21:23:03 +0000
Subject: [PATCH] current image shows in image viewer

---
 components/GalleryImageViewer.vue | 26 +++++++++++++++++++++++++-
 components/GalleryPage.vue        | 18 ++++++++++++++++--
 components/GalleryThumbs.vue      | 19 ++++++++++++-------
 components/ThumbNav.vue           |  2 +-
 4 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/components/GalleryImageViewer.vue b/components/GalleryImageViewer.vue
index 271143b..bda77cc 100644
--- a/components/GalleryImageViewer.vue
+++ b/components/GalleryImageViewer.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="image-viewer"
-       :class="{ 'is-visible': isVisible }">
+       :class="{ 'is-visible': isVisible }"
+       :style="imageViewerStyle">
     <div class="close-viewer"
          @click="$emit('close')">
       X
@@ -14,6 +15,13 @@ export default {
     isVisible: {
       type: Boolean,
       required: true
+    },
+    imageUrl: {
+      type: String,
+      required: false,
+      default () {
+        return ''
+      }
     }
   },
 
@@ -22,6 +30,14 @@ export default {
     }
   },
 
+  computed: {
+    imageViewerStyle () {
+      return {
+        backgroundImage: 'url(' + this.imageUrl + ')'
+      }
+    }
+  },
+
   methods: {
   }
 }
@@ -34,6 +50,8 @@ export default {
     magenta,
     cyan
   ); // TEMP
+  background-size: cover;
+  background-position: center center;
 }
 
 @media (max-width: $bp__layout) {
@@ -55,4 +73,10 @@ export default {
     }
   }
 }
+
+@media (min-width: $bp__layout) {
+  .close-viewer {
+    display: none;
+  }
+}
 </style>
diff --git a/components/GalleryPage.vue b/components/GalleryPage.vue
index 73d0efc..4ee03de 100644
--- a/components/GalleryPage.vue
+++ b/components/GalleryPage.vue
@@ -2,6 +2,7 @@
   <div class="gallery-page">
     <GalleryImageViewer class="image-viewer"
                         :is-visible="imageViewerIsVisible"
+                        :image-url="viewingImageUrl"
                         @close="imageViewerIsVisible = false" />
     <div class="gallery">
       <GalleryFeatured class="gallery__featured"
@@ -11,7 +12,8 @@
       <GalleryThumbs class="gallery__thumbs"
                      :featured-height="featuredImageHeight"
                      :galleries="galleries"
-                     :active-row="activeRow" />
+                     :active-row="activeRow"
+                     @thumbClick="handleThumbClick"/>
     </div>
   </div>
 </template>
@@ -39,13 +41,25 @@ export default {
     return {
       featuredImageHeight: '16rem',
       imageViewerIsVisible: false,
-      activeRow: 0
+      activeRow: 0,
+      activeGalleryIndex: 0,
+      activeImageIndex: 0
+    }
+  },
+
+  computed: {
+    viewingImageUrl () {
+      return this.galleries[this.activeGalleryIndex].images[this.activeImageIndex].url
     }
   },
 
   methods: {
     handleFeaturedClick (index) {
       this.activeRow = index
+    },
+    handleThumbClick(gallery, image) {
+      this.activeGalleryIndex = gallery
+      this.activeImageIndex = image
     }
   }
 }
diff --git a/components/GalleryThumbs.vue b/components/GalleryThumbs.vue
index 6fa3b05..eed6b6b 100644
--- a/components/GalleryThumbs.vue
+++ b/components/GalleryThumbs.vue
@@ -19,7 +19,8 @@
           <li v-for="(image, imageIndex) in gallery.images"
               :ref="galleryIndex == 0 && imageIndex == 0 ? 'thumbContainer' : null"
               class="thumb-container"
-              :key="galleryIndex + '.' + imageIndex + '.' + image.url">
+              :key="galleryIndex + '.' + imageIndex + '.' + image.url"
+              @click="$emit('thumbClick', galleryIndex, imageIndex)">
             <ThumbNav class="thumb-nav thumb-nav--left mobile-only"
                       direction="left"
                       @navClick="handleNavClick(galleryIndex, 'left')" />
@@ -100,12 +101,14 @@ export default {
 
   methods: {
     initLeftNav () {
-      let offset = this.thumbRowOffsets[this.activeRow]
-      let totalRowWidth = this.$refs.galleryThumbsRowContainers[this.activeRow].clientWidth
-      let visibleRowWidth = this.$refs.galleryThumbsList.clientWidth
-      let maxOffset = totalRowWidth - visibleRowWidth
-      this.isLeftDesktopNavActive = (totalRowWidth > visibleRowWidth) 
-        && (offset < maxOffset)
+      if (this.$refs.galleryThumbsRowContainers[this.activeRow] && this.$refs.galleryThumbsList) {
+        let offset = this.thumbRowOffsets[this.activeRow]
+        let totalRowWidth = this.$refs.galleryThumbsRowContainers[this.activeRow].clientWidth
+        let visibleRowWidth = this.$refs.galleryThumbsList.clientWidth
+        let maxOffset = totalRowWidth - visibleRowWidth
+        this.isLeftDesktopNavActive = (totalRowWidth > visibleRowWidth) 
+          && (offset < maxOffset)
+      }
     },
     resetOffsets() {
       for (let index = 0; index < this.thumbRowOffsets.length; index++) {
@@ -254,10 +257,12 @@ export default {
 
     transition: opacity .5s;
     opacity: 0;
+    pointer-events: none;
 
     &.is-active {
       transition: opacity .5s .3s;
       opacity: 1;
+      pointer-events: auto;
     }
   }
 
diff --git a/components/ThumbNav.vue b/components/ThumbNav.vue
index 016c452..9315d1e 100644
--- a/components/ThumbNav.vue
+++ b/components/ThumbNav.vue
@@ -1,5 +1,5 @@
 <template>
-  <div @click="$emit('navClick')">ThumbNav--{{ direction }}</div>
+  <div @click.stop="$emit('navClick')">ThumbNav--{{ direction }}</div>
 </template>
 
 <script>