scrollToThumb implemented
This commit is contained in:
parent
12df5f8c5b
commit
88ec77d6d9
|
@ -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') {
|
||||||
|
|
Loading…
Reference in New Issue