@gem-sdk/core 1.31.0 → 1.31.7

package/dist/esm/hooks/animation/useLivePageAnimation.js

@@ -1,228 +0,0 @@
-import { useState, useRef, useCallback, useEffect } from 'react';
-import { animations } from './animations.js';
-
-// Any logic changes made to this file must also be applied to 
-// packages/web-components/src/gp-animation.ts, and vice versa.
-const TAGS_SELECTOR = {
-    Button: '.gp-button-base',
-    Sticky: 'gp-sticky',
-    Dialog: 'div[role=dialog]',
-    Icon: 'div div',
-    ProductTag: 'div div div'
-};
-const useLivePageAnimation = (wrapperRef, settings, tag)=>{
-    const animation = animations();
-    const [isAppearLoop, setIsAppearLoop] = useState(false);
-    const observer = useRef(undefined);
-    const appearAfterHoverTimer = useRef(undefined);
-    const animationElement = useRef(null);
-    const animationAppearType = useRef('none');
-    const animationHoverType = useRef('none');
-    const animationAppearInstance = useRef(null);
-    const animationHoverInstance = useRef(null);
-    const currentDevice = useRef(null);
-    const wrapperId = useRef('animation-wrapper-');
-    const appearPlay = useCallback((rate)=>{
-        if (!animationAppearInstance.current) return;
-        animationAppearInstance.current.playbackRate = rate ?? 1;
-        animationAppearInstance.current.play();
-    }, [
-        animationAppearInstance
-    ]);
-    const hoverPlay = useCallback((rate)=>{
-        if (!animationHoverInstance.current) return;
-        animationHoverInstance.current.playbackRate = rate ?? 1;
-        animationHoverInstance.current.play();
-    }, [
-        animationHoverInstance
-    ]);
-    const removeZeroOpacity = useCallback(()=>{
-        if (wrapperRef.current) wrapperRef.current.style.opacity = '1';
-        if (animationElement.current) animationElement.current.style.opacity = '1';
-    }, [
-        wrapperRef
-    ]);
-    const applyInitOpacity = useCallback(()=>{
-        if (wrapperRef.current) wrapperRef.current.style.opacity = '1';
-        if (animationElement.current) animationElement.current.style.opacity = '0';
-    }, [
-        wrapperRef
-    ]);
-    const playAppear = useCallback((e)=>{
-        e && e.stopPropagation();
-        applyInitOpacity();
-        if (!animationAppearInstance.current) return;
-        animationHoverInstance.current?.cancel();
-        appearPlay();
-        animationAppearInstance.current.finished.then(()=>{
-            if (!animationElement.current) return;
-            removeZeroOpacity();
-        });
-        animationElement.current && observer?.current?.unobserve(animationElement.current);
-    }, [
-        applyInitOpacity,
-        appearPlay,
-        removeZeroOpacity
-    ]);
-    const cancelAppear = useCallback(()=>{
-        if (!animationAppearInstance.current) return;
-        animationAppearInstance.current.cancel();
-    }, [
-        animationAppearInstance
-    ]);
-    const playHover = useCallback((e)=>{
-        e && e.stopPropagation();
-        if (!animationHoverInstance.current) return;
-        cancelAppear();
-        hoverPlay();
-    }, [
-        animationHoverInstance,
-        cancelAppear,
-        hoverPlay
-    ]);
-    const cancelHover = useCallback(()=>{
-        if (!animationHoverInstance.current) return;
-        if (animationHoverType.current === 'zoom') {
-            hoverPlay(-1);
-            if (!isAppearLoop) return;
-            animationHoverInstance.current.finished.then(()=>{
-                clearTimeout(appearAfterHoverTimer.current);
-                appearAfterHoverTimer.current = setTimeout(()=>{
-                    playAppear();
-                }, 100);
-            });
-            return;
-        }
-        animationHoverInstance.current.cancel();
-        if (isAppearLoop) playAppear();
-        return;
-    }, [
-        hoverPlay,
-        isAppearLoop,
-        playAppear
-    ]);
-    const getSettingByDevice = useCallback(()=>{
-        if (currentDevice.current === 'desktop') return settings?.desktop;
-        else if (currentDevice.current === 'tablet') return settings?.tablet ?? settings?.desktop;
-        else if (currentDevice.current === 'mobile') return settings?.mobile ?? settings?.tablet ?? settings?.desktop;
-        return settings?.desktop;
-    }, [
-        settings?.desktop,
-        settings?.mobile,
-        settings?.tablet
-    ]);
-    const getAnimationType = (settings, type)=>{
-        return settings?.triggerConfig?.[type]?.animation ?? 'none';
-    };
-    const initAppearInstance = useCallback((settings)=>{
-        if (animationAppearType.current === 'none') return;
-        const animationConfig = settings?.triggerConfig?.['appear']?.setting?.[animationAppearType.current];
-        setIsAppearLoop(animationConfig.loop);
-        animationAppearInstance.current = animation?.[animationAppearType.current]?.(animationElement.current, animationConfig);
-    }, [
-        animation
-    ]);
-    const initHoverInstance = useCallback((settings)=>{
-        if (animationHoverType.current === 'none') return;
-        const animationConfig = settings?.triggerConfig?.['hover']?.setting?.[animationHoverType.current];
-        animationHoverInstance.current = animation?.[animationHoverType.current]?.(animationElement.current, animationConfig);
-    }, [
-        animation
-    ]);
-    const reset = useCallback(()=>{
-        if (animationAppearInstance.current) {
-            animationAppearInstance.current = null;
-            if (animationElement.current) {
-                observer.current?.unobserve(animationElement.current);
-            }
-        }
-        if (animationHoverInstance) {
-            animationHoverInstance.current = null;
-            if (animationElement.current) {
-                animationElement.current.removeEventListener('mouseenter', playHover);
-                animationElement.current.removeEventListener('mouseleave', cancelHover);
-            }
-        }
-    }, [
-        cancelHover,
-        playHover
-    ]);
-    const initAnimation = useCallback((settings)=>{
-        reset();
-        if (!animationElement.current) return;
-        if (!settings?.enabled) {
-            removeZeroOpacity();
-            return;
-        }
-        animationAppearType.current = getAnimationType(settings, 'appear');
-        animationHoverType.current = getAnimationType(settings, 'hover');
-        if (animationAppearType.current === 'none') removeZeroOpacity();
-        if (animationHoverType.current !== 'none' && currentDevice.current === 'desktop') {
-            initHoverInstance(settings);
-            animationElement.current.addEventListener('mouseenter', playHover);
-            animationElement.current.addEventListener('mouseleave', cancelHover);
-        }
-        if (animationAppearType.current !== 'none') {
-            initAppearInstance(settings);
-            observer.current = new IntersectionObserver((entries)=>{
-                entries.forEach((entry)=>{
-                    if (entry.intersectionRatio > 0.1) playAppear();
-                });
-            }, {
-                root: null,
-                rootMargin: '0px',
-                threshold: [
-                    0.1
-                ]
-            });
-            observer.current.observe(animationElement.current);
-        } else removeZeroOpacity();
-    }, [
-        cancelHover,
-        initAppearInstance,
-        initHoverInstance,
-        playAppear,
-        playHover,
-        removeZeroOpacity,
-        reset
-    ]);
-    const initResizeObserver = useCallback(()=>{
-        const screen = document.querySelector('html');
-        if (!animationElement.current || !screen) return;
-        const resizeObserver = new ResizeObserver(([entry])=>{
-            const deviceWidth = entry?.target.getBoundingClientRect().width ?? 0;
-            let device;
-            if (deviceWidth >= 1024) device = 'desktop';
-            else if (deviceWidth >= 768) device = 'tablet';
-            else device = 'mobile';
-            if (currentDevice.current === device) return;
-            currentDevice.current = device;
-            initAnimation(getSettingByDevice());
-        });
-        resizeObserver.observe(screen);
-        return ()=>resizeObserver.disconnect();
-    }, [
-        getSettingByDevice,
-        initAnimation
-    ]);
-    useEffect(()=>{
-        setTimeout(()=>{
-            if (!settings || !wrapperRef.current) return;
-            wrapperId.current = `animation-wrapper-${Math.random().toString(36).substr(2, 5)}`;
-            wrapperRef.current.setAttribute('data-animationid', wrapperId.current);
-            if (Object.keys(TAGS_SELECTOR).includes(tag)) animationElement.current = document.querySelector(`[data-animationid='${wrapperId.current}'] ${TAGS_SELECTOR?.[tag] ?? ''}`);
-            else animationElement.current = document.querySelector(`[data-animationid='${wrapperId.current}'] > :first-child`);
-            return initResizeObserver();
-        }, 100);
-    }, [
-        initResizeObserver,
-        settings,
-        tag,
-        wrapperRef
-    ]);
-    return {
-        initAnimation
-    };
-};
-
-export { useLivePageAnimation };