tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/theme-helper/view-mode-slideshow.vue
View File

@ -156,24 +156,24 @@
<!-- SLIDE ITEMS LIST --> <!-- SLIDE ITEMS LIST -->
<div class="tainacan-slides-list"> <div class="tainacan-slides-list">
<section <section
@click.prevent="onHideControls()" @click.prevent="onHideControls()"
v-if="slideItems[slideIndex] != undefined" v-if="slideItems[slideIndex] != undefined"
class="slide-title-area"> class="slide-title-area">
<h1>{{ slideItems[slideIndex].title }}</h1> <h1>{{ slideItems[slideIndex].title }}</h1>
<button <button
:disabled="(slideIndex == slideItems.length - 1 && page == totalPages)" :disabled="(slideIndex == slideItems.length - 1 && page == totalPages)"
class="play-button" class="play-button"
@click.stop.prevent="isPlaying = !isPlaying"> @click.stop.prevent="isPlaying = !isPlaying">
<b-icon <b-icon
type="is-secondary" type="is-secondary"
size="is-medium" size="is-medium"
:icon="isPlaying ? 'pause-circle' : 'play-circle' "/> :icon="isPlaying ? 'pause-circle' : 'play-circle' "/>
<circular-counter <circular-counter
v-if="isPlaying" v-if="isPlaying"
:time="this.slideTimeout/1000" /> :time="this.slideTimeout/1000" />
</button> </button>
</section> </section>
<swiper <swiper
@slideChange="onSlideChange()" @slideChange="onSlideChange()"
ref="mySwiper" ref="mySwiper"
@ -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())) {
@ -345,33 +345,27 @@ export default {
this.minPage++; this.minPage++;
updatedSlideIndex = this.slideItems.length - 1 - this.items.length; updatedSlideIndex = this.slideItems.length - 1 - this.items.length;
} else { } else {
this.slideItems.splice(-this.getItemsPerPage()); this.slideItems.splice(-this.getItemsPerPage());
this.maxPage--; this.maxPage--;
updatedSlideIndex = this.getItemsPerPage(); updatedSlideIndex = this.getItemsPerPage();
} }
} }
if (this.$refs.mySwiper != undefined && this.$refs.mySwiper.swiper != undefined) if (this.goingRight == undefined && updatedSlideIndex == 0) {
this.$refs.mySwiper.swiper.update(); this.slideIndex = -1; // Used to force reload of index when page has not loaded slideItems yet
} else {
// When changes where made in the array, updates slider position if (this.$refs.mySwiper != undefined && this.$refs.mySwiper.swiper != undefined) {
this.$nextTick(() => { // if (updatedSlideIndex != undefined && this.$refs.mySwiper.swiper.slides[updatedSlideIndex] != undefined)
if (this.goingRight == undefined && updatedSlideIndex == 0) { // this.$refs.mySwiper.swiper.slides[updatedSlideIndex].click();
this.slideIndex = -1; // Used to force reload of index when page has not loaded slideItems yet
} else { 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)