diff --git a/components/GalleryThumbs.vue b/components/GalleryThumbs.vue index 79e924e..111ba59 100644 --- a/components/GalleryThumbs.vue +++ b/components/GalleryThumbs.vue @@ -72,7 +72,8 @@ export default { thumbRowOffsets: new Array(this.galleries.length), isLeftDesktopNavActive: false, resizeIsThrottling: false, - isThumbsScrolling: false + isThumbsScrolling: false, + touchDownPosition: null } }, @@ -99,6 +100,8 @@ export default { this.updateElements() }) window.addEventListener('resize', this.handleResize) + this.$refs.galleryThumbsList.addEventListener('touchstart', this.handleTouch) + this.$refs.galleryThumbsList.addEventListener('touchend', this.handleTouch) this.$refs.galleryThumbsList.addEventListener('wheel', this.handleThumbsScroll) // firefox this.$refs.galleryThumbsList.addEventListener('mousewheel', this.handleThumbsScroll) @@ -177,7 +180,7 @@ export default { handleThumbsScroll(event) { if (event.wheelDeltaX) { if (event.wheelDeltaX > 0) { - this.soThumbScroll('right') + this.doThumbScroll('right') } else if (event.wheelDeltaX < 0) { this.doThumbScroll('left') } @@ -189,6 +192,17 @@ export default { } } }, + handleTouch(event) { + if (event.type === 'touchstart') { + this.touchDownPosition = event.changedTouches[0].clientX + } else if (event.type === 'touchmove') { + event.preventDefault() + } else if (event.type === 'touchend') { + let xPos = event.changedTouches[0].clientX + let direction = this.touchDownPosition - xPos < 0 ? 'left' : 'right' + this.doThumbScroll(direction) + } + }, doThumbScroll(direction) { if (this.isThumbsScrolling) { return }