From d72f39c0745739e644bf269cb3c213e81d9559ed Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Wed, 26 Sep 2018 17:46:35 -0300
Subject: [PATCH] Disables animation when re-adjusting slide list after a
 reload. Temporally disables removal of items for long lists as it still need
 adjustments.

---
 src/admin/scss/_view-mode-slide.scss | 77 +++++++++++++++-------------
 src/theme-helper/view-mode-slide.vue | 38 +++++++-------
 2 files changed, 60 insertions(+), 55 deletions(-)

diff --git a/src/admin/scss/_view-mode-slide.scss b/src/admin/scss/_view-mode-slide.scss
index fc28e8397..fb6e699d6 100644
--- a/src/admin/scss/_view-mode-slide.scss
+++ b/src/admin/scss/_view-mode-slide.scss
@@ -304,6 +304,7 @@
 .tainacan-slides-list {
     position: relative;
     transition: opacity 0.3s, visibility 0.3s, display 0.3s;
+    min-height: 60px;
 
     .loading-icon {
         width: 100%;
@@ -311,47 +312,49 @@
         position: absolute;
         z-index: 9;
     }
-}
-#tainacan-slide-container {
-    background-color: rgba(0,0,0,0.5);
-    padding: 0 $page-side-padding;
-    display: flex;
-    flex-wrap: nowrap;
-    overflow: hidden;
-    flex-grow: 1;
-    flex-shrink: 1;
-    justify-content: space-evenly;
-    animation-name: item-appear;
-    animation-duration: 0.5s;
 
-    .selected-record {
-        background-color: $turquoise1;
-        .metadata-title {
-            background-color: $turquoise2;
-        }
-        .media {
+    #tainacan-slide-container {
+        background-color: rgba(0,0,0,0.5);
+        padding: 0 $page-side-padding;
+        display: flex;
+        flex-wrap: nowrap;
+        overflow: hidden;
+        flex-grow: 1;
+        flex-shrink: 1;
+        justify-content: space-evenly;
+        animation-name: item-appear;
+        animation-duration: 0.5s;
+        
+
+        .selected-record {
             background-color: $turquoise1;
-        }
-    }
-
-    .tainacan-slide-item {    
-        cursor: pointer;
-
-        &.active-item img {
-            border-bottom: 4px solid $turquoise5 !important;
-        }
-        &:hover img{
-            border-bottom: 4px solid $gray2;
+            .metadata-title {
+                background-color: $turquoise2;
+            }
+            .media {
+                background-color: $turquoise1;
+            }
         }
 
-        img {
-            color: white;
-            width: 100%;//85px;
-            height: auto;
-            border-radius: 0px;
-            padding: 0 0 6px 0;
-            border-bottom: 4px solid transparent; 
-            transition: border-bottom 0.4s;
+        .tainacan-slide-item {    
+            cursor: pointer;
+
+            &.active-item img {
+                border-bottom: 4px solid $turquoise5 !important;
+            }
+            &:hover img{
+                border-bottom: 4px solid $gray2;
+            }
+
+            img {
+                color: white;
+                width: 100%;//85px;
+                height: auto;
+                border-radius: 0px;
+                padding: 0 0 6px 0;
+                border-bottom: 4px solid transparent; 
+                transition: border-bottom 0.4s;
+            }
         }
     }
 }
diff --git a/src/theme-helper/view-mode-slide.vue b/src/theme-helper/view-mode-slide.vue
index 8df205b1c..e0bf2b65b 100644
--- a/src/theme-helper/view-mode-slide.vue
+++ b/src/theme-helper/view-mode-slide.vue
@@ -263,6 +263,8 @@ export default {
             maxPage: 1,
             preloadedItem: {},
             swiperOption: {
+                mousewheel: true,
+                keyboard: true,
                 preventInteractionOnTransition: true,
                 allowClick: true,
                 allowTouchMove: true,
@@ -312,7 +314,7 @@ 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);
@@ -327,23 +329,23 @@ 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() < 48 && this.slideItems.length > 48)
-                        ) {
-                        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.getItemsPerPage();
+                    //     } 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();
@@ -356,7 +358,7 @@ export default {
                             this.$refs.mySwiper.swiper.slides[this.slideIndex].click();
                         
                         this.$refs.mySwiper.swiper.activeIndex == this.slideIndex;
-                        this.$refs.mySwiper.swiper.slideTo(this.slideIndex);
+                        this.$refs.mySwiper.swiper.slideTo(this.slideIndex, 0, false);
                         
                         this.$refs.mySwiper.swiper.update();
                     });