rayelliott
/
marc-leopold
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix: desktop navigation icons correctly showing on page reloads

This commit is contained in:
ManjaroOne666 2019-01-29 12:22:33 +00:00
parent 88ec77d6d9
commit fba88be5b2
2 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/GalleryPage.vue
View File

@ -19,6 +19,7 @@
:galleries="galleries"
:active-row="activeRow"
:active-index="activeImageIndex"
:show-image="showImage"
@thumbClick="handleThumbClick"/>
</article>
</div>
@ -49,7 +50,8 @@ export default {
imageViewerIsVisible: false,
activeRow: 0,
activeGalleryIndex: 0,
activeImageIndex: 0
activeImageIndex: 0,
showImage: 0,
}
},
@ -81,6 +83,7 @@ export default {
}
if (image !== this.activeImageIndex) {
this.activeImageIndex = image
this.showImage = image
}
}
},

31
components/GalleryThumbs.vue
View File

@ -74,8 +74,8 @@ export default {
return 0
},
},
// ensures this image is in viewport
initialImageIndex: {
// scroll this image into view
showImage: {
type: Number,
required: false,
default () {
@ -109,33 +109,45 @@ export default {
this.$nextTick(() => {
this.updateElements(false)
})
},
showImage () {
this.scrollToThumb(this.showImage)
}
},
mounted () {
this.$nextTick(function () {
this.updateElements()
this.scrollToThumb(this.startImage)
})
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)
this.$nextTick(function () {
this.updateElements()
this.scrollToThumb(this.activeIndex)
})
},
methods: {
// TOOD move logic of getting sizes of elements into getter methods
scrollToThumb (thumbIndex) {
if (thumbIndex >= this.galleries.length || thumbIndex < 0) { return }
console.log('scrollToThumb')
if (thumbIndex >= this.galleries[this.activeRow].images.length || thumbIndex < 0) { return }
console.log('scrollToThumb: executing')
const containerWidth = this.$refs.galleryThumbsList.clientWidth
const thumbWidth = this.$refs.thumbContainer[0].clientWidth
const offset = this.thumbRowOffsets[this.activeRow]
let offset = this.thumbRowOffsets[this.activeRow]
const thumbPosition = thumbWidth * (this.galleries[this.activeRow].images.length - thumbIndex)
const rowWidth = this.$refs.galleryThumbsRows[this.activeRow].clientWidth
if (containerWidth < thumbPosition - offset) {
this.thumbRowOffsets[this.activeRow] = thumbPosition - containerWidth
this.$set(this.thumbRowOffsets, this.activeRow, thumbPosition - containerWidth + 1)
// console.log(`(${containerWidth + offset}) ${containerWidth} + ${offset} > ${rowWidth}`)
this.isLeftDesktopNavActive = containerWidth + offset > rowWidth
} else if (thumbPosition <= offset) {
this.$set(this.thumbRowOffsets, this.activeRow, thumbPosition - thumbWidth)
// console.log(`(${containerWidth + offset}) ${containerWidth} + ${offset} > ${rowWidth}`)
this.isLeftDesktopNavActive = containerWidth + offset > rowWidth
}
@ -198,7 +210,6 @@ export default {
this.isLeftDesktopNavActive = false
}
this.$set(this.thumbRowOffsets, source, offset)
// this.isLeftDesktopNavActive
},
handleResize() {
if (!this.resizeIsThrottling) {