fix(esl-carousel): improve collision handling, introduce special type of Error - ESLCarouselNavRejection it represents renderer rejection but not produce noisy log in console

Author: ala-n

packages/esl/src/esl-carousel/core/esl-carousel.errors.ts

@@ -0,0 +1,14 @@
+/**
+ * Custom error that ESLCarousel throws when navigation is rejected due to ongoing animation.
+ * By default, it does not include a stack trace to avoid cluttering the console.
+ */
+export class ESLCarouselNavRejection extends Error {
+  /** Debug mode to enable stack trace in the error log */
+  public static debug = false;
+
+  constructor(index: number | string) {
+    super(`Navigation skipped to index ${index} due to ongoing animation`);
+    this.name = '[ESL] Carousel Rejection';
+    if (!ESLCarouselNavRejection.debug) this.stack = undefined; // disable stack trace
+  }
+}

packages/esl/src/esl-carousel/core/esl-carousel.renderer.ts

@@ -142,20 +142,21 @@ export abstract class ESLCarouselRenderer implements ESLCarouselConfig {
     const details = {...params, direction, indexesBefore, indexesAfter};
     if (!this.$carousel.dispatchEvent(ESLCarouselSlideEvent.create('BEFORE', details))) return;
 
-    this.$carousel.dispatchEvent(ESLCarouselSlideEvent.create('CHANGE', details));
     this.setPreActive(index);
+    this.$carousel.dispatchEvent(ESLCarouselSlideEvent.create('CHANGE', details));
 
     this.transitionDuration = params.stepDuration;
     try {
       await this.onBeforeAnimate(index, direction, params);
       await this.onAnimate(index, direction, params);
       await this.onAfterAnimate(index, direction, params);
+
+      this.setActive(index, {direction, ...params});
     } catch (e: unknown) {
-      console.error(e);
+      if (e instanceof Error) throw e;
+    } finally {
+      this.transitionDuration = null;
     }
-    this.transitionDuration = null;
-
-    this.setActive(index, {direction, ...params});
   }
 
   /** Pre-processing animation action. */

packages/esl/src/esl-carousel/core/esl-carousel.ts

@@ -228,7 +228,7 @@ export class ESLCarousel extends ESLBaseElement {
     const detail = e.detail || {};
     if (!isMatches(this, detail.match)) return;
     const index = this.$slides.findIndex(($slide) => $slide.contains(e.target as Element));
-    if (index !== -1 && !this.isActive(index)) this.goTo(index);
+    if (index !== -1 && !this.isActive(index)) this.goTo(index).catch(console.debug);
   }
 
   /** @returns slides that are processed by the current carousel. */

packages/esl/src/esl-carousel/plugin/autoplay/esl-carousel.autoplay.mixin.ts

@@ -117,7 +117,7 @@ export class ESLCarouselAutoplayMixin extends ESLCarouselPlugin<ESLCarouselAutop
   protected async _onCycle(exec?: boolean): Promise<void> {
     this._duration && window.clearTimeout(this._duration);
     this._duration = null;
-    if (exec) await this.$host?.goTo(this.config.command);
+    if (exec) await this.$host?.goTo(this.config.command).catch(console.debug);
     if (!this.enabled || this.active) return;
     const {duration} = this;
     this._duration = window.setTimeout(() => this._onCycle(true), duration);

packages/esl/src/esl-carousel/plugin/dots/esl-carousel.nav.dots.ts

@@ -189,7 +189,7 @@ export class ESLCarouselNavDots extends ESLBaseElement {
     if (!this.$carousel || typeof this.$carousel.goTo !== 'function') return;
     const $btn = event.$delegate as HTMLElement;
     const target = $btn.getAttribute('esl-carousel-dot') || '';
-    this.$carousel.goTo(`group:${+target}`);
+    this.$carousel.goTo(`group:${+target}`).catch(console.debug);
     (this.tabIndex >= 0 ? this : $btn).focus({preventScroll: true});
   }
 

packages/esl/src/esl-carousel/plugin/keyboard/esl-carousel.keyboard.mixin.ts

@@ -28,13 +28,21 @@ export class ESLCarouselKeyboardMixin extends ESLCarouselPlugin<ESLCarouselKeybo
     return this.$host.config.vertical ? ARROW_UP : ARROW_LEFT;
   }
 
