From d2f0af9e986cd8850ce8f0d3d9ea07c68d2bc5dd Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Wed, 9 Jan 2019 19:55:19 +0000
Subject: [PATCH] gallery thumb behaviour fully implemented

---
 components/GalleryThumbs.vue | 43 ++++++++++++++++++++++++++++++++----
 1 file changed, 39 insertions(+), 4 deletions(-)

diff --git a/components/GalleryThumbs.vue b/components/GalleryThumbs.vue
index e13d273..6fa3b05 100644
--- a/components/GalleryThumbs.vue
+++ b/components/GalleryThumbs.vue
@@ -33,11 +33,11 @@
         </ul>
       </li>
       <ThumbNav class="thumb-nav thumb-nav--left mobile-hide"
-                :class="{ 'is-active': thumbRowOffsets[activeRow] >= 0 }"
+                :class="{ 'is-active': isLeftDesktopNavActive }"
                 direction="left"
                 @navClick="handleNavClickDesktop(activeRow, 'left')"/>
       <ThumbNav class="thumb-nav thumb-nav--right mobile-hide"
-                :class="{ 'is-active': thumbRowOffsets[activeRow] > 0 }"
+                :class="{ 'is-active': thumbRowOffsets[activeRow] != 0 }"
                 direction="right"
                 @navClick="handleNavClickDesktop(activeRow, 'right')"/>
     </ul>
@@ -70,6 +70,8 @@ export default {
   data () {
     return {
       thumbRowOffsets: new Array(this.galleries.length),
+      isLeftDesktopNavActive: false,
+      resizeIsThrottling: false
     }
   },
 
@@ -80,14 +82,31 @@ export default {
     }
   },
 
+  watch: {
+    activeRow: function(val) {
+      this.$nextTick(() => {
+        this.initLeftNav()
+      })
+    }
+  },
+
   mounted () {
     this.$nextTick(function () {
       this.resetOffsets()
-      window.addEventListener('resize', this.resetOffsets)
+      this.initLeftNav()
     })
+    window.addEventListener('resize', this.handleResize)
   },
 
   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)
+    },
     resetOffsets() {
       for (let index = 0; index < this.thumbRowOffsets.length; index++) {
         this.$set(this.thumbRowOffsets, index, 0)
@@ -114,13 +133,29 @@ export default {
         offset += thumbContainerWidth
       } else if (direction === 'right') {
         offset -= thumbContainerWidth
+        if (offset != 0) {
+          this.isLeftDesktopNavActive = true
+        }
       }
       if (offset < 0) {
         offset = 0
-      } else if (offset > maxOffset) {
+      } else if (offset >= maxOffset) {
         offset = maxOffset
+        this.isLeftDesktopNavActive = false
       }
       this.$set(this.thumbRowOffsets, source, offset)
+      // this.isLeftDesktopNavActive
+    },
+    handleResize() {
+      if (!this.resizeIsThrottling) {
+        this.resizeIsThrottling = true
+        this.$nextTick(() => {
+          this.resetOffsets()
+          this.initLeftNav()
+          this.resizeIsThrottling = false
+        })
+      }
+
     }
   }
 }