From ee503df9a654fbf5484efc921c9043a75a876c50 Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna
Date: Thu, 27 Sep 2018 12:37:20 -0300
Subject: [PATCH] Adds removal of items back and the empty document
placeholder.
---
.../components/other/circular-counter.vue | 25 ++--
src/admin/scss/_view-mode-slide.scss | 22 ++++
src/theme-helper/view-mode-slide.vue | 107 +++++++++++-------
3 files changed, 101 insertions(+), 53 deletions(-)
diff --git a/src/admin/components/other/circular-counter.vue b/src/admin/components/other/circular-counter.vue
index 3df4a01ec..8e648dd26 100644
--- a/src/admin/components/other/circular-counter.vue
+++ b/src/admin/components/other/circular-counter.vue
@@ -8,7 +8,7 @@
{
+ this.initialOffset -= 40;
+ if (this.initialOffset <= -40)
+ this.initialOffset = 200;
+ }, 1000);
},
beforeDestroy() {
- // clearInterval(this.interval);
+ clearInterval(this.interval);
}
}
@@ -70,8 +77,8 @@ svg {
.circle_animation {
stroke-dasharray: 100;
- stroke-dashoffset: 100;
- transition: all 5s linear;
+ stroke-dashoffset: 200;
+ transition: all 0.1s linear;
}
diff --git a/src/admin/scss/_view-mode-slide.scss b/src/admin/scss/_view-mode-slide.scss
index fb6e699d6..4c63351f4 100644
--- a/src/admin/scss/_view-mode-slide.scss
+++ b/src/admin/scss/_view-mode-slide.scss
@@ -207,6 +207,28 @@
text-align: center;
color: white;
}
+
+ .empty_document {
+ font-size: 4rem;
+ font-weight: normal;
+ color: $gray4;
+ text-align: center;
+ position: relative;
+ width: 100%;
+ height: 80%;
+ margin: auto;
+ p {
+ position: absolute;
+ margin: calc(50% - 4rem) auto;
+ width: 100%;
+ }
+ @media screen and (max-width: 768px) {
+ font-size: 2rem;
+ p {
+ margin: calc(50% - 2rem) auto;
+ }
+ }
+ }
}
}
.slide-title-area {
diff --git a/src/theme-helper/view-mode-slide.vue b/src/theme-helper/view-mode-slide.vue
index e0bf2b65b..cedc38a43 100644
--- a/src/theme-helper/view-mode-slide.vue
+++ b/src/theme-helper/view-mode-slide.vue
@@ -124,17 +124,20 @@
-
+
{{ $i18n.get('info_no_item_found') }}
-
+
+
{{ $i18n.get('label_document_empty') }}
+
+
@@ -161,7 +164,8 @@
:icon="isPlaying ? 'pause-circle' : 'play-circle' "/>
+ :index="slideIndex"
+ :time="this.slideTimeout/1000" /> -->
@@ -264,6 +268,7 @@ export default {
preloadedItem: {},
swiperOption: {
mousewheel: true,
+ observer: true,
keyboard: true,
preventInteractionOnTransition: true,
allowClick: true,
@@ -314,12 +319,12 @@ export default {
handler () {
if (this.items.length > 0) {
let updatedSlideIndex = this.slideIndex != undefined ? JSON.parse(JSON.stringify(this.slideIndex)) : 0;
-
+
// 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())) {
let existingItemIndex = this.slideItems.findIndex(anItem => anItem.id == newItem.id);
if (existingItemIndex < 0) {
- if (this.goingRight) {
+ if (this.goingRight || this.slideIndex == undefined) {
this.slideItems.push(newItem);
} else {
this.slideItems.unshift(newItem);
@@ -329,38 +334,40 @@ export default {
this.$set(this.slideItems, existingItemIndex, newItem);
}
}
-
+
// Checks if list got too big. In this case we remove items from a page that is far from index
- // if (
- // (this.getItemsPerPage() == 96 && this.slideItems.length > 192) ||
- // (this.getItemsPerPage() == 48 && this.slideItems.length > 96) ||
- // (this.getItemsPerPage() == 24 && this.slideItems.length > 48) ||
- // (this.getItemsPerPage() == 12 && this.slideItems.length > 24)) {
- // if (this.goingRight) {
- // this.slideItems.splice(0, this.getItemsPerPage());
- // this.minPage++;
- // updatedSlideIndex = this.slideItems.length - 1 - this.getItemsPerPage();
- // } else {
- // this.slideItems.splice(-this.getItemsPerPage());
- // this.maxPage--;
- // updatedSlideIndex = this.getItemsPerPage();
- // }
- // }
+ if (
+ (this.getItemsPerPage() == 96 && this.slideItems.length > 192) ||
+ (this.getItemsPerPage() == 48 && this.slideItems.length > 96) ||
+ (this.getItemsPerPage() == 24 && this.slideItems.length > 48) ||
+ (this.getItemsPerPage() == 12 && this.slideItems.length > 24)) {
+ if (this.goingRight) {
+ this.slideItems.splice(0, this.getItemsPerPage());
+ this.minPage++;
+ updatedSlideIndex = this.slideItems.length - 1 - this.items.length;
+ } else {
+ this.slideItems.splice(-this.getItemsPerPage());
+ this.maxPage--;
+ updatedSlideIndex = this.getItemsPerPage();
+ }
+ }
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(() => {
- this.slideIndex = updatedSlideIndex;
+ setTimeout(() => {
+ this.slideIndex = updatedSlideIndex;
- 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();
+ 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();
+ }, 100);
});
}
},
@@ -408,15 +415,17 @@ export default {
}
// Handles requesting new page of items, either to left or right
- if (this.slideIndex == this.slideItems.length - 1 && this.page < this.totalPages)
- oldVal == undefined ? this.$eventBusSearch.setPage(this.page + 1) : this.$eventBusSearch.setPage(this.maxPage + 1);
- else if (this.slideIndex == 0 && this.page > 1 && this.slideItems.length < this.totalItems) {
- oldVal == undefined ? this.$eventBusSearch.setPage(this.page - 1) : this.$eventBusSearch.setPage(this.minPage - 1);
- }
+ this.$nextTick(() => {
+ 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);
+ else if (this.$refs.mySwiper.swiper.activeIndex == 0 && this.page > 1 && this.slideItems.length < this.totalItems) {
+ oldVal == undefined ? this.$eventBusSearch.setPage(this.page - 1) : this.$eventBusSearch.setPage(this.minPage - 1);
+ }
- // Handles pausing auto play when reaches the end of the list.
- if (this.slideIndex == this.slideItems.length - 1 && this.page == this.totalPages)
- this.isPlaying = false;
+ // 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)
+ this.isPlaying = false;
+ });
},
immediate: true
},
@@ -482,8 +491,12 @@ export default {
else if (screenWidth > 1366 && screenWidth <= 1600) amountToSkip = 6;
else if (screenWidth > 1600) amountToSkip = 7;
- if (this.$refs.mySwiper.swiper != undefined)
- this.$refs.mySwiper.swiper.slideTo(this.slideIndex + amountToSkip);
+ if (this.$refs.mySwiper.swiper != undefined) {
+ if (this.slideIndex != undefined && this.$refs.mySwiper.swiper.slides[this.slideIndex + amountToSkip] != undefined)
+ this.$refs.mySwiper.swiper.slideTo(this.slideIndex + amountToSkip);
+ else
+ this.$refs.mySwiper.swiper.slideTo(this.$refs.mySwiper.swiper.slides.length - 1)
+ }
},
prevGroupOfSlides() {
let screenWidth = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
@@ -496,8 +509,12 @@ export default {
else if (screenWidth > 1366 && screenWidth <= 1600) amountToSkip = 6;
else if (screenWidth > 1600) amountToSkip = 7;
- if (this.$refs.mySwiper.swiper != undefined)
- this.$refs.mySwiper.swiper.slideTo(this.slideIndex - amountToSkip);
+ if (this.$refs.mySwiper.swiper != undefined) {
+ if (this.slideIndex != undefined && this.$refs.mySwiper.swiper.slides[this.slideIndex - amountToSkip] != undefined)
+ this.$refs.mySwiper.swiper.slideTo(this.slideIndex - amountToSkip);
+ else
+ this.$refs.mySwiper.swiper.slideTo(0);
+ }
},
renderMetadata(itemMetadata, column) {
@@ -525,6 +542,8 @@ export default {
},
beforeDestroy() {
clearInterval(this.intervalId);
+ if (this.$refs.mySwiper.swiper)
+ this.$refs.mySwiper.swiper.destroy();
}
}