+  /** @returns result command for carousel */
+  protected getCommandFromKey(key: string): string {
+    const {command} = this.config;
+    if (command === 'none') return '';
+    if (key === this.nextKey) return `${command || 'slide'}:next`;
+    if (key === this.prevKey) return `${command || 'slide'}:prev`;
+    return '';
+  }
+
   /** Handles `keydown` event */
   @listen('keydown')
   protected _onKeydown(event: KeyboardEvent): void {
-    const {command} = this.config;
-    if (!this.$host || this.$host.animating || command === 'none') return;
-    if (event.key === this.nextKey) this.$host.goTo(`${command || 'slide'}:next`);
-    if (event.key === this.prevKey) this.$host.goTo(`${command || 'slide'}:prev`);
+    if (!this.$host || this.$host.animating) return;
+    const command = this.getCommandFromKey(event.key);
+    command && this.$host.goTo(command).catch(console.debug);
   }
 }
 

packages/esl/src/esl-carousel/plugin/nav/esl-carousel.nav.mixin.ts

@@ -76,7 +76,7 @@ export class ESLCarouselNavMixin extends ESLMixinElement {
   @listen('click')
   protected _onClick(e: PointerEvent): void {
     if (!this.$carousel || typeof this.$carousel.goTo !== 'function') return;
-    this.$carousel.goTo(this.command).catch(console.error);
+    this.$carousel.goTo(this.command).catch(console.debug);
     e.preventDefault();
   }
 }

packages/esl/src/esl-carousel/plugin/relation/esl-carousel.relation.mixin.ts

@@ -44,7 +44,7 @@ export class ESLCarouselRelateToMixin extends ESLCarouselPlugin<ESLCarouselRelat
   @listen({event: ($this: ESLCarouselRelateToMixin) => $this.event})
   protected _onSlideChange(e: ESLCarouselSlideEvent): void {
     if (!this.$target || e.activator === this) return;
-    this.$target.goTo(this.$host.activeIndex, {activator: this});
+    this.$target.goTo(this.$host.activeIndex, {activator: this}).catch(console.debug);
   }
 }
 

packages/esl/src/esl-carousel/plugin/touch/esl-carousel.touch.mixin.ts

@@ -143,7 +143,7 @@ export class ESLCarouselTouchMixin extends ESLCarouselPlugin<ESLCarouselTouchCon
     // Swipe final check
     if (this.isSwipeMode && offset && !this.isPrevented && this.isSwipeAccepted(event)) {
       const target = `${this.config.swipeType}:${offset < 0 ? 'next' : 'prev'}`;
-      if (this.$host.canNavigate(target)) this.$host.goTo(target, {activator: this});
+      if (this.$host.canNavigate(target)) this.$host.goTo(target, {activator: this}).catch(console.debug);
     }
   }
 }

packages/esl/src/esl-carousel/plugin/wheel/esl-carousel.wheel.mixin.ts

@@ -77,7 +77,7 @@ export class ESLCarouselWheelMixin extends ESLCarouselPlugin<ESLCarouselWheelCon
     if (!this.$host || this.$host.animating) return;
     const delta = this.isVertical ? e.deltaY : e.deltaX;
     const direction = delta > 0 ? 'next' : 'prev';
-    this.$host?.goTo(`${this.config.command || 'slide'}:${direction}`);
+    this.$host?.goTo(`${this.config.command || 'slide'}:${direction}`).catch(console.debug);
   }
 }