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