From 12acb6be399721489945de571bddc63660c52534 Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Wed, 26 Sep 2018 10:45:51 -0300
Subject: [PATCH] Adds loading control to  lateral loading.

---
 src/admin/scss/_view-mode-slide.scss | 13 ++++++++++++-
 src/theme-helper/view-mode-slide.vue | 18 ++++++++++++------
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/admin/scss/_view-mode-slide.scss b/src/admin/scss/_view-mode-slide.scss
index 5f0f7683c..fc28e8397 100644
--- a/src/admin/scss/_view-mode-slide.scss
+++ b/src/admin/scss/_view-mode-slide.scss
@@ -253,7 +253,7 @@
     background-color: transparent;
     border: none !important;
     height: 3.5rem;
-    width: 2.8rem;
+    width: 3.5rem;
     text-align: center;
     vertical-align: middle;
     position: absolute;
@@ -272,6 +272,7 @@
             line-height: 5rem;
             font-size: 5rem;
             color: $turquoise5;
+            text-shadow: 0px 0px 2px $gray5;
         }
     }
     &.arrow-left { 
@@ -295,6 +296,7 @@
                 line-height: 3rem;
                 font-size: 3rem;
                 color: white;
+                text-shadow: 0px 0px 2px $gray5;
             }
         }
     }
@@ -302,6 +304,13 @@
 .tainacan-slides-list {
     position: relative;
     transition: opacity 0.3s, visibility 0.3s, display 0.3s;
+
+    .loading-icon {
+        width: 100%;
+        top: calc(50% - 33px);
+        position: absolute;
+        z-index: 9;
+    }
 }
 #tainacan-slide-container {
     background-color: rgba(0,0,0,0.5);
@@ -326,6 +335,7 @@
     }
 
     .tainacan-slide-item {    
+        cursor: pointer;
 
         &.active-item img {
             border-bottom: 4px solid $turquoise5 !important;
@@ -335,6 +345,7 @@
         }
 
         img {
+            color: white;
             width: 100%;//85px;
             height: auto;
             border-radius: 0px;
diff --git a/src/theme-helper/view-mode-slide.vue b/src/theme-helper/view-mode-slide.vue
index 01a477125..5df380333 100644
--- a/src/theme-helper/view-mode-slide.vue
+++ b/src/theme-helper/view-mode-slide.vue
@@ -180,6 +180,7 @@
                                 class="tainacan-slide-item"
                                 :class="{'active-item': slideIndex == index}">
                             <img 
+                                    :alt="item.title"
                                     class="thumnail" 
                                     :src="item['thumbnail']['tainacan_small'] ? item['thumbnail']['tainacan_small'] : (item['thumbnail'].thumb ? item['thumbnail'].thumb : thumbPlaceholderPath)">  
                             
@@ -194,6 +195,13 @@
                                 class="swiper-button-next" 
                                 slot="button-next"/>
                     </swiper>
+                    <!-- List loading -->
+                    <span 
+                            v-if="isLoading"
+                            :style="{ left: !goingRight ? '' : '25%', right: !goingRight ? '25%' : '' }"
+                            class="icon loading-icon">
+                        <div class="control has-icons-right is-loading is-clearfix" />
+                    </span>
                     <!-- Extra buttons for sliding groups of slides -->
                     <button 
                             @click.prevent="prevGroupOfSlides()"
@@ -221,7 +229,7 @@
 import {mapActions, mapGetters} from 'vuex';
 import 'swiper/dist/css/swiper.css';
 import { swiper, swiperSlide } from 'vue-awesome-swiper';
-import CircularCounter from '../admin/components/other/circular-counter.vue'
+import CircularCounter from '../admin/components/other/circular-counter.vue';
 
 export default {
     name: 'ViewModeSlide',
@@ -229,6 +237,7 @@ export default {
         collectionId: Number,
         displayedMetadata: Array,
         items: Array,
+        isLoading: Boolean,
         totalItems: Number,
         hideControls: true,
         isSwiping: false
@@ -241,24 +250,21 @@ export default {
     data () {
         return {
             slideItems: [],
-            isLoading: false,
             goingRight: true,
             isPlaying: false,
             slideTimeout: 5000, 
             intervalId: 0, 
             collapseAll: false,
-            isLoadingItem: false,
+            isLoadingItem: true,
             isMetadataCompressed: true,
             slideIndex: 0,
             swiperOption: {
                 preventInteractionOnTransition: true,
-                normalizeSlideIndex: true,
                 allowClick: true,
                 allowTouchMove: true,
                 slidesPerView: 18,
                 slidesPerGroup: 1,
                 centeredSlides: true,
-                watchSlidesVisibility: true,
                 spaceBetween: 12,
                 slideToClickedSlide: true,
                 navigation: {
@@ -337,7 +343,7 @@ export default {
                             this.isLoadingItem = false;
                         });
                 }
-
+                
                 // Handles requesting new page of items, either to left or right
                 if (this.slideIndex == this.slideItems.length - 1 && this.page < this.totalPages)
                     this.$eventBusSearch.setPage(this.page + 1);