From 64e5e36095797651910b703f794ecbd052623990 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Mon, 16 Sep 2024 14:43:29 -0300
Subject: [PATCH] Fixes to slides view mode loading behavior.

---
 ...enberg-block-carousel-collections-list.css |   4 +-
 ...an-gutenberg-block-carousel-items-list.css |   4 +-
 ...an-gutenberg-block-carousel-terms-list.css |   4 +-
 .../tainacan-gutenberg-block-item-gallery.css |   4 +-
 .../components/view-mode-slideshow.vue        | 143 +++++++++---------
 5 files changed, 80 insertions(+), 79 deletions(-)

diff --git a/src/assets/css/tainacan-gutenberg-block-carousel-collections-list.css b/src/assets/css/tainacan-gutenberg-block-carousel-collections-list.css
index c64ed9cb8..4593effad 100644
--- a/src/assets/css/tainacan-gutenberg-block-carousel-collections-list.css
+++ b/src/assets/css/tainacan-gutenberg-block-carousel-collections-list.css
@@ -9,7 +9,7 @@
   border: 0; }
 
 /**
- * Swiper 11.1.8
+ * Swiper 11.1.14
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -17,7 +17,7 @@
  *
  * Released under the MIT License
  *
- * Released on: July 26, 2024
+ * Released on: September 12, 2024
  */
 @font-face {
   font-family: 'swiper-icons';
diff --git a/src/assets/css/tainacan-gutenberg-block-carousel-items-list.css b/src/assets/css/tainacan-gutenberg-block-carousel-items-list.css
index 956b44d18..f5badfe0c 100644
--- a/src/assets/css/tainacan-gutenberg-block-carousel-items-list.css
+++ b/src/assets/css/tainacan-gutenberg-block-carousel-items-list.css
@@ -9,7 +9,7 @@
   border: 0; }
 
 /**
- * Swiper 11.1.8
+ * Swiper 11.1.14
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -17,7 +17,7 @@
  *
  * Released under the MIT License
  *
- * Released on: July 26, 2024
+ * Released on: September 12, 2024
  */
 @font-face {
   font-family: 'swiper-icons';
diff --git a/src/assets/css/tainacan-gutenberg-block-carousel-terms-list.css b/src/assets/css/tainacan-gutenberg-block-carousel-terms-list.css
index 4d02c2cd1..c2404bd8c 100644
--- a/src/assets/css/tainacan-gutenberg-block-carousel-terms-list.css
+++ b/src/assets/css/tainacan-gutenberg-block-carousel-terms-list.css
@@ -9,7 +9,7 @@
   border: 0; }
 
 /**
- * Swiper 11.1.8
+ * Swiper 11.1.14
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -17,7 +17,7 @@
  *
  * Released under the MIT License
  *
- * Released on: July 26, 2024
+ * Released on: September 12, 2024
  */
 @font-face {
   font-family: 'swiper-icons';
diff --git a/src/assets/css/tainacan-gutenberg-block-item-gallery.css b/src/assets/css/tainacan-gutenberg-block-item-gallery.css
index 30395b75b..6c6eff7f4 100644
--- a/src/assets/css/tainacan-gutenberg-block-item-gallery.css
+++ b/src/assets/css/tainacan-gutenberg-block-item-gallery.css
@@ -1,5 +1,5 @@
 /**
- * Swiper 11.1.8
+ * Swiper 11.1.14
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: July 26, 2024
+ * Released on: September 12, 2024
  */
 @font-face {
   font-family: 'swiper-icons';
diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-slideshow.vue b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-slideshow.vue
index 4e328e585..b4d7d8a50 100644
--- a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-slideshow.vue
+++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-slideshow.vue
@@ -136,67 +136,70 @@
                             class="slide-main-content">
 
                         <span 
-                                v-if="isLoadingItem"
+                                v-if="!isSwiperInitialized || isLoading"
                                 class="icon is-large loading-icon">
                             <div class="is-large control has-icons-right is-loading is-clearfix" />
                         </span>
 
-                        <transition 
-                                mode="out-in"
-                                :name="goingRight ? 'slide-right' : 'slide-left'">
-                            
-                            <!-- Empty result placeholder -->
-                            <section
-                                    v-if="!isLoading && !isLoadingItem && items.length <= 0"
-                                    class="section">
-                                <div class="content has-text-gray4 has-text-centered">
-                                    <p>
-                                        <span class="icon is-large">
-                                            <i class="tainacan-icon tainacan-icon-36px tainacan-icon-items" />
-                                        </span>
-                                    </p> 
-                                    <p>{{ $i18n.get('info_no_item_found') }}</p>
+                        <template v-else>
+                            <transition 
+                                    mode="out-in"
+                                    :name="goingRight ? 'slide-right' : 'slide-left'">
+                                
+                                <!-- Empty result placeholder -->
+                                <section
+                                        v-if="!isLoadingItem && items.length <= 0"
+                                        class="section">
+                                    <div class="content has-text-gray4 has-text-centered">
+                                        <p>
+                                            <span class="icon is-large">
+                                                <i class="tainacan-icon tainacan-icon-36px tainacan-icon-items" />
+                                            </span>
+                                        </p> 
+                                        <p>{{ $i18n.get('info_no_item_found') }}</p>
+                                    </div>
+                                </section>
+
+                            </transition>
+
+                            <transition 
+                                    mode="out-in"
+                                    :name="goingRight ? 'slide-right' : 'slide-left'">
+
+                                <!-- JS-side hook for extra content -->
+                                <div 
+                                        v-if="hasBeforeHook()"
+                                        class="faceted-search-hook faceted-search-hook-item-before"
+                                        v-html="getBeforeHook(item)" />
+                            </transition>
+
+                            <transition 
+                                    mode="out-in"
+                                    :name="goingRight ? 'slide-right' : 'slide-left'">
+                                <div 
+                                        v-if="!isLoadingItem && slideItems.length > 0 && (item.document != undefined && item.document != undefined && item.document != '')"
+                                        v-html="item.document_as_html" />  
+                                <div v-else-if="!isLoadingItem">
+                                    <div class="empty-document">
+                                        <p>{{ $i18n.get('label_document_empty') }}</p>
+                                        <img 
+                                                :alt="$i18n.get('label_document_empty')" 
+                                                :src="$thumbHelper.getEmptyThumbnailPlaceholder(item.document_mimetype)">
+                                    </div>
                                 </div>
-                            </section>
+                            </transition>
 
-                        </transition>
+                            <transition 
+                                    mode="out-in"
+                                    :name="goingRight ? 'slide-right' : 'slide-left'">
+                                <!-- JS-side hook for extra content -->
+                                <div 
+                                        v-if="hasAfterHook()"
+                                        class="faceted-search-hook faceted-search-hook-item-after"
+                                        v-html="getAfterHook(item)" />
+                            </transition>
+                        </template>
 
-                        <transition 
-                                mode="out-in"
-                                :name="goingRight ? 'slide-right' : 'slide-left'">
-
-                            <!-- JS-side hook for extra content -->
-                            <div 
-                                    v-if="hasBeforeHook()"
-                                    class="faceted-search-hook faceted-search-hook-item-before"
-                                    v-html="getBeforeHook(item)" />
-                        </transition>
-
-                        <transition 
-                                mode="out-in"
-                                :name="goingRight ? 'slide-right' : 'slide-left'">
-                            <div 
-                                    v-if="!isLoadingItem && slideItems.length > 0 && (item.document != undefined && item.document != undefined && item.document != '')"
-                                    v-html="item.document_as_html" />  
-                            <div v-else>
-                                <div class="empty-document">
-                                    <p>{{ $i18n.get('label_document_empty') }}</p>
-                                    <img 
-                                            :alt="$i18n.get('label_document_empty')" 
-                                            :src="$thumbHelper.getEmptyThumbnailPlaceholder(item.document_mimetype)">
-                                </div>
-                            </div>
-                        </transition>
-
-                        <transition 
-                                mode="out-in"
-                                :name="goingRight ? 'slide-right' : 'slide-left'">
-                            <!-- JS-side hook for extra content -->
-                            <div 
-                                    v-if="hasAfterHook()"
-                                    class="faceted-search-hook faceted-search-hook-item-after"
-                                    v-html="getAfterHook(item)" />
-                        </transition>
                     </div>
                     
                     <button 
@@ -398,7 +401,8 @@ export default {
             minPage: 1,
             maxPage: 1,
             preloadedItem: {},
-            itemPosition: null
+            itemPosition: null,
+            isSwiperInitialized: false
         }
     },
     computed: {
@@ -431,12 +435,19 @@ export default {
                             }
                         }
                     }
