From d2988d2047a80bdcd4b1f341a4172927e809d0e4 Mon Sep 17 00:00:00 2001
From: Yurii Zusik <yurii.zusik@bigcommerce.com>
Date: Sun, 14 Mar 2021 14:27:52 +0200
Subject: [PATCH] image helpers updated to work with clones and slides quantity
 refactored

---
 .../getActiveSlideIdxAndSlidesQuantity.js     | 20 ++++++++----------
 .../carousel/utils/getActiveSlideInfo.js      | 16 +++++++-------
 .../carousel/utils/handleImageAspectRatio.js  | 21 +++++++++++--------
 .../common/carousel/utils/handleImageLoad.js  | 10 +++++----
 templates/components/carousel.html            |  4 ++--
 templates/components/products/carousel.html   |  2 +-
 6 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/assets/js/theme/common/carousel/utils/getActiveSlideIdxAndSlidesQuantity.js b/assets/js/theme/common/carousel/utils/getActiveSlideIdxAndSlidesQuantity.js
index 99ec591303..352a82dc80 100644
--- a/assets/js/theme/common/carousel/utils/getActiveSlideIdxAndSlidesQuantity.js
+++ b/assets/js/theme/common/carousel/utils/getActiveSlideIdxAndSlidesQuantity.js
@@ -1,21 +1,19 @@
 export default (slideCount, slidesToShow, slidesToScroll, $slides) => {
     const lastVisibleIdx = $slides.get().reduce((acc, curr, idx) => {
-         if ($(curr).hasClass('slick-active')) return idx;
-         return acc;
+        if ($(curr).hasClass('slick-active')) return idx;
+        return acc;
     }, -1);
 
-    let activeSlideIdx;
-    let slidesQuantity;
-    
-    activeSlideIdx = lastVisibleIdx < slidesToShow
+    const activeSlideIdx = lastVisibleIdx < slidesToShow
         ? 0
         : Math.ceil((lastVisibleIdx + 1 - slidesToShow) / slidesToScroll);
 
-    slidesQuantity = slideCount === 0
-        ? 0
-        : slideCount <= slidesToShow
-        ? 1
-        : Math.ceil((slideCount - slidesToShow) / slidesToScroll) + 1;
+    let slidesQuantity;
+    if (slideCount === 0) {
+        slidesQuantity = 0;
+    } else if (slideCount <= slidesToShow) {
+        slidesQuantity = 1;
+    } else slidesQuantity = Math.ceil((slideCount - slidesToShow) / slidesToScroll) + 1;
 
     // FYI - one slide can contain several card items for product carousel
     return {
diff --git a/assets/js/theme/common/carousel/utils/getActiveSlideInfo.js b/assets/js/theme/common/carousel/utils/getActiveSlideInfo.js
index 4e5b2cbeda..4cd8a9e74d 100644
--- a/assets/js/theme/common/carousel/utils/getActiveSlideInfo.js
+++ b/assets/js/theme/common/carousel/utils/getActiveSlideInfo.js
@@ -1,18 +1,16 @@
 export default ({ $slider }, isAnalyzedDataAttr) => {
-    const $activeSlide = $slider.find('.slick-current .heroCarousel-slide');
-    const isAnalyzedSlide = $activeSlide.data(isAnalyzedDataAttr);
+    const $activeSlide = $slider.find('.slick-current');
+    const $activeSlideContent = $activeSlide.find('.heroCarousel-slide');
+    const isAnalyzedSlide = $activeSlideContent.data(isAnalyzedDataAttr);
 
     if (isAnalyzedSlide) return { isAnalyzedSlide };
 
-    const $activeSlideImg = $activeSlide.find('.heroCarousel-image');
-    const activeSlideImgSrc = $activeSlideImg.attr('src');
-    const $slidesWithSameImgSrc = $slider.find('.heroCarousel-slide').filter((idx, slide) => (
-        $(slide).find('.heroCarousel-image').attr('src') === activeSlideImgSrc
-    ));
+    const $activeSlideImg = $activeSlideContent.find('.heroCarousel-image');
+    const $activeSlideAndClones = $slider.find(`[data-hero-slide=${$activeSlide.data('hero-slide')}]`);
 
     return {
-        $activeSlide,
+        $activeSlideContent,
         $activeSlideImg,
-        $slidesWithSameImgSrc,
+        $activeSlideAndClones,
     };
 };
diff --git a/assets/js/theme/common/carousel/utils/handleImageAspectRatio.js b/assets/js/theme/common/carousel/utils/handleImageAspectRatio.js
index e9182bda92..b4166c92a4 100644
--- a/assets/js/theme/common/carousel/utils/handleImageAspectRatio.js
+++ b/assets/js/theme/common/carousel/utils/handleImageAspectRatio.js
@@ -17,26 +17,29 @@ const defineClass = (imageAspectRatio) => {
     }
 };
 
-const updateImages = ($slides, $slide, imageNode) => {
-    $slides.each((idx, slide) => $(slide).data(IS_ANALYZED_DATA_ATTR, true));
-    if ($slide.find('.heroCarousel-content').length) return;
+const updateImages = ($slides, imageNode) => {
     const imageAspectRatio = imageNode.naturalHeight / imageNode.naturalWidth;
-    $slides.each((idx, slide) => $(slide).addClass(defineClass(imageAspectRatio)));
-}
+    $slides.each((idx, slide) => $(slide).find('.heroCarousel-slide').addClass(defineClass(imageAspectRatio)));
+};
 
 export default ({ delegateTarget }, carousel) => {
     const {
         isAnalyzedSlide,
-        $activeSlide,
         $activeSlideImg,
-        $slidesWithSameImgSrc,
+        $activeSlideAndClones,
     } = getActiveSlideInfo(carousel || delegateTarget.slick, IS_ANALYZED_DATA_ATTR);
 
     if (isAnalyzedSlide) return;
 
+    $activeSlideAndClones.each((idx, slide) => $(slide).data(IS_ANALYZED_DATA_ATTR, true));
+
+    if ($activeSlideAndClones.first().find('.heroCarousel-content').length) return;
+
     const imageNode = $activeSlideImg[0];
 
     if (imageNode.complete && imageNode.naturalHeight !== 0) {
-        updateImages($slidesWithSameImgSrc, $activeSlide, imageNode);
-    } else $activeSlideImg.load(() => updateImages($slidesWithSameImgSrc, $activeSlide, imageNode));
+        updateImages($activeSlideAndClones, imageNode);
+    } else if (!imageNode.complete) {
+        $activeSlideImg.load(() => updateImages($activeSlideAndClones, imageNode));
+    }
 };
