fix: imageviewer sometimes not updating correctly the first time history back is executed after page refresh

This commit is contained in:
ManjaroOne666 2019-01-29 12:40:35 +00:00
parent fba88be5b2
commit 0853639993
2 changed files with 12 additions and 14 deletions

View File

@ -74,6 +74,7 @@ export default {
$route () { $route () {
const query = this.$route.query const query = this.$route.query
if (!query || !query.gallery) { return } if (!query || !query.gallery) { return }
this.$nextTick(() => {
const gallery = parseInt(query.gallery) const gallery = parseInt(query.gallery)
const image = parseInt(query.image) || 0 const image = parseInt(query.image) || 0
@ -85,6 +86,7 @@ export default {
this.activeImageIndex = image this.activeImageIndex = image
this.showImage = image this.showImage = image
} }
})
} }
}, },

View File

@ -131,9 +131,7 @@ export default {
methods: { methods: {
// TOOD move logic of getting sizes of elements into getter methods // TOOD move logic of getting sizes of elements into getter methods
scrollToThumb (thumbIndex) { scrollToThumb (thumbIndex) {
console.log('scrollToThumb')
if (thumbIndex >= this.galleries[this.activeRow].images.length || thumbIndex < 0) { return } if (thumbIndex >= this.galleries[this.activeRow].images.length || thumbIndex < 0) { return }
console.log('scrollToThumb: executing')
const containerWidth = this.$refs.galleryThumbsList.clientWidth const containerWidth = this.$refs.galleryThumbsList.clientWidth
const thumbWidth = this.$refs.thumbContainer[0].clientWidth const thumbWidth = this.$refs.thumbContainer[0].clientWidth
let offset = this.thumbRowOffsets[this.activeRow] let offset = this.thumbRowOffsets[this.activeRow]
@ -142,11 +140,9 @@ export default {
if (containerWidth < thumbPosition - offset) { if (containerWidth < thumbPosition - offset) {
this.$set(this.thumbRowOffsets, this.activeRow, thumbPosition - containerWidth + 1) this.$set(this.thumbRowOffsets, this.activeRow, thumbPosition - containerWidth + 1)
// console.log(`(${containerWidth + offset}) ${containerWidth} + ${offset} > ${rowWidth}`)
this.isLeftDesktopNavActive = containerWidth + offset > rowWidth this.isLeftDesktopNavActive = containerWidth + offset > rowWidth
} else if (thumbPosition <= offset) { } else if (thumbPosition <= offset) {
this.$set(this.thumbRowOffsets, this.activeRow, thumbPosition - thumbWidth) this.$set(this.thumbRowOffsets, this.activeRow, thumbPosition - thumbWidth)
// console.log(`(${containerWidth + offset}) ${containerWidth} + ${offset} > ${rowWidth}`)
this.isLeftDesktopNavActive = containerWidth + offset > rowWidth this.isLeftDesktopNavActive = containerWidth + offset > rowWidth
} }