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(); } }