From 32cca30d5e8f3c6314dde40fc14529a1f0525f75 Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Thu, 10 Jan 2019 13:28:35 +0000
Subject: [PATCH] image viewer functionality implemented

---
 components/GalleryImageViewer.vue | 38 ++++++++++++++++++++++++-------
 components/GalleryPage.vue        | 11 +++++++++
 2 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/components/GalleryImageViewer.vue b/components/GalleryImageViewer.vue
index bda77cc..e56de83 100644
--- a/components/GalleryImageViewer.vue
+++ b/components/GalleryImageViewer.vue
@@ -2,15 +2,28 @@
   <div class="image-viewer"
        :class="{ 'is-visible': isVisible }"
        :style="imageViewerStyle">
-    <div class="close-viewer"
+    <div class="close-viewer mobile-only"
          @click="$emit('close')">
       X
     </div>
+    <ThumbNav v-if="hasPrev"
+              class="thumb-nav thumb-nav--left mobile-only"
+              direction="left"
+              @navClick="$emit('clickPrev')"/>
+    <ThumbNav v-if="hasNext"
+              class="thumb-nav thumb-nav--right mobile-only"
+              direction="right"
+              @navClick="$emit('clickNext')"/>
   </div>
 </template>
 
 <script>
+import ThumbNav from '@/components/ThumbNav'
+
 export default {
+  components: {
+    ThumbNav
+  },
   props: {
     isVisible: {
       type: Boolean,
@@ -22,6 +35,14 @@ export default {
       default () {
         return ''
       }
+    },
+    hasNext: {
+      type: Boolean,
+      required: true
+    },
+    hasPrev: {
+      type: Boolean,
+      required: true
     }
   },
 
@@ -45,13 +66,10 @@ export default {
 
 <style lang="scss" scoped>
 .image-viewer {
-  background: linear-gradient(
-    to bottom left,
-    magenta,
-    cyan
-  ); // TEMP
-  background-size: cover;
+  background-size: contain;
+  background-repeat: no-repeat;
   background-position: center center;
+  background-color: #333;
 }
 
 @media (max-width: $bp__layout) {
@@ -75,8 +93,12 @@ export default {
 }
 
 @media (min-width: $bp__layout) {
-  .close-viewer {
+  .mobile-only {
     display: none;
   }
+
+  .image-viewer {
+    background-size: cover;
+  }
 }
 </style>
diff --git a/components/GalleryPage.vue b/components/GalleryPage.vue
index 4ee03de..406bc14 100644
--- a/components/GalleryPage.vue
+++ b/components/GalleryPage.vue
@@ -3,6 +3,10 @@
     <GalleryImageViewer class="image-viewer"
                         :is-visible="imageViewerIsVisible"
                         :image-url="viewingImageUrl"
+                        :has-next="activeImageIndex < galleries[activeGalleryIndex].images.length - 1"
+                        :has-prev="activeImageIndex > 0"
+                        @clickPrev="handleClickPrev"
+                        @clickNext="handleClickNext"
                         @close="imageViewerIsVisible = false" />
     <div class="gallery">
       <GalleryFeatured class="gallery__featured"
@@ -60,6 +64,13 @@ export default {
     handleThumbClick(gallery, image) {
       this.activeGalleryIndex = gallery
       this.activeImageIndex = image
+      this.imageViewerIsVisible = true
+    },
+    handleClickNext () {
+      this.activeImageIndex++;
+    },
+    handleClickPrev () {
+      this.activeImageIndex--;
     }
   }
 }