Merge pull request #2170 from exadel-inc/feat/esl-carousel-preactive

feat: esl carousel add pre-active marker
exadel-inc · Jan 25, 2024 · e762179 · e762179
2 parents e4fb592 + cc70537
commit e762179
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/src/modules/esl-carousel/core/esl-carousel.renderer.ts b/src/modules/esl-carousel/core/esl-carousel.renderer.ts
@@ -95,6 +95,8 @@ export abstract class ESLCarouselRenderer implements ESLCarouselConfig {
       related: index
     }))) return;
 
+    this.setPreActive(index);
+
     try {
       await this.onBeforeAnimate(index, direction);
       await this.onAnimate(index, direction);
@@ -103,6 +105,7 @@ export abstract class ESLCarouselRenderer implements ESLCarouselConfig {
       console.error(e);
     }
 
+    this.clearPreActive();
     this.setActive(index);
 
     this.$carousel.dispatchEvent(ESLCarouselSlideEvent.create('AFTER', {
@@ -127,13 +130,28 @@ export abstract class ESLCarouselRenderer implements ESLCarouselConfig {
 
   /** Sets active slides from passed index **/
   public setActive(from: number): void {
-    const count = Math.min(this.count, this.size);
     this.$carousel.$slides.forEach((el) => el.active = false);
+    const count = Math.min(this.count, this.size);
     for (let i = 0; i < count; i++) {
       this.$carousel.slideAt(from + i).active = true;
     }
   }
 
+  public setPreActive(from: number): void {
+    this.clearPreActive();
+    const count = Math.min(this.count, this.size);
+    for (let i = from; i < from + count; i++) {
+      const $slide = this.$carousel.slideAt(i);
+      if (!$slide.active) {
+        $slide.preActive = true;
+      }
+    }
+  }
+
+  public clearPreActive(): void {
+    this.$carousel.$slides.forEach((el) => el.preActive = false);
+  }
+
   // Register API
   @memoize()
   public static get registry(): ESLCarouselRendererRegistry {

diff --git a/src/modules/esl-carousel/core/esl-carousel.slide.ts b/src/modules/esl-carousel/core/esl-carousel.slide.ts
@@ -13,6 +13,7 @@ import type {ESLCarousel} from './esl-carousel';
 export class ESLCarouselSlide extends ESLBaseElement {
   /** @returns if the slide is active */
   @boolAttr() public active: boolean;
+  @boolAttr() public preActive: boolean;
 
   @memoize()
   public get $carousel(): ESLCarousel | undefined {

diff --git a/src/modules/esl-carousel/core/esl-carousel.ts b/src/modules/esl-carousel/core/esl-carousel.ts
@@ -263,7 +263,7 @@ export class ESLCarousel extends ESLBaseElement {
     this.renderer.navigate(index, direction, params);
   }
 
-  /** @returns side by index (supports not normalized indexes) */
+  /** @returns slide by index (supports not normalized indexes) */
   public slideAt(index: number): ESLCarouselSlide {
     return this.$slides[normalizeIndex(index, this.$slides.length)];
   }