chore: initial import

shared/components/src/actions/updateScrollAndWindowDependentVisuals.ts

@@ -0,0 +1,48 @@
+import { debounce } from '@amp/web-app-components/src/utils/debounce';
+import { throttle } from '@amp/web-app-components/src/utils/throttle';
+/**
+ * Dynamically change header and bottom gradient style when scrolling within a modal, and on window resize
+ */
+export function updateScrollAndWindowDependentVisuals(node) {
+    let animationRequest;
+    const handleScroll = () => {
+        // Get scroll details
+        const { scrollHeight, scrollTop, offsetHeight } = node;
+        const maxScroll = scrollHeight - offsetHeight;
+
+        // Calculate whether content is scrolled
+        const contentIsScrolling = scrollTop > 1;
+
+        // Calculate if bottom gradient should be hidden
+        const scrollingNotPossible = maxScroll === 0;
+        const pastMaxScroll = scrollTop >= maxScroll;
+        const hideGradient = scrollingNotPossible || pastMaxScroll;
+
+        if (animationRequest) {
+            window.cancelAnimationFrame(animationRequest);
+        }
+
+        animationRequest = window.requestAnimationFrame(() =>
+            node.dispatchEvent(
+                new CustomEvent('scrollStatus', {
+                    detail: { contentIsScrolling, hideGradient },
+                }),
+            ),
+        );
+    };
+
+    const onResize = throttle(handleScroll, 250);
+    const onScroll = debounce(handleScroll, 50);
+    node.addEventListener('scroll', onScroll, { capture: true, passive: true });
+    window.addEventListener('resize', onResize);
+
+    return {
+        destroy() {
+            node.removeEventListener('scroll', onScroll, { capture: true });
+            window.removeEventListener('resize', onResize);
+            if (animationRequest) {
+                window.cancelAnimationFrame(animationRequest);
+            }
+        },
+    };
+}