@gem-sdk/core 1.29.4 → 1.30.0

package/dist/cjs/components/ComponentWrapperPreview.js

@@ -8,6 +8,7 @@ var composeAdvanceStyle = require('../helpers/compose-advance-style.js');
 var constant = require('./constant.js');
 var RenderCustomCode = require('./RenderCustomCode.js');
 var ComponentToolbarPreview = require('./ComponentToolbarPreview.js');
+var useApplyAnimation = require('../hooks/animation/useApplyAnimation.js');
 
 const ComponentWrapperPreview = ({ children, ...props })=>{
     react.useEffect(()=>{
@@ -21,6 +22,9 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
     }, [
         props.uid
     ]);
+    useApplyAnimation.default({
+        props
+    });
     if (props.type === 'section') {
         return null;
     }

package/dist/cjs/components/Render.liquid.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var makeStyle = require('../helpers/make-style.js');
 require('react');
 require('react/jsx-runtime');
 require('zustand');
@@ -13,7 +14,7 @@ require('../hooks/useCartUI.js');
 require('react-transition-group');
 require('@gem-sdk/core');
 var render = require('../helpers/render.js');
-require('../helpers/convert.js');
+var convert = require('../helpers/convert.js');
 var composeAdvanceStyle = require('../helpers/compose-advance-style.js');
 var constant = require('./constant.js');
 
@@ -170,6 +171,7 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
         const { cssCode, jsCode } = RenderCustomCode(item);
         if (cssCode) liquid += cssCode;
         if (jsCode) liquid += jsCode;
+        liquid = appendAnimation(item, liquid);
         return {
             liquid,
             extraFiles: customProps.extraFiles
@@ -199,13 +201,52 @@ const RenderCustomCode = (item)=>{
         jsCode
     };
 };
+const appendAnimation = (props, liquid)=>{
+    const { advanced, tag } = props;
+    const { animation } = advanced ?? {};
+    const enableAnimation = animation?.desktop?.enabled || animation?.tablet?.enabled || animation?.mobile?.enabled;
+    if (!enableAnimation || !animation?.desktop?.triggerConfig) return liquid;
+    const getAnimationType = (settings, type)=>{
+        return settings?.triggerConfig?.[type]?.animation ?? 'none';
+    };
+    const getSettingsByDevice = (device)=>{
+        if (device === 'desktop') return animation?.desktop;
+        else if (device === 'tablet') return animation?.tablet ?? animation?.desktop;
+        else if (device === 'mobile') return animation?.mobile ?? animation?.tablet ?? animation?.desktop;
+        return animation?.desktop;
+    };
+    const getInitOpacity = (device)=>+!(getSettingsByDevice(device)?.enabled && getAnimationType(getSettingsByDevice(device), 'appear') !== 'none');
+    const opacityObject = {
+        desktop: getInitOpacity('desktop'),
+        tablet: getInitOpacity('tablet'),
+        mobile: getInitOpacity('mobile')
+    };
+    const inheritParentStyle = {
+        all: tag === 'Section' ? '' : 'inherit'
+    };
+    return render.template`
+  ${render.RenderIf(convert.isLocalEnv, `<script src="{{ 'gp-animation.js' | asset_url }}" defer="defer"></script>`, `<script src="${convert.baseAssetURL}/assets/gp-animation.js" defer="defer"></script>`)}
+  <gp-animation
+    gp-data='${JSON.stringify({
+        config: animation,
+        tag
+    })}'
+    style="${{
+        ...inheritParentStyle
+    }}"
+  >
+    <div style="${{
+        ...makeStyle.makeStyleResponsive('op', opacityObject)
+    }}">${liquid}</div>
+  </gp-animation>
+  `;
+};
 const RenderChildren = (props)=>{
     const data = Render(props);
     // Append to prop parent
     for(const key in data.extraFiles){
         if (Object.prototype.hasOwnProperty.call(data.extraFiles, key)) {
-            const value = data.extraFiles[key];
-            props.customProps.extraFiles[key] = value;
+            props.customProps.extraFiles[key] = data.extraFiles[key];
         }
     }
     // Fix limit 256kb
@@ -214,7 +255,7 @@ const RenderChildren = (props)=>{
     if (Math.ceil(size / 1024) >= 180) {
         const fileName = `gp-section-snippet-${props.uid}`;
         props.customProps.extraFiles[fileName] = data.liquid;
-        return `{% render '${fileName}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant  %}`;
+        return `{% render '${fileName}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant, form: form  %}`;
     }
     return data.liquid;
 };
@@ -231,7 +272,7 @@ const WrapRenderChildren = ({ uid, customProps }, codes)=>{
                 if (Math.ceil(size / 1024) >= 180) {
                     const fileName = `gp-section-snippet-${uid + i}`;
                     customProps.extraFiles[fileName] = code;
-                    liquid += `{% render '${fileName}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant  %}`;
+                    liquid += `{% render '${fileName}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant, form: form  %}`;
                 } else {
                     liquid += code;
                 }

package/dist/cjs/components/constant.js

@@ -34,7 +34,8 @@ const disableWrap = [
     'Product',
     'ProductImages',
     'ProductImagesV2',
-    'Sticky'
+    'Sticky',
+    'Heading'
 ];
 const customRenderChildren = [
     'Accordion',

package/dist/cjs/helpers/animations.js

@@ -0,0 +1,213 @@
+'use strict';
+
+const EASING = {
+    ease: 'cubic-bezier(0.46,0.03,0.52,0.96)',
+    'ease-in': 'cubic-bezier(0.55,0.08,0.68,0.53)',
+    'ease-out': 'cubic-bezier(0.46,0.03,0.52,0.96)',
+    linear: 'linear'
+};
+const animations = ()=>{
+    const normalizeOptions = (options)=>{
+        const cloneOptions = JSON.parse(JSON.stringify(options));
+        const numberMember = [
+            'delay',
+            'speed',
+            'scale',
+            'intensity'
+        ];
+        numberMember.forEach((keyName)=>{
+            if (!cloneOptions?.[keyName]) return;
+            if (keyName === 'scale') {
+                if (!cloneOptions?.zoomDirection) throw new TypeError(`zoomDirection not found on zoom preset`);
+                const [i1, i2] = cloneOptions?.scale?.in ?? [
+                    1,
+                    1
+                ];
+                const [o1, o2] = cloneOptions?.scale?.out ?? [
+                    1,
+                    1
+                ];
+                cloneOptions[keyName] = {
+                    in: [
+                        Number(i1) / 100,
+                        Number(i2) / 100
+                    ],
+                    out: [
+                        Number(o1) / 100,
+                        Number(o2) / 100
+                    ]
+                };
+                return;
+            }
+            const num = Number(cloneOptions?.[keyName]);
+            if (keyName === 'delay') cloneOptions[keyName] = num * 1000;
+            else cloneOptions[keyName] = num;
+            if (!isFinite(num)) throw new TypeError(`${keyName} must be a number`);
+        });
+        return cloneOptions;
+    };
+    const slide = (target, options)=>{
+        const normalizedOptions = normalizeOptions(options);
+        const { direction, distance } = normalizedOptions;
+        const coordinate = [
+            'left',
+            'right'
+        ].includes(direction ?? '') ? 'X' : 'Y';
+        const isNeg = [
+            'left',
+            'down'
+        ].includes(direction ?? '') ? '-' : '';
+        const preset = [
+            {
+                opacity: 0,
+                transform: `translate${coordinate}(${isNeg}${distance ?? 50}%)`
+            },
+            {
+                opacity: 1,
+                transform: `translate${coordinate}(0)`
+            }
+        ];
+        return generateAnimationInstance(target, preset, {
+            ...generateOptions(normalizedOptions, 500)
+        });
+    };
+    const fade = (target, options)=>{
+        const normalizedOptions = normalizeOptions(options);
+        const preset = [
+            {
+                opacity: 0
+            },
+            {
+                opacity: 1
+            }
+        ];
+        return generateAnimationInstance(target, preset, {
+            ...generateOptions(normalizedOptions, 500)
+        });
+    };
+    const generateOptions = (options, defaultDuration)=>{
+        const convertSpeedToDuration = (speed)=>{
+            if (!speed) return defaultDuration;
+            return 1.5 / speed * 1000;
+        };
+        const { loop, delay, speed, easing } = options ?? {};
+        const duration = convertSpeedToDuration(speed);
+        const actualDelay = delay ?? 0;
+        const actualDuration = loop ? duration + actualDelay : duration;
+        return {
+            iterations: loop ? Infinity : 1,
+            duration: actualDuration,
+            delay: actualDelay,
+            easing: EASING[easing ?? 'linear']
+        };
+    };
+    const zoom = (target, options)=>{
+        const normalizedOptions = normalizeOptions(options);
+        const { scale, zoomDirection, isFade } = normalizedOptions;
+        const [i1, i2] = scale.in;
+        const [o1, o2] = scale.out;
+        const zoomInPreset = [
+            {
+                transform: `scale(${i1}, ${i1})`,
+                opacity: isFade ? 0 : 1
+            },
+            {
+                transform: `scale(${i2 ?? 1.2}, ${i2 ?? 1.2})`,
+                opacity: 1
+            }
+        ];
+        const zoomOutPreset = [
+            {
+                transform: `scale(${o1}, ${o1})`,
+                opacity: isFade ? 0 : 1
+            },
+            {
+                transform: `scale(${o2 ?? 0.8}, ${o2 ?? 0.8})`,
+                opacity: 1
+            }
+        ];
+        const zoomPreset = zoomDirection === 'in' ? zoomInPreset : zoomOutPreset;
+        return generateAnimationInstance(target, zoomPreset, {
+            ...generateOptions(normalizedOptions, 700)
+        });
+    };
+    const generateLoopDelayEffect = (keyframes, delay, duration)=>{
+        if (!delay) return keyframes;
+        const offset = delay / duration;
+        const keyframe = [
+            ...keyframes
+        ].pop();
+        return [
+            ...keyframes,
+            {
+                ...keyframe,
+                offset: 1 - offset
+            }
+        ];
+    };
+    const shake = (target, options)=>{
+        const normalizedOptions = normalizeOptions(options);
+        const { intensity } = normalizedOptions ?? {};
+        const zeroIntensity = [
+            {
+                transform: 'translate3d(0, 0, 0)'
+            }
+        ];
+        const unitIntensity = [
+            {
+                transform: 'translate3d(4px, 0, 0)'
+            },
+            {
+                transform: 'translate3d(-4px, 0, 0)'
+            },
+            {
+                transform: 'translate3d(4px, 0, 0)'
+            }
+        ];
+        let keyframes = [];
+        Array.from(Array(intensity ?? 1).keys()).forEach(()=>{
+            keyframes = [
+                ...keyframes,
+                ...unitIntensity
+            ];
+        });
+        const shakePreset = [
+            {
+                transform: 'translate3d(-1px, 0, 0)'
+            },
+            {
+                transform: 'translate3d(2px, 0, 0)'
+            },
+            {
+                transform: 'translate3d(-4px, 0, 0)'
+            },
+            ...keyframes,
+            {
+                transform: 'translate3d(-4px, 0, 0)'
+            },
+            {
+                transform: 'translate3d(2px, 0, 0)'
+            },
+            {
+                transform: 'translate3d(-1px, 0, 0)'
+            }
+        ];
+        return generateAnimationInstance(target, intensity ? shakePreset : zeroIntensity, {
+            ...generateOptions(normalizedOptions ?? {}, 820)
+        });
+    };
+    const generateAnimationInstance = (target, effectPreset, options)=>{
+        const effect = new KeyframeEffect(target, options.iterations && options.iterations === 1 ? effectPreset : generateLoopDelayEffect(effectPreset, options?.delay ?? 0, (options?.duration) ?? 0), {
+            ...options
+        });
+        return new Animation(effect, document.timeline);
+    };
+    return {
+        zoom,
+        shake,
+        fade,
+        slide
+    };
+};
+
+exports.animations = animations;

package/dist/cjs/hooks/animation/useAnimationActions.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var react = require('react');
+
+const useAnimationActions = ()=>{
+    const listAnimations = react.useRef();
+    const setAnimation = react.useCallback((newListAnimations)=>{
+        listAnimations.current = newListAnimations;
+    }, [
+        listAnimations
+    ]);
+    const playAnimation = react.useCallback(()=>{
+        if (!listAnimations.current) return;
+        for (const animation of listAnimations.current){
+            animation.play();
+        }
+    }, []);
+    const cancelAnimation = react.useCallback(()=>{
+        if (!listAnimations.current) return;
+        for (const animation of listAnimations.current){
+            animation.cancel();
+        }
+    }, []);
+    const setAnimationOnFinish = react.useCallback((onFinish)=>{
+        if (!listAnimations.current) return;
+        for (const animation of listAnimations.current){
+            animation.onfinish = onFinish;
+        }
+    }, []);
+    return {
+        currentAnimation: listAnimations.current,
+        setAnimation,
+        playAnimation,
+        cancelAnimation,
+        setAnimationOnFinish
+    };
+};
+
+exports.useAnimationActions = useAnimationActions;

package/dist/cjs/hooks/animation/useAnimationConfig.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var react = require('react');
+var useCurrentDevice = require('../use-current-device.js');
+
+const useAnimationConfig = (props)=>{
+    const currentDevice = useCurrentDevice.useCurrentDevice();
+    const configByDevices = react.useMemo(()=>props?.advanced?.animation?.[currentDevice], [
+        currentDevice,
+        props?.advanced?.animation
+    ]);
+    const getAnimationConfig = react.useCallback(()=>{
+        const { trigger, triggerConfig } = configByDevices;
+        const { animation, setting } = triggerConfig[trigger];
+        return {
+            type: animation,
+            setting: setting[animation]
+        };
+    }, [
+        configByDevices
+    ]);
+    const isEnabledAnimation = configByDevices?.enabled;
+    return {
+        isEnabledAnimation,
+        getAnimationConfig
+    };
+};
+
+exports.useAnimationConfig = useAnimationConfig;

package/dist/cjs/hooks/animation/useAnimationPreview.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var react = require('react');
+
+const useAnimationPreview = ({ props, playAnimation, cancelAnimation, setAnimationOnFinish, setToolbarActive })=>{
+    const previewAnimation = react.useCallback((e)=>{
+        const { uid, isCancel } = e.detail;
+        if (props.uid !== uid) return;
+        cancelAnimation();
+        if (isCancel) {
+            setToolbarActive(true);
+            return;
+        }
+        playAnimation();
+        setToolbarActive(false);
+        setAnimationOnFinish(()=>{
+            setToolbarActive(true);
+        });
+    }, [
+        props.uid,
+        cancelAnimation,
+        playAnimation,
+        setToolbarActive,
+        setAnimationOnFinish
+    ]);
+    return {
+        previewAnimation
+    };
+};
+
+exports.useAnimationPreview = useAnimationPreview;

package/dist/cjs/hooks/animation/useAnimationTarget.js

@@ -0,0 +1,120 @@
+'use strict';
+
+var react = require('react');
+var useAnimationConfig = require('./useAnimationConfig.js');
+
+const SPACING_ACTIVE_ATTRIBUTE = 'data-spacing';
+const TOOLBAR_ACTIVE_ATTRIBUTE = 'data-toolbar-active';
+const OUTLINE_ACTIVE_ATTRIBUTE = 'data-outline-active';
+const TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE = 'data-toolbar-add-active';
+const useAnimationTarget = (props)=>{
+    const { isEnabledAnimation } = useAnimationConfig.useAnimationConfig(props);
+    const componentTag = props.tag;
+    const componentUid = props.uid;
+    const targets = react.useRef(null);
+    const targetObjects = react.useRef([]);
+    const setToolbarActive = (isActive)=>{
+        if (!targetObjects.current) return;
+        for (const item of targetObjects.current){
+            if (isActive) {
+                item.toolbar?.setAttribute(TOOLBAR_ACTIVE_ATTRIBUTE, 'true');
+                item.outline?.setAttribute(OUTLINE_ACTIVE_ATTRIBUTE, 'true');
+                item.spacing?.setAttribute(SPACING_ACTIVE_ATTRIBUTE, 'true');
+                item.addSectionTop?.setAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE, 'true');
+                item.addSectionBottom?.setAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE, 'true');
+            } else {
+                item.toolbar?.removeAttribute(TOOLBAR_ACTIVE_ATTRIBUTE);
+                item.outline?.removeAttribute(OUTLINE_ACTIVE_ATTRIBUTE);
+                item.spacing?.removeAttribute(SPACING_ACTIVE_ATTRIBUTE);
+                item.addSectionTop?.removeAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE);
+                item.addSectionBottom?.removeAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE);
+            }
+        }
+    };
+    const getSectionProperties = (target)=>{
+        const sectionAddTop = target.querySelector('[data-toolbar-add-top]');
+        const sectionAddBottom = target.querySelector('[data-toolbar-add-bottom]');
+        const sectionChild = Array.from(target.children);
+        const sectionToolbar = sectionChild.find((child)=>child.getAttribute('data-toolbar') !== null);
+        const sectionOutline = sectionChild.find((child)=>child.getAttribute('data-outline') !== null);
+        return {
+            sectionToolbar,
+            sectionOutline,
+            sectionAddTop,
+            sectionAddBottom
+        };
+    };
+    const getUpdatedTargetObjects = react.useCallback((targets)=>{
+        return targets.reduce((accumulator, $rootTarget)=>{
+            let addSectionTop = null;
+            let addSectionBottom = null;
+            let target = $rootTarget;
+            let toolbar = $rootTarget.querySelector('[data-toolbar][data-toolbar-active]');
+            let outline = $rootTarget.querySelector('[data-outline][data-outline-active]');
+            const targetChild = Array.from(target.children);
+            const spacing = targetChild.find((child)=>child.getAttribute('data-spacing') !== null);
+            switch(componentTag){
+                case 'Button':
+                case 'SubmitButton':
+                case 'ProductButton':
+                case 'DynamicCheckout':
+                    target = $rootTarget.querySelector('.gp-button-base');
+                    break;
+                case 'ProductProperties':
+                    target = $rootTarget.querySelector('input');
+                    break;
+                case 'Icon':
+                    target = $rootTarget.firstElementChild;
+                    break;
+                case 'ProductTag':
+                    target = $rootTarget?.children[0]?.children[0];
+                    break;
+                case 'Section':
+                    {
+                        target = $rootTarget;
+                        const { sectionOutline, sectionToolbar, sectionAddTop, sectionAddBottom } = getSectionProperties(target);
+                        outline = sectionOutline;
+                        toolbar = sectionToolbar;
+                        addSectionTop = sectionAddTop;
+                        addSectionBottom = sectionAddBottom;
+                        break;
+                    }
+                default:
+                    target = $rootTarget;
+            }
+            const newTargetObject = {
+                target,
+                toolbar,
+                outline,
+                spacing,
+                addSectionTop,
+                addSectionBottom
+            };
+            accumulator.push(newTargetObject);
+            return accumulator;
+        }, []);
+    }, [
+        componentTag
+    ]);
+    const initListOfTargets = react.useCallback(()=>{
+        if (!isEnabledAnimation) return;
+        if (!targets.current) {
+            targets.current = document.querySelectorAll(`[data-uid="${componentUid}"]`);
+        }
+        const targetsArray = Array.from(targets.current);
+        if (!targetsArray.length) return;
+        const updatedTargetObjects = getUpdatedTargetObjects(targetsArray);
+        targetObjects.current = updatedTargetObjects;
+    }, [
+        componentUid,
+        getUpdatedTargetObjects,
+        isEnabledAnimation
+    ]);
+    return {
+        targetObjects,
+        setToolbarActive,
+        initListOfTargets
+    };
+};
+
+exports.useAnimationTarget = useAnimationTarget;