diff --git a/assets/js/theme/common/carousel/utils/handleImageLoad.js b/assets/js/theme/common/carousel/utils/handleImageLoad.js
index f98307cb9a..26af5a5d33 100644
--- a/assets/js/theme/common/carousel/utils/handleImageLoad.js
+++ b/assets/js/theme/common/carousel/utils/handleImageLoad.js
@@ -6,17 +6,19 @@ const IS_ANALYZED_DATA_ATTR = 'image-load-analyzed';
 export default (e, carousel) => {
     const {
         isAnalyzedSlide,
-        $activeSlide,
+        $activeSlideContent,
         $activeSlideImg,
     } = getActiveSlideInfo(carousel, IS_ANALYZED_DATA_ATTR);
 
     if (isAnalyzedSlide) return;
 
-    $activeSlide.data(IS_ANALYZED_DATA_ATTR, true);
+    $activeSlideContent.data(IS_ANALYZED_DATA_ATTR, true);
 
     const imageNode = $activeSlideImg[0];
 
     if (imageNode.complete && imageNode.naturalHeight === 0) {
-        $activeSlide.addClass(IMAGE_ERROR_CLASS);
-    } else $activeSlideImg.error(() =>$activeSlide.addClass(IMAGE_ERROR_CLASS));
+        $activeSlideContent.addClass(IMAGE_ERROR_CLASS);
+    } else if (!imageNode.complete) {
+        $activeSlideImg.error(() => $activeSlideContent.addClass(IMAGE_ERROR_CLASS));
+    }
 };
diff --git a/templates/components/carousel.html b/templates/components/carousel.html
index 294b7637e9..c5d9a61d61 100644
--- a/templates/components/carousel.html
+++ b/templates/components/carousel.html
@@ -11,9 +11,9 @@
 >
     {{#each carousel.slides}}
     {{#if button_text}}
-    <div data-hero-slide>
+    <div data-hero-slide="{{@index}}">
     {{else}}
-    <a href="{{url}}" data-hero-slide aria-label="{{#if this.alt_text.length '!=' 0}}{{this.alt_text}}{{else}}{{lang 'carousel.slide_number' slide_number=(add @index 1)}}{{/if}}">
+    <a href="{{url}}" data-hero-slide="{{@index}}" aria-label="{{#if this.alt_text.length '!=' 0}}{{this.alt_text}}{{else}}{{lang 'carousel.slide_number' slide_number=(add @index 1)}}{{/if}}">
     {{/if}}
         <div class="heroCarousel-slide {{#if ../theme_settings.homepage_stretch_carousel_images}}stretch{{/if}} {{#if @first}}heroCarousel-slide--first{{/if}}">
             <div class="heroCarousel-image-wrapper">
diff --git a/templates/components/products/carousel.html b/templates/components/products/carousel.html
index 8014080f42..20bc2364a5 100644
--- a/templates/components/products/carousel.html
+++ b/templates/components/products/carousel.html
@@ -25,7 +25,7 @@
     }'
 >
     {{#each products}}
-    <div data-product-slide class="productCarousel-slide">
+    <div data-product-slide="{{@index}}" class="productCarousel-slide">
         {{> components/products/card settings=../settings theme_settings=../theme_settings customer=../customer event="list" position=(add @index 1)}}
     </div>
     {{/each}}