From 5eeb3a7768a2f3f5b326b3d4e2b5acf7027bd4e7 Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Sun, 13 Jan 2019 11:47:43 +0000
Subject: [PATCH] implemented mouse wheel scrolling

---
 components/GalleryThumbs.vue | 38 +++++++++++++++++++++++++++++++++---
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/components/GalleryThumbs.vue b/components/GalleryThumbs.vue
index 3cdad91..79e924e 100644
--- a/components/GalleryThumbs.vue
+++ b/components/GalleryThumbs.vue
@@ -37,7 +37,7 @@
                 direction="left"
                 @navClick="handleNavClickDesktop(activeRow, 'left')"/>
       <ThumbNav class="thumb-nav thumb-nav--right mobile-hide"
-                :class="{ 'is-active': thumbRowOffsets[activeRow] > 0 }"
+                :class="{ 'is-active': isRightDesktopNavActive }"
                 direction="right"
                 @navClick="handleNavClickDesktop(activeRow, 'right')"/>
     </ul>
@@ -71,7 +71,8 @@ export default {
     return {
       thumbRowOffsets: new Array(this.galleries.length),
       isLeftDesktopNavActive: false,
-      resizeIsThrottling: false
+      resizeIsThrottling: false,
+      isThumbsScrolling: false
     }
   },
 
@@ -79,6 +80,9 @@ export default {
     thumbsVerticalOffset () {
       let rowHeight = this.$refs.thumbContainer ? this.$refs.thumbContainer[0].clientHeight : 0;
       return  rowHeight * this.activeRow
+    },
+    isRightDesktopNavActive () {
+      return this.thumbRowOffsets[this.activeRow] > 0
     }
   },
 
@@ -95,6 +99,9 @@ export default {
       this.updateElements()
     })
     window.addEventListener('resize', this.handleResize)
+    this.$refs.galleryThumbsList.addEventListener('wheel', this.handleThumbsScroll)
+    // firefox
+    this.$refs.galleryThumbsList.addEventListener('mousewheel', this.handleThumbsScroll)
   },
 
   methods: {
@@ -166,7 +173,32 @@ export default {
           this.resizeIsThrottling = false
         })
       }
-
+    },
+    handleThumbsScroll(event) {
+      if (event.wheelDeltaX) {
+        if (event.wheelDeltaX > 0) {
+          this.soThumbScroll('right')
+        } else if (event.wheelDeltaX < 0) {
+          this.doThumbScroll('left')
+        }
+      } else if (event.deltaY) {
+        if (event.deltaY > 0) {
+          this.doThumbScroll('left')
+        } else if (event.deltaY < 0) {
+          this.doThumbScroll('right')
+        }
+      }
+    },
+    doThumbScroll(direction) {
+      if (this.isThumbsScrolling) { return }
+      
+      this.isThumbsScrolling = true
+      if ((direction === 'left' && this.isLeftDesktopNavActive) || (direction === 'right' && this.isRightDesktopNavActive)) {
+        this.handleNavClickDesktop(this.activeRow, direction)
+      }
+      this.$nextTick(() => {
+        this.isThumbsScrolling = false
+      })
     }
   }
 }