fix(esl-carousel): carousel now uses average of the real slide sizes …

…during move action routines Co-authored-by: Anna Barmina <abarmina@exadel.com>
exadel-inc · Jul 30, 2024 · 2472723 · 2472723
1 parent 537db39
commit 2472723
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/src/modules/esl-carousel/renderers/esl-carousel.default.renderer.ts b/src/modules/esl-carousel/renderers/esl-carousel.default.renderer.ts
@@ -23,11 +23,16 @@ export class ESLDefaultCarouselRenderer extends ESLCarouselRenderer {
 
   /** Slides gap size */
   protected gap: number = 0;
-  /** Slide size cached value */
-  protected slideSize: number = 0;
   /** First index of active slides. */
   protected currentIndex: number = 0;
 
+  /** Actual slide size (uses average) */
+  protected get slideSize(): number {
+    return this.$slides.reduce((size, $slide) => {
+      return size + (this.vertical ? $slide.offsetHeight : $slide.offsetWidth);
+    }, 0) / this.$slides.length;
+  }
+
   /**
    * Processes binding of defined renderer to the carousel {@link ESLCarousel}.
    * Prepare to renderer animation.
@@ -210,7 +215,7 @@ export class ESLDefaultCarouselRenderer extends ESLCarouselRenderer {
 
     this.gap = parseFloat(this.vertical ? areaStyles.rowGap : areaStyles.columnGap);
     const areaSize = parseFloat(this.vertical ? areaStyles.height : areaStyles.width);
-    this.slideSize = Math.floor((areaSize - this.gap * (this.count - 1)) / this.count);
-    this.$area.style.setProperty(ESLDefaultCarouselRenderer.SIZE_PROP, this.slideSize + 'px');
+    const slideSize = Math.floor((areaSize - this.gap * (this.count - 1)) / this.count);
+    this.$area.style.setProperty(ESLDefaultCarouselRenderer.SIZE_PROP, slideSize + 'px');
   }
 }
diff --git a/src/modules/esl-carousel/renderers/esl-carousel.grid.renderer.ts b/src/modules/esl-carousel/renderers/esl-carousel.grid.renderer.ts
@@ -109,7 +109,7 @@ export class ESLGridCarouselRenderer extends ESLDefaultCarouselRenderer {
     this.gap = parseFloat(this.vertical ? areaStyles.rowGap : areaStyles.columnGap);
     const areaSize = parseFloat(this.vertical ? areaStyles.height : areaStyles.width);
     const count = Math.floor(this.count / this.ROWS);
-    this.slideSize = Math.floor((areaSize - this.gap * (count - 1)) / count);
-    this.$area.style.setProperty(ESLDefaultCarouselRenderer.SIZE_PROP, this.slideSize + 'px');
+    const slideSize = Math.floor((areaSize - this.gap * (count - 1)) / count);
+    this.$area.style.setProperty(ESLDefaultCarouselRenderer.SIZE_PROP, slideSize + 'px');
   }
 }