@designcrowd/library.brand-page 5.17.21-kp-1 → 5.17.21

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.17.21-kp-1",
+  "version": "5.17.21",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page/components/image-gallery/ImageGalleryModal.mixin.ts

@@ -5,17 +5,6 @@ import ImageModalMixin from '../mixins/image-modal.mixin';
 import cloneDeep from 'lodash.clonedeep';
 import type { BrandPageContext, ImageItem } from '@brand-page/models';
 
-// Number of slides on each side of the current slide to keep mounted with a
-// real <img>. Slides outside this window render an empty placeholder so the
-// browser does not request full-resolution images for the entire gallery on
-// modal open — required to prevent mobile tab crashes on large galleries.
-const IMAGE_RENDER_WINDOW = 2;
-
-// Swiper `loop: true` duplicates slide DOM nodes at both ends. For large
-// galleries this doubles the DOM cost without user benefit, so we disable
-// loop above this threshold.
-const LOOP_DISABLED_ABOVE = 20;
-
 export default defineComponent({
   mixins: [ComponentCommonMixin, ImageModalMixin],
   props: {
@@ -51,7 +40,6 @@ export default defineComponent({
       isImageModalLoading: false,
       carouselImages: [] as any[][] | undefined,
       showControl: true,
-      carouselComponentRef: 'image-gallery-carousel',
     };
   },
   computed: {
@@ -77,9 +65,8 @@ export default defineComponent({
 
     swiperOptions() {
       return {
-        initialSlide: this.selectedImageIndex ?? 0,
-        loop:
-          this.images.length > 1 && this.images.length <= LOOP_DISABLED_ABOVE,
+        initialSlide: 0,
+        loop: this.images.length > 1,
         slidesPerGroup: 1,
         slidesPerView: 1,
         spaceBetween: 10,
@@ -112,6 +99,10 @@ export default defineComponent({
       }
 
       this.isImageModalLoading = true;
+
+      this.swiperOptions.initialSlide = newIndex;
+
+      // this.$nextTick(() => this.checkImageModalImageComplete());
     },
 
     images: {
@@ -163,51 +154,5 @@ export default defineComponent({
     onImageModalClose() {
       this.$emit('close');
     },
-
-    isSlideInRenderWindow(index: number): boolean {
-      if (this.currentImageIndex === undefined) {
-        return false;
-      }
-
-      const total = this.images.length;
-
-      if (total === 0) {
-        return false;
-      }
-
-      const direct = Math.abs(index - this.currentImageIndex);
-      // For looped galleries, the shortest path between two slides may wrap
-      // around the end. Use whichever distance is smaller.
-      const wrapped = total - direct;
-      const distance = Math.min(direct, wrapped);
-
-      return distance <= IMAGE_RENDER_WINDOW;
-    },
-
-    onCarouselLoaded() {
-      // The shared Carousel doesn't emit slide-change events, so we reach
-      // through its ref to bind directly to the underlying Swiper instance.
-      // Keeps `currentImageIndex` in sync with user navigation (arrows,
-      // swipes, keyboard) so the render window slides with the user.
-      const carousel = this.$refs[this.carouselComponentRef] as any;
-      const swiper = carousel?.swiper;
-
-      if (!swiper || typeof swiper.on !== 'function') {
-        return;
-      }
-
-      swiper.on('slideChange', () => {
-        // `realIndex` reflects the underlying slide index when loop mode
-        // duplicates slides; `activeIndex` would include those duplicates.
-        const next =
-          typeof swiper.realIndex === 'number'
-            ? swiper.realIndex
-            : swiper.activeIndex;
-
-        if (typeof next === 'number') {
-          this.currentImageIndex = next;
-        }
-      });
-    },
   },
 });

package/src/brand-page/components/image-gallery/ImageGalleryModal.vue

@@ -6,8 +6,6 @@
     @modal-closed="onImageModalClose"
   >
     <Carousel
-      v-if="isImageModalVisible"
-      :ref="carouselComponentRef"
       :classes="['tw-h-full', 'tw-max-h-full', 'tw-justify-center']"
       :cards="carouselImages"
       :options="swiperOptions"
@@ -15,7 +13,6 @@
       :show-bullets="false"
       :show-controls="showCarouselControls"
       :navigation-unique-indexer="navigationUniqueIndexer"
-      @on-carousel-load="onCarouselLoaded"
     >
       <template #arrow-left>
         <div id="button-prev" :class="navigationPrevClass">
@@ -33,7 +30,7 @@
           />
         </div>
       </template>
-      <template #slide="{ slide, index }">
+      <template #slide="{ slide }">
         <div
           class="tw-text-center tw-flex tw-flex-col tw-items-center tw-justify-center tw-overflow-auto tw-h-auto"
           :class="{ 'tw-justify-center': !slide.imageTitle }"
@@ -44,14 +41,10 @@
           >
             {{ slide.imageTitle }}
           </h3>
-          <Loader
-            v-if="isImageModalLoading && index === currentImageIndex"
-            class="tw-m-28"
-          />
+          <Loader v-if="isImageModalLoading" class="tw-m-28" />
           <FallbackImage
-            v-if="isSlideInRenderWindow(index)"
-            :key="`modal-slide-${index}`"
-            :ref="index === currentImageIndex ? imageModalImageRef : undefined"
+            :key="`modal-slide-${currentImageIndex}`"
+            :ref="imageModalImageRef"
             :image-url="slide.imageUrl"
             class="c-modal-image"
             :alt="slide.imageTitle || altText"
@@ -61,7 +54,6 @@
             @image-loading="imageLoading"
             @image-error="checkImageLoading(true)"
           />
-          <div v-else class="c-modal-image-placeholder" />
         </div>
       </template>
       <template #arrow-right>
@@ -123,9 +115,4 @@ export default {
   @apply tw-max-w-full;
   max-height: 90vh;
 }
-
-.c-modal-image-placeholder {
-  @apply tw-w-full;
-  height: 90vh;
-}
 </style>