Bgins fixes on Slide show pagination. Still needs some work...

This commit is contained in:
Mateus Machado Luna 2018-10-04 08:49:55 -03:00
parent 5243ba217e
commit 7da683000b
1 changed files with 58 additions and 43 deletions

View File

@ -181,7 +181,6 @@
id="tainacan-slide-container"> id="tainacan-slide-container">
<swiper-slide <swiper-slide
:ref="'thumb-' + item.id" :ref="'thumb-' + item.id"
@click="slideIndex = index;"
:key="index" :key="index"
v-for="(item, index) of slideItems" v-for="(item, index) of slideItems"
class="tainacan-slide-item" class="tainacan-slide-item"
@ -268,6 +267,7 @@ export default {
slideIndex: 0, slideIndex: 0,
minPage: 1, minPage: 1,
maxPage: 1, maxPage: 1,
readjustedSlideIndex: 0,
preloadedItem: {}, preloadedItem: {},
swiperOption: { swiperOption: {
mousewheel: true, mousewheel: true,
@ -321,7 +321,7 @@ export default {
items: { items: {
handler () { handler () {
if (this.items.length > 0) { if (this.items.length > 0) {
let updatedSlideIndex = this.slideIndex != undefined ? JSON.parse(JSON.stringify(this.slideIndex)) : 0; let updatedSlideIndex = this.slideIndex != undefined ? (this.slideIndex + 0) : 0;
// Loops through new items list. Depending on direction, goes from start or end of list. // Loops through new items list. Depending on direction, goes from start or end of list.
for (let newItem of ((this.goingRight) ? this.items : JSON.parse(JSON.stringify(this.items)).reverse())) { for (let newItem of ((this.goingRight) ? this.items : JSON.parse(JSON.stringify(this.items)).reverse())) {
@ -352,26 +352,20 @@ export default {
} }
} }
if (this.$refs.mySwiper != undefined && this.$refs.mySwiper.swiper != undefined)
this.$refs.mySwiper.swiper.update();
// When changes where made in the array, updates slider position
this.$nextTick(() => {
if (this.goingRight == undefined && updatedSlideIndex == 0) { if (this.goingRight == undefined && updatedSlideIndex == 0) {
this.slideIndex = -1; // Used to force reload of index when page has not loaded slideItems yet this.slideIndex = -1; // Used to force reload of index when page has not loaded slideItems yet
} else { } else {
if (this.$refs.mySwiper != undefined && this.$refs.mySwiper.swiper != undefined) {
// if (updatedSlideIndex != undefined && this.$refs.mySwiper.swiper.slides[updatedSlideIndex] != undefined)
// this.$refs.mySwiper.swiper.slides[updatedSlideIndex].click();
this.$refs.mySwiper.swiper.activeIndex = this.slideIndex;
this.slideIndex = updatedSlideIndex; this.slideIndex = updatedSlideIndex;
// console.log("Após: " + this.slideIndex + " " + this.$refs.mySwiper.swiper.activeIndex);
}
} }
if (this.slideIndex != undefined && this.$refs.mySwiper.swiper.slides[this.slideIndex] != undefined)
this.$refs.mySwiper.swiper.slides[this.slideIndex].click();
this.$refs.mySwiper.swiper.activeIndex == this.slideIndex;
this.$refs.mySwiper.swiper.slideTo(this.slideIndex, 0, false);
this.$refs.mySwiper.swiper.update();
});
} }
}, },
immediate: true immediate: true
@ -393,8 +387,17 @@ export default {
this.loadCurrentItem(); this.loadCurrentItem();
// Handles requesting new page of items, either to left or right // Handles requesting new page of items, either to left or right
this.$nextTick(() => { if (this.$refs.mySwiper != undefined && this.$refs.mySwiper.swiper != undefined) {
if (this.slideItems.length > 0) {
if (this.slideIndex != this.$refs.mySwiper.swiper.activeIndex) {
if (this.slideIndex != undefined && this.$refs.mySwiper.swiper.slides[this.slideIndex] != undefined)
this.$refs.mySwiper.swiper.slides[this.slideIndex].click();
this.readjustedSlideIndex = this.slideIndex;
this.$refs.mySwiper.swiper.activeIndex = this.slideIndex + 0;
// console.log("Index: " + this.slideIndex, this.$refs.mySwiper.swiper.activeIndex, this.readjustedSlideIndex)
} else if (this.slideItems.length > 0) {
if (this.$refs.mySwiper.swiper.activeIndex == this.slideItems.length - 1 && this.page < this.totalPages) if (this.$refs.mySwiper.swiper.activeIndex == this.slideItems.length - 1 && this.page < this.totalPages)
oldVal == undefined ? this.$eventBusSearch.setPage(this.page + 1) : this.$eventBusSearch.setPage(this.maxPage + 1); oldVal == undefined ? this.$eventBusSearch.setPage(this.page + 1) : this.$eventBusSearch.setPage(this.maxPage + 1);
else if (this.$refs.mySwiper.swiper.activeIndex == 0 && this.page > 1 && this.slideItems.length < this.totalItems) { else if (this.$refs.mySwiper.swiper.activeIndex == 0 && this.page > 1 && this.slideItems.length < this.totalItems) {
@ -405,7 +408,7 @@ export default {
// Handles pausing auto play when reaches the end of the list. // Handles pausing auto play when reaches the end of the list.
if (this.$refs.mySwiper.swiper.activeIndex == this.slideItems.length - 1 && this.page == this.totalPages) if (this.$refs.mySwiper.swiper.activeIndex == this.slideItems.length - 1 && this.page == this.totalPages)
this.isPlaying = false; this.isPlaying = false;
}); }
} }
}, },
immediate: true immediate: true
@ -450,8 +453,20 @@ export default {
}, 500); }, 500);
}, },
onSlideChange() { onSlideChange() {
// console.log(this.slideIndex, this.$refs.mySwiper.swiper.activeIndex, this.readjustedSlideIndex)
if (this.$refs.mySwiper.swiper != undefined) if (this.$refs.mySwiper.swiper != undefined)
this.slideIndex = this.$refs.mySwiper.swiper.activeIndex; this.slideIndex = this.$refs.mySwiper.swiper.activeIndex;
this.$nextTick(() => {
if (this.readjustedSlideIndex != undefined) {
this.slideIndex = this.readjustedSlideIndex;
// if (this.slideIndex != undefined && this.$refs.mySwiper.swiper.slides[this.slideIndex] != undefined)
// this.$refs.mySwiper.swiper.slides[this.slideIndex].click();
this.$refs.mySwiper.swiper.activeIndex = this.slideIndex + 0;
this.readjustedSlideIndex = undefined;
}
});
}, },
nextSlide() { nextSlide() {
if (this.$refs.mySwiper.swiper != undefined) if (this.$refs.mySwiper.swiper != undefined)