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 <[email protected]>
Backendless · Feb 7, 2024 · 1496bc9 · 1496bc9
1 parent c286f59
commit 1496bc9
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 26 deletions.
diff --git 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
@@ -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
@@ -11,26 +11,24 @@ 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]);
 
   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>
   );