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