From 1496bc964ac5cfd00277a5f99316a3a281b65c2e Mon Sep 17 00:00:00 2001
From: serhmel <93279075+serhmel@users.noreply.github.com>
Date: Wed, 7 Feb 2024 10:50:12 +0200
Subject: [PATCH] MARKET-2350 [Animate on Scroll] Events from one triggered by
 another component. (#908)

* MARKET-2350 [Animate on Scroll] Events from one triggered by another component.

* fix event listener deletion

---------

Co-authored-by: serhiy.melnychuk <serhiy.melnychuk@backendlessmail.com>
---
 components/bl-animate-on-scroll/README.md      |  7 +++----
 components/bl-animate-on-scroll/component.json | 17 +++--------------
 components/bl-animate-on-scroll/src/index.js   | 15 +++++++--------
 3 files changed, 13 insertions(+), 26 deletions(-)

diff --git a/components/bl-animate-on-scroll/README.md b/components/bl-animate-on-scroll/README.md
index a1ed647e..c636a76a 100644
--- a/components/bl-animate-on-scroll/README.md
+++ b/components/bl-animate-on-scroll/README.md
@@ -31,10 +31,9 @@ The component is based on external [Animate on Scroll](https://github.com/michal
 
 ## Events
 
-| Name               | Triggers                          | Context Blocks        |
-|--------------------|-----------------------------------|-----------------------|
-| On Animation Enter | whenever any element animates in  | Detail: `HTMLElement` |
-| On Animation Out   | whenever any element animates out | Detail: `HTMLElement` |
+| Name               | Triggers                       | Context Blocks        |
+|--------------------|--------------------------------|-----------------------|
+| On Animation Event | whenever any element animates  | Detail: `HTMLElement` |
 
 ## Usage
 
diff --git a/components/bl-animate-on-scroll/component.json b/components/bl-animate-on-scroll/component.json
index 85451b3c..ad6ef50d 100644
--- a/components/bl-animate-on-scroll/component.json
+++ b/components/bl-animate-on-scroll/component.json
@@ -228,26 +228,15 @@
   ],
   "eventHandlers": [
     {
-      "name": "onAnimationEnter",
-      "label": "On Animation Enter",
+      "name": "onAnimation",
+      "label": "On Animation Event",
       "contextBlocks": [
         {
           "id": "detail",
           "label": "Detail"
         }
       ],
-      "handlerDescription": "The event is fired whenever any element animates in."
-    },
-    {
-      "name": "onAnimationOut",
-      "label": "On Animation Out",
-      "contextBlocks": [
-        {
-          "id": "detail",
-          "label": "Detail"
-        }
-      ],
-      "handlerDescription": "The event is fired whenever any element animates out."
+      "handlerDescription": "The event is fired whenever any element animates."
     }
   ],
   "actions": [],
diff --git a/components/bl-animate-on-scroll/src/index.js b/components/bl-animate-on-scroll/src/index.js
index b3bece1f..3f1c7492 100644
--- a/components/bl-animate-on-scroll/src/index.js
+++ b/components/bl-animate-on-scroll/src/index.js
@@ -11,13 +11,13 @@ const DevicesMap = {
   none  : false,
 };
 
-export default function AnimateOnScroll({ component, eventHandlers, settings, pods, elRef }) {
+export default function AnimateOnScroll(props) {
+  const { component, eventHandlers: { onAnimation }, settings: { disableFor }, pods, elRef, instanceId } = props;
   const {
     display, classList, style, animationType, easing, side,
     duration, offset, delay, mirror, once, anchor,
   } = component;
-  const { disableFor } = settings;
-  const { onAnimationEnter, onAnimationOut } = eventHandlers;
+
   const elementPod = pods['animationPod'];
 
   const animationName = useMemo(() => animationType + (side === 'none' ? '' : `-${ side }`), [animationType, side]);
@@ -25,12 +25,10 @@ export default function AnimateOnScroll({ component, eventHandlers, settings, po
   useEffect(() => {
     Aos.init({ disable: DevicesMap[disableFor] });
 
-    document.addEventListener('aos:in', ({ detail }) => onAnimationEnter({ detail }));
-    document.addEventListener('aos:out', ({ detail }) => onAnimationOut({ detail }));
+    document.addEventListener(`aos:in:${ instanceId }`, ({ detail }) => onAnimation({ detail }));
 
     return () => {
-      document.addEventListener('aos:in', ({ detail }) => onAnimationEnter({ detail }));
-      document.addEventListener('aos:out', ({ detail }) => onAnimationOut({ detail }));
+      document.removeEventListener(`aos:in:${ instanceId }`, ({ detail }) => onAnimation({ detail }));
     };
   }, []);
 
@@ -55,7 +53,8 @@ export default function AnimateOnScroll({ component, eventHandlers, settings, po
       data-aos-mirror={ mirror }
       data-aos-once={ once }
       data-aos-anchor={ anchor ? '.' + anchor : null }
-    >
+      data-aos-id={ instanceId }>
+
       { elementPod.render() }
     </div>
   );