Repository: exadel-inc/esl
Pull request #2353 (2024-04-17 15:55:45)

fix(site): `esl-animate` example page wrong animation
Closes: #2346 


Patch:
diff --git a/site/views/examples/animate.njk b/site/views/examples/animate.njk
index bd7336a7a..d9a6fd065 100644
--- a/site/views/examples/animate.njk
+++ b/site/views/examples/animate.njk
@@ -24,19 +24,19 @@ aside:
       </script>
 
       <script type="text/html"
-              label="Grouped and repetitive animation"
+              label="Grouped and repetitive animation with custom delay"
               uip-snippet
               uip-snippet-js="js-snippet-animate-element">
         <ul class="round simple-grid">
           <esl-animate class="esl-animate-group" target="::parent::child(li)" group repeat></esl-animate>
           {% for i in range(0, 20) -%}
-          <li class="bg-blue round esl-animate-slide up simple-grid-cell {{ 'hide-xs' if i >= 12 }}"></li>
+          <li class="bg-blue round esl-animate-slide esl-animate-fade simple-grid-cell {{ 'hide-xs' if i >= 12 }}"></li>
           {%- endfor %}
         </ul>
       </script>
 
       <script type="text/html"
-              label="Grouped animation with custom delay by mixin"
+              label="Grouped animation by mixin"
               uip-snippet
               uip-snippet-js="js-snippet-animate-mixin">
         <button class="btn btn-sec-orange"
@@ -45,7 +45,7 @@ aside:
         </button>
         <ul class="round simple-grid">
           {% for i in range(0, 20) -%}
-          <li class="re-1 bg-orange round esl-animate-slide up left simple-grid-cell {{ 'hide-xs' if i >= 12 }}"
+          <li class="re-1 bg-orange round esl-animate-slide esl-animate-fade simple-grid-cell {{ 'hide-xs' if i >= 12 }}"
               esl-animate="{group: true, groupDelay: 50}"></li>
           {%- endfor %}
         </ul>
@@ -62,7 +62,7 @@ aside:
 
       <uip-snippets class="uip-toolbar" dropdown-view="@xs"></uip-snippets>
       <uip-preview></uip-preview>
-      <uip-settings target="esl-animate" label="Settings" resizable vertical="@+sm">
+      <uip-settings target=".esl-animate-slide" label="Settings" resizable vertical="@+sm">
         <uip-select-setting label="Animation type:" attribute="class" mode="append">
           <option value="esl-animate-fade">Fade</option>
           <option value="up">Slide Up</option>
diff --git a/src/modules/esl-event-listener/core/targets/intersection.event.ts b/src/modules/esl-event-listener/core/targets/intersection.event.ts
index b4ab66af4..771880f95 100644
--- a/src/modules/esl-event-listener/core/targets/intersection.event.ts
+++ b/src/modules/esl-event-listener/core/targets/intersection.event.ts
@@ -1,20 +1,11 @@
 import {overrideEvent} from '../../../esl-utils/dom/events/misc';
 
-export type ESLIntersectionEventType = typeof ESLIntersectionEvent.TYPE | typeof ESLIntersectionEvent.IN | typeof ESLIntersectionEvent.OUT;
-
 /**
  * An event that is fired when an element intersects with the device viewport by the {@link ESLIntersectionTarget}.
  * Based on the {@link IntersectionObserverEntry} object.
  */
 export class ESLIntersectionEvent extends Event implements IntersectionObserverEntry {
-  /** Type of event that will be dispatched on viewport exit */
-  public static readonly OUT = 'intersects:out';
-  /** Type of event that will be dispatched on viewport enter */
-  public static readonly IN = 'intersects:in';
-  /** Type of event that will be dispatched on both viewport enter and exit */
-  public static readonly TYPE = 'intersects';
-  /** @deprecated use {@link TYPE} instead */
-  public static readonly type = this.TYPE;
+  public static readonly type = 'intersects';
 
   /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/IntersectionObserverEntry/target) */
   public override readonly target: Element;