+                    
+                    if ( !this.isSwiperInitialized ) {
+                        this.itemPosition = (this.initialItemPosition != null && this.initialItemPosition != undefined) ? Number(this.initialItemPosition) : 0;
+                        this.isSwiperInitialized = true;
+                        this.moveToClikedSlide(this.itemPosition);
+                    } else {
+                        this.updateSliderBasedOnIndex(updatedSlideIndex);
+                    }
 
                     // Handles pausing auto play when reaches the end of the list.
                     if (updatedSlideIndex == this.slideItems.length - 1 && this.page == this.totalPages)
                         this.isPlaying = false;
                     
-                    this.updateSliderBasedOnIndex(updatedSlideIndex);
                 }
             },
             immediate: true
@@ -455,9 +466,6 @@ export default {
         // Adds keyup and keydown event listeners
         window.addEventListener('keyup', this.handleKeyboardKeys);
 
-        // Passes props to data value of initial position, as we will modify it
-        this.itemPosition = (this.initialItemPosition != null && this.initialItemPosition != undefined) ? this.initialItemPosition : 0;
-
         // Builds Swiper component
         const self = this;
         this.swiper = new Swiper('#tainacan-slide-container', {
@@ -466,9 +474,7 @@ export default {
             preventInteractionOnTransition: true,
             slidesPerView: 24,
             spaceBetween: 12,
-            initialSlide: self.itemPosition,
             centeredSlides: true,
-            centerInsufficientSlides: false,
             slideToClickedSlide: true,
             breakpoints: {
                 320: { slidesPerView: 4 },
@@ -506,14 +512,9 @@ export default {
                 addSlidesAfter: 2
             },
             on: {
-                observerUpdate: function () {
-                    if (self.itemPosition != null && self.itemPosition != undefined) {
-                        this.slideTo(self.itemPosition);
-                        self.itemPosition = null;
-                    }
-                },
                 activeIndexChange: function() {
-                    self.updateSliderBasedOnIndex(this.activeIndex);
+                    if ( self.isSwiperInitialized )
+                        self.updateSliderBasedOnIndex(self.activeIndex);
                 }
             },
             modules: [Navigation, Virtual, Mousewheel]
@@ -541,8 +542,8 @@ export default {
             'replaceItem'
         ]),
         setMaxAndMinPages () {
-            this.minPage = JSON.parse(JSON.stringify(this.getPage() < this.minPage ? this.getPage() : this.minPage));
-            this.maxPage = JSON.parse(JSON.stringify(this.getPage() > this.maxPage ? this.getPage() : this.maxPage));
+            this.minPage = JSON.parse(JSON.stringify(this.page < this.minPage ? this.page : this.minPage));
+            this.maxPage = JSON.parse(JSON.stringify(this.page > this.maxPage ? this.page : this.maxPage));
         },
         onHideControls() {
             this.hideControls = !this.hideControls;
@@ -615,7 +616,7 @@ export default {
             }
         },
         loadCurrentItem() {
-            if ((this.slideItems && this.slideItems[this.swiper.activeIndex] && this.slideItems[this.swiper.activeIndex].id != undefined)) {
+            if (this.slideItems && this.slideItems[this.swiper.activeIndex] && this.slideItems[this.swiper.activeIndex].id != undefined) {
 
                 this.isLoadingItem = true;