package/dist/cjs/hooks/animation/useApplyAnimation.js

@@ -0,0 +1,87 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var useAnimations = require('../useAnimations.js');
+var useAnimationTarget = require('./useAnimationTarget.js');
+var useAnimationConfig = require('./useAnimationConfig.js');
+var useAnimationActions = require('./useAnimationActions.js');
+var useAnimationPreview = require('./useAnimationPreview.js');
+var animations = require('../../types/animations.js');
+
+const useApplyAnimation = ({ props })=>{
+    const currentProps = props;
+    const { uid: componentUid } = currentProps;
+    const animation = useAnimations.useAnimations();
+    const { initListOfTargets, targetObjects, setToolbarActive } = useAnimationTarget.useAnimationTarget(currentProps);
+    const { isEnabledAnimation, getAnimationConfig } = useAnimationConfig.useAnimationConfig(currentProps);
+    const { setAnimation, cancelAnimation, playAnimation, setAnimationOnFinish } = useAnimationActions.useAnimationActions();
+    const { previewAnimation } = useAnimationPreview.useAnimationPreview({
+        props: currentProps,
+        playAnimation,
+        cancelAnimation,
+        setAnimationOnFinish,
+        setToolbarActive
+    });
+    const generateAnimation = react.useCallback(({ target, setting, type })=>{
+        return animation[type](target, setting);
+    }, [
+        animation
+    ]);
+    const initListAnimations = react.useCallback(()=>{
+        const { type, setting } = getAnimationConfig();
+        if (!type || type === animations.AnimationType.None || !targetObjects.current.length) {
+            cancelAnimation();
+            return;
+        }
+        const listAnimations = targetObjects.current.map((item)=>generateAnimation({
+                type,
+                setting,
+                target: item.target
+            }));
+        cancelAnimation();
+        setAnimation(listAnimations);
+    }, [
+        getAnimationConfig,
+        targetObjects,
+        cancelAnimation,
+        setAnimation,
+        generateAnimation
+    ]);
+    react.useEffect(()=>{
+        if (isEnabledAnimation) {
+            initListOfTargets();
+            initListAnimations();
+        } else {
+            cancelAnimation();
+        }
+        return ()=>{
+            cancelAnimation();
+        };
+    }, [
+        componentUid,
+        initListAnimations,
+        cancelAnimation,
+        isEnabledAnimation,
+        initListOfTargets
+    ]);
+    react.useEffect(()=>{
+        window.addEventListener('preview-animation', previewAnimation);
+        return ()=>{
+            window.removeEventListener('preview-animation', previewAnimation);
+        };
+    }, [
+        previewAnimation
+    ]);
+    react.useEffect(()=>{
+        window.addEventListener('init-animation-target', initListOfTargets);
+        return ()=>{
+            window.removeEventListener('init-animation-target', initListOfTargets);
+        };
+    }, [
+        initListOfTargets
+    ]);
+};
+
+exports.default = useApplyAnimation;

package/dist/cjs/hooks/useAnimations.js

@@ -0,0 +1,26 @@
+'use strict';
+
+require('react');
+require('react/jsx-runtime');
+require('zustand');
+require('swr');
+require('@gem-sdk/adapter-shopify');
+require('swr/mutation');
+require('vanilla-lazyload');
+require('./useCartUI.js');
+require('react-transition-group');
+require('@gem-sdk/core');
+var animations = require('../helpers/animations.js');
+require('../helpers/convert.js');
+
+const useAnimations = ()=>{
+    const { zoom, shake, fade, slide } = animations.animations();
+    return {
+        zoom,
+        shake,
+        fade,
+        slide
+    };
+};
+
+exports.useAnimations = useAnimations;