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')"/> @@ -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 + }) } } }