scrollToThumb implemented

This commit is contained in:
ManjaroOne666 2019-01-29 10:30:05 +00:00
parent 12df5f8c5b
commit 88ec77d6d9
1 changed files with 26 additions and 2 deletions

View File

@ -66,13 +66,22 @@ export default {
type: Number, type: Number,
required: true required: true
}, },
// index of image to be highlighted
activeIndex: { activeIndex: {
type: Number, type: Number,
required: false, required: false,
default () { default () {
return 0 return 0
}, },
} },
// ensures this image is in viewport
initialImageIndex: {
type: Number,
required: false,
default () {
return 0
},
},
}, },
data () { data () {
@ -106,6 +115,7 @@ export default {
mounted () { mounted () {
this.$nextTick(function () { this.$nextTick(function () {
this.updateElements() this.updateElements()
this.scrollToThumb(this.startImage)
}) })
window.addEventListener('resize', this.handleResize) window.addEventListener('resize', this.handleResize)
this.$refs.galleryThumbsList.addEventListener('touchstart', this.handleTouch) this.$refs.galleryThumbsList.addEventListener('touchstart', this.handleTouch)
@ -116,6 +126,20 @@ export default {
}, },
methods: { methods: {
// TOOD move logic of getting sizes of elements into getter methods
scrollToThumb (thumbIndex) {
if (thumbIndex >= this.galleries.length || thumbIndex < 0) { return }
const containerWidth = this.$refs.galleryThumbsList.clientWidth
const thumbWidth = this.$refs.thumbContainer[0].clientWidth
const offset = this.thumbRowOffsets[this.activeRow]
const thumbPosition = thumbWidth * (this.galleries[this.activeRow].images.length - thumbIndex)
if (containerWidth < thumbPosition - offset) {
this.thumbRowOffsets[this.activeRow] = thumbPosition - containerWidth
}
},
updateElements (resetOffsets=true) { updateElements (resetOffsets=true) {
if (resetOffsets) {this.resetOffsets()} if (resetOffsets) {this.resetOffsets()}
if (this.$refs.galleryThumbsRows[this.activeRow] && this.$refs.galleryThumbsList) { if (this.$refs.galleryThumbsRows[this.activeRow] && this.$refs.galleryThumbsList) {
@ -144,7 +168,7 @@ export default {
}, },
handleNavClick(source, direction) { handleNavClick(source, direction) {
let offset = this.thumbRowOffsets[source] let offset = this.thumbRowOffsets[source]
let thumbContainerWidth = this.$refs.thumbContainer[0].clientWidth const thumbContainerWidth = this.$refs.thumbContainer[0].clientWidth
if (direction === 'left') { if (direction === 'left') {
offset += thumbContainerWidth offset += thumbContainerWidth
} else if (direction === 'right') { } else if (direction === 'right') {