@@ -31,22 +22,14 @@ export class ESLIntersectionEvent extends Event implements IntersectionObserverE
   /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/IntersectionObserverEntry/time) */
   public readonly time: DOMHighResTimeStamp;
 
-  protected constructor(eventName: ESLIntersectionEventType, target: Element) {
-    super(eventName, {bubbles: false, cancelable: false});
+  protected constructor(target: Element) {
+    super(ESLIntersectionEvent.type, {bubbles: false, cancelable: false});
     overrideEvent(this, 'target', target);
   }
 
-  /** Validates event name. Accepted values are 'intersects:out', 'intersects:in', 'intersects' */
-  public static isValidEventType(event: string): event is ESLIntersectionEventType {
-    return event === ESLIntersectionEvent.TYPE || event === ESLIntersectionEvent.IN || event === ESLIntersectionEvent.OUT;
-  }
-
-  /** Creates {@link ESLIntersectionEvent} from {@link ESLIntersectionEvent}
-    * @param eventName - Custom event name ('intersects' by default. Accepted values are 'intersects:out', 'intersects:in', 'intersects').
-    * @param entry - The intersection observer entry.
-   */
-  public static fromEntry(eventName: ESLIntersectionEventType, entry: IntersectionObserverEntry): ESLIntersectionEvent {
-    const event = new ESLIntersectionEvent(eventName, entry.target);
+  /** Creates {@link ESLIntersectionEvent} from {@link ESLIntersectionEvent} */
+  public static fromEntry(entry: IntersectionObserverEntry): ESLIntersectionEvent {
+    const event = new ESLIntersectionEvent(entry.target);
     const {
       boundingClientRect,
       intersectionRatio,
diff --git a/src/modules/esl-event-listener/core/targets/intersection.target.ts b/src/modules/esl-event-listener/core/targets/intersection.target.ts
index ca47a9010..1594fc107 100644
--- a/src/modules/esl-event-listener/core/targets/intersection.target.ts
+++ b/src/modules/esl-event-listener/core/targets/intersection.target.ts
@@ -4,8 +4,6 @@ import {wrap} from '../../../esl-utils/misc/array';
 
 import {ESLIntersectionEvent} from './intersection.event';
 
-import type {ESLIntersectionEventType} from './intersection.event';
-
 export {ESLIntersectionEvent};
 
 /**
@@ -52,35 +50,32 @@ export class ESLIntersectionTarget extends SyntheticEventTarget {
   /** Internal method to handle {@link IntersectionObserver} entry change */
   protected handleChange(entries: IntersectionObserverEntry[]): void {
     entries.forEach(
-      (entry) => {
-        this.dispatchEvent(ESLIntersectionEvent.fromEntry(entry.isIntersecting ? ESLIntersectionEvent.IN : ESLIntersectionEvent.OUT, entry));
-        this.dispatchEvent(ESLIntersectionEvent.fromEntry(ESLIntersectionEvent.TYPE, entry));
-      }
+      (entry) => this.dispatchEvent(ESLIntersectionEvent.fromEntry(entry))
     );
   }
 
   /** Subscribes to the observed target {@link Element} changes */
   public override addEventListener(callback: EventListener): void;
-  public override addEventListener(event: ESLIntersectionEventType, callback: EventListener): void;
+  public override addEventListener(event: typeof ESLIntersectionEvent.type, callback: EventListener): void;
   public override addEventListener(event: any, callback: EventListener = event): void {
-    if (typeof event !== 'string') event = ESLIntersectionEvent.TYPE;
-    if (!ESLIntersectionEvent.isValidEventType(event)) {
+    if (typeof event !== 'string') event = ESLIntersectionEvent.type;
+    if (event !== ESLIntersectionEvent.type) {
       console.warn(`[ESL]: ESLIntersectionTarget does not support '${event}' type`);
       return;
     }
-    super.addEventListener(event, callback);
-    if (this.getEventListeners(event).length > 1) return;
+    super.addEventListener(ESLIntersectionEvent.type, callback);
+    if (this.getEventListeners(ESLIntersectionEvent.type).length > 1) return;
     this.targets.forEach((target: Element) => this.observer$$.observe(target));
   }
 
   /** Unsubscribes from the observed target {@link Element} changes */
   public override removeEventListener(callback: EventListener): void;
-  public override removeEventListener(event: ESLIntersectionEventType, callback: EventListener): void;
+  public override removeEventListener(event: typeof ESLIntersectionEvent.type, callback: EventListener): void;
   public override removeEventListener(event: any, callback: EventListener = event): void {
-    if (typeof event !== 'string') event = ESLIntersectionEvent.TYPE;
-    if (!ESLIntersectionEvent.isValidEventType(event)) return;
+    if (typeof event !== 'string') event = ESLIntersectionEvent.type;
+    if (event !== ESLIntersectionEvent.type) return;
     super.removeEventListener(event, callback);
-    if (this.hasEventListener(event)) return;
+    if (this.hasEventListener(ESLIntersectionEvent.type)) return;
     this.observer$$.disconnect();
   }
 }
diff --git a/src/modules/esl-event-listener/core/targets/resize.target.event.ts b/src/modules/esl-event-listener/core/targets/resize.target.event.ts
index c920ddbbf..4770cccf5 100644
--- a/src/modules/esl-event-listener/core/targets/resize.target.event.ts
+++ b/src/modules/esl-event-listener/core/targets/resize.target.event.ts
@@ -4,9 +4,7 @@ import type {ESLResizeObserverTarget} from './resize.target';
 
 /** Custom event that {@link ESLResizeObserverTarget} produces */
 export class ESLElementResizeEvent extends UIEvent implements ResizeObserverEntry {
-  public static readonly TYPE = 'resize';
-  /** @deprecated Use {@link TYPE} instead */
-  public static readonly type = this.TYPE;
+  public static readonly type = 'resize';
 
   /** A reference to the {@link Element} or SVGElement being observed */
   public override readonly target: Element;
@@ -38,7 +36,7 @@ export class ESLElementResizeEvent extends UIEvent implements ResizeObserverEntr
   public readonly devicePixelContentBoxSize: readonly ResizeObserverSize[];
 
   protected constructor(target: Element) {
-    super(ESLElementResizeEvent.TYPE, {bubbles: false, cancelable: false});
+    super(ESLElementResizeEvent.type, {bubbles: false, cancelable: false});
     overrideEvent(this, 'target', target);
   }
 
diff --git a/src/modules/esl-event-listener/core/targets/resize.target.ts b/src/modules/esl-event-listener/core/targets/resize.target.ts
index 0ac6100ce..bcefeb0b9 100644
--- a/src/modules/esl-event-listener/core/targets/resize.target.ts
+++ b/src/modules/esl-event-listener/core/targets/resize.target.ts
@@ -54,7 +54,7 @@ export class ESLResizeObserverTarget extends SyntheticEventTarget {
 
   /** Subscribes to the observed target {@link Element} changes */
   public override addEventListener(callback: EventListener): void;
-  public override addEventListener(event: typeof ESLElementResizeEvent.TYPE, callback: EventListener): void;
+  public override addEventListener(event: typeof ESLElementResizeEvent.type, callback: EventListener): void;
   public override addEventListener(event: any, callback: EventListener = event): void {
     if (typeof event === 'string' && event !== 'resize') {
       console.warn(`[ESL]: ESLResizeObserverTarget does not support '${event}' type`);
@@ -68,7 +68,7 @@ export class ESLResizeObserverTarget extends SyntheticEventTarget {
 
   /** Unsubscribes from the observed target {@link Element} changes */
   public override removeEventListener(callback: EventListener): void;
-  public override removeEventListener(event: typeof ESLElementResizeEvent.TYPE, callback: EventListener): void;
+  public override removeEventListener(event: typeof ESLElementResizeEvent.type, callback: EventListener): void;
   public override removeEventListener(event: any, callback: EventListener = event): void {
     if (typeof event === 'string' && event !== 'resize') return;
 
diff --git a/src/modules/esl-event-listener/core/targets/swipe.target.event.ts b/src/modules/esl-event-listener/core/targets/swipe.target.event.ts
index 26bde0d6c..96b641fb7 100644
--- a/src/modules/esl-event-listener/core/targets/swipe.target.event.ts
+++ b/src/modules/esl-event-listener/core/targets/swipe.target.event.ts
@@ -31,9 +31,7 @@ export interface ESLSwipeGestureEventInfo {
  * Swipe event dispatched by {@link ESLSwipeGestureTarget}
  */
 export class ESLSwipeGestureEvent extends UIEvent implements ESLSwipeGestureEventInfo {
-  public static readonly TYPE = 'swipe';
-  /** @deprecated Use {@link TYPE} instead */
-  public static readonly type = this.TYPE;
+  public static readonly type = 'swipe';
 
   public override readonly target: Element;
 
@@ -47,7 +45,7 @@ export class ESLSwipeGestureEvent extends UIEvent implements ESLSwipeGestureEven
   public readonly duration: number;
 
   protected constructor(target: Element, swipeInfo: ESLSwipeGestureEventInfo) {
-    super(ESLSwipeGestureEvent.TYPE, {bubbles: false, cancelable: true});
+    super(ESLSwipeGestureEvent.type, {bubbles: false, cancelable: true});
     overrideEvent(this, 'target', target);
     Object.assign(this, swipeInfo);
   }
diff --git a/src/modules/esl-event-listener/core/targets/swipe.target.ts b/src/modules/esl-event-listener/core/targets/swipe.target.ts
index 86a1375b0..1e2aa493a 100644
--- a/src/modules/esl-event-listener/core/targets/swipe.target.ts
+++ b/src/modules/esl-event-listener/core/targets/swipe.target.ts
@@ -149,7 +149,7 @@ export class ESLSwipeGestureTarget extends SyntheticEventTarget {
    * Subscribes to pointerup and pointerdown event
    */
   public override addEventListener(callback: EventListener): void;
-  public override addEventListener(event: typeof ESLSwipeGestureEvent.TYPE, callback: EventListener): void;
+  public override addEventListener(event: typeof ESLSwipeGestureEvent.type, callback: EventListener): void;
   public override addEventListener(event: any, callback: EventListener = event): void {
     super.addEventListener(event, callback);
 
@@ -162,7 +162,7 @@ export class ESLSwipeGestureTarget extends SyntheticEventTarget {
    * Unsubscribes from the observed target {@link Element} changes
    */
   public override removeEventListener(callback: EventListener): void;
-  public override removeEventListener(event: typeof ESLSwipeGestureEvent.TYPE, callback: EventListener): void;
+  public override removeEventListener(event: typeof ESLSwipeGestureEvent.type, callback: EventListener): void;
   public override removeEventListener(event: any, callback: EventListener = event): void {
     super.removeEventListener(event, callback);
     if (!this.hasEventListener(event)) ESLEventListener.unsubscribe(this);
diff --git a/src/modules/esl-event-listener/core/targets/wheel.target.event.ts b/src/modules/esl-event-listener/core/targets/wheel.target.event.ts
index dd07b3e0d..33e3d9290 100644
--- a/src/modules/esl-event-listener/core/targets/wheel.target.event.ts
+++ b/src/modules/esl-event-listener/core/targets/wheel.target.event.ts
@@ -20,9 +20,7 @@ export interface ESLWheelEventInfo {
  * Wheel event dispatched by {@link ESLWheelTarget}
  */
 export class ESLWheelEvent extends UIEvent implements ESLWheelEventInfo {
-  public static readonly TYPE = 'longwheel';
-  /** @deprecated Use {@link TYPE} instead */
-  public static readonly type = this.TYPE;
+  public static readonly type = 'longwheel';
 
   public override readonly target: Element;
 
@@ -33,7 +31,7 @@ export class ESLWheelEvent extends UIEvent implements ESLWheelEventInfo {
   public readonly duration: number;
 
   protected constructor(target: Element, wheelInfo: ESLWheelEventInfo) {
-    super(ESLWheelEvent.TYPE);
+    super(ESLWheelEvent.type);
     overrideEvent(this, 'target', target);
     Object.assign(this, wheelInfo);
   }
diff --git a/src/modules/esl-event-listener/core/targets/wheel.target.ts b/src/modules/esl-event-listener/core/targets/wheel.target.ts
index b128fbacf..5820d82f6 100644
--- a/src/modules/esl-event-listener/core/targets/wheel.target.ts
+++ b/src/modules/esl-event-listener/core/targets/wheel.target.ts
@@ -138,7 +138,7 @@ export class ESLWheelTarget extends SyntheticEventTarget {
 
   /** Subscribes to wheel event */
   public override addEventListener(callback: EventListener): void;
-  public override addEventListener(event: typeof ESLWheelEvent.TYPE, callback: EventListener): void;
+  public override addEventListener(event: typeof ESLWheelEvent.type, callback: EventListener): void;
   public override addEventListener(event: any, callback: EventListener = event): void {
     super.addEventListener(event, callback);
 
@@ -148,7 +148,7 @@ export class ESLWheelTarget extends SyntheticEventTarget {
 
   /** Unsubscribes from the observed target {@link Element} wheel events */
   public override removeEventListener(callback: EventListener): void;
-  public override removeEventListener(event: typeof ESLWheelEvent.TYPE, callback: EventListener): void;
+  public override removeEventListener(event: typeof ESLWheelEvent.type, callback: EventListener): void;
   public override removeEventListener(event: any, callback: EventListener = event): void {
     super.removeEventListener(event, callback);
 
diff --git a/src/modules/esl-popup/core/esl-popup.ts b/src/modules/esl-popup/core/esl-popup.ts
index 0ffb6d4bd..bef11fe07 100644
--- a/src/modules/esl-popup/core/esl-popup.ts
+++ b/src/modules/esl-popup/core/esl-popup.ts
@@ -297,7 +297,7 @@ export class ESLPopup extends ESLToggleable {
   /** Actions to execute on activator intersection event. */
   @listen({
     auto: false,
-    event: ESLIntersectionEvent.TYPE,
+    event: ESLIntersectionEvent.type,
     target: ($popup: ESLPopup) => $popup.activator ? ESLIntersectionTarget.for($popup.activator, $popup.intersectionOptions) : [],
     condition: ($popup: ESLPopup) => !$popup.disableActivatorObservation
   })


Test patch:
diff --git a/src/modules/esl-event-listener/test/targets/intersection.test.ts b/src/modules/esl-event-listener/test/targets/intersection.test.ts
index 12b83ab0f..a3467bf9d 100644
--- a/src/modules/esl-event-listener/test/targets/intersection.test.ts
+++ b/src/modules/esl-event-listener/test/targets/intersection.test.ts
@@ -114,7 +114,7 @@ describe('ESLIntersectionTarget proxy', () => {
         intersectionRatio: 0.5
       });
       IntersectionObserverMock.trigger($el, entry);
-      expect(listener).lastCalledWith(expect.objectContaining({type: ESLIntersectionEvent.TYPE}));
+      expect(listener).lastCalledWith(expect.objectContaining({type: ESLIntersectionEvent.type}));
       expect(listener).lastCalledWith(expect.objectContaining(entry));
     });
   });