@builder.io/sdk-svelte 0.12.6 → 0.12.7

package/lib/browser/components/block/animator.d.ts

@@ -0,0 +1,5 @@
+import type { BuilderAnimation } from '../../types/builder-block.js';
+export declare function bindAnimations(animations: BuilderAnimation[]): void;
+export declare function triggerAnimation(animation: BuilderAnimation): void;
+export declare function bindHoverAnimation(animation: BuilderAnimation): void;
+export declare function bindScrollInViewAnimation(animation: BuilderAnimation): void;

package/lib/browser/components/block/animator.js

@@ -0,0 +1,243 @@
+// eslint-disable-next-line @typescript-eslint/ban-types
+function throttle(func, wait, options = {}) {
+    let context;
+    let args;
+    let result;
+    let timeout = null;
+    let previous = 0;
+    const later = function () {
+        previous = options.leading === false ? 0 : Date.now();
+        timeout = null;
+        result = func.apply(context, args);
+        if (!timeout)
+            context = args = null;
+    };
+    return function () {
+        const now = Date.now();
+        if (!previous && options.leading === false)
+            previous = now;
+        const remaining = wait - (now - previous);
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        context = this;
+        // eslint-disable-next-line prefer-rest-params
+        args = arguments;
+        if (remaining <= 0 || remaining > wait) {
+            if (timeout) {
+                clearTimeout(timeout);
+                timeout = null;
+            }
+            previous = now;
+            result = func.apply(context, args);
+            if (!timeout)
+                context = args = null;
+        }
+        else if (!timeout && options.trailing !== false) {
+            timeout = setTimeout(later, remaining);
+        }
+        return result;
+    };
+}
+function assign(target, ..._args) {
+    const to = Object(target);
+    for (let index = 1; index < arguments.length; index++) {
+        // eslint-disable-next-line prefer-rest-params
+        const nextSource = arguments[index];
+        if (nextSource != null) {
+            // Skip over if undefined or null
+            for (const nextKey in nextSource) {
+                // Avoid bugs when hasOwnProperty is shadowed
+                if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
+                    to[nextKey] = nextSource[nextKey];
+                }
+            }
+        }
+    }
+    return to;
+}
+const camelCaseToKebabCase = (str) => str ? str.replace(/([A-Z])/g, g => `-${g[0].toLowerCase()}`) : '';
+export function bindAnimations(animations) {
+    for (const animation of animations) {
+        switch (animation.trigger) {
+            case 'pageLoad':
+                triggerAnimation(animation);
+                break;
+            case 'hover':
+                bindHoverAnimation(animation);
+                break;
+            case 'scrollInView':
+                bindScrollInViewAnimation(animation);
+                break;
+        }
+    }
+}
+function warnElementNotPresent(id) {
+    console.warn(`Cannot animate element: element with ID ${id} not found!`);
+}
+function augmentAnimation(animation, element) {
+    const stylesUsed = getAllStylesUsed(animation);
+    const computedStyle = getComputedStyle(element);
+    // const computedStyle = getComputedStyle(element);
+    // // FIXME: this will break if original load is in one reponsive size then resize to another hmmm
+    // Need to use transform instead of left since left can change on screen sizes
+    const firstStyles = animation.steps[0].styles;
+    const lastStyles = animation.steps[animation.steps.length - 1].styles;
+    const bothStyles = [firstStyles, lastStyles];
+    // FIXME: this won't work as expected for augmented animations - may need the editor itself to manage this
+    for (const styles of bothStyles) {
+        for (const style of stylesUsed) {
+            if (!(style in styles)) {
+                styles[style] = computedStyle[style];
+            }
+        }
+    }
+}
+function getAllStylesUsed(animation) {
+    const properties = [];
+    for (const step of animation.steps) {
+        for (const key in step.styles) {
+            if (properties.indexOf(key) === -1) {
+                properties.push(key);
+            }
+        }
+    }
+    return properties;
+}
+export function triggerAnimation(animation) {
+    // TODO: do for ALL elements
+    const elements = Array.prototype.slice.call(document.getElementsByClassName(animation.elementId || animation.id || ''));
+    if (!elements.length) {
+        warnElementNotPresent(animation.elementId || animation.id || '');
+        return;
+    }
+    Array.from(elements).forEach(element => {
+        augmentAnimation(animation, element);
+        // TODO: do this properly, may have other animations of different properties
+        // TODO: only override the properties
+        // TODO: if there is an entrance and hover animation, the transition duration will get effed
+        // element.setAttribute('style', '');
+        // const styledUsed = this.getAllStylesUsed(animation);
+        element.style.transition = 'none';
+        element.style.transitionDelay = '0';
+        assign(element.style, animation.steps[0].styles);
+        // TODO: queue/batch these timeouts
+        // TODO: only include properties explicitly set in the animation
+        // using Object.keys(styles)
+        setTimeout(() => {
+            element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(animation.easing)}`;
+            if (animation.delay) {
+                element.style.transitionDelay = animation.delay + 's';
+            }
+            assign(element.style, animation.steps[1].styles);
+            // TODO: maybe remove/reset transitoin property after animation duration
+            // TODO: queue timers
+            setTimeout(() => {
+                // TODO: what if has other transition (reset back to what it was)
+                element.style.transition = '';
+                element.style.transitionDelay = '';
+            }, (animation.delay || 0) * 1000 + animation.duration * 1000 + 100);
+        });
+    });
+}
+export function bindHoverAnimation(animation) {
+    // TODO: is it multiple binding when editing...?
+    // TODO: unbind on element remove
+    // TODO: apply to ALL elements
+    const elements = Array.prototype.slice.call(document.getElementsByClassName(animation.elementId || animation.id || ''));
+    if (!elements.length) {
+        warnElementNotPresent(animation.elementId || animation.id || '');
+        return;
+    }
+    Array.from(elements).forEach(element => {
+        augmentAnimation(animation, element);
+        const defaultState = animation.steps[0].styles;
+        const hoverState = animation.steps[1].styles;
+        function attachDefaultState() {
+            assign(element.style, defaultState);
+        }
+        function attachHoverState() {
+            assign(element.style, hoverState);
+        }
+        attachDefaultState();
+        element.addEventListener('mouseenter', attachHoverState);
+        element.addEventListener('mouseleave', attachDefaultState);
+        // TODO: queue/batch these timeouts
+        setTimeout(() => {
+            element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(animation.easing)}`;
+            if (animation.delay) {
+                element.style.transitionDelay = animation.delay + 's';
+            }
+        });
+    });
+}
+// TODO: unbind on element remove
+export function bindScrollInViewAnimation(animation) {
+    // TODO: apply to ALL matching elements
+    const elements = Array.prototype.slice.call(document.getElementsByClassName(animation.elementId || animation.id || ''));
+    if (!elements.length) {
+        warnElementNotPresent(animation.elementId || animation.id || '');
+        return;
+    }
+    // TODO: if server side rendered and scrolled into view don't animate...
+    Array.from(elements).forEach(element => {
+        augmentAnimation(animation, element);
+        let triggered = false;
+        let pendingAnimation = false;
+        function immediateOnScroll() {
+            if (!triggered && isScrolledIntoView(element)) {
+                triggered = true;
+                pendingAnimation = true;
+                setTimeout(() => {
+                    assign(element.style, animation.steps[1].styles);
+                    if (!animation.repeat) {
+                        document.removeEventListener('scroll', onScroll);
+                    }
+                    setTimeout(() => {
+                        pendingAnimation = false;
+                        if (!animation.repeat) {
+                            element.style.transition = '';
+                            element.style.transitionDelay = '';
+                        }
+                    }, (animation.duration + (animation.delay || 0)) * 1000 + 100);
+                });
+            }
+            else if (animation.repeat && triggered && !pendingAnimation && !isScrolledIntoView(element)) {
+                // we want to repeat the animation every time the the element is out of view and back again
+                triggered = false;
+                assign(element.style, animation.steps[0].styles);
+            }
+        }
+        // TODO: roll all of these in one for more efficiency of checking all the rects
+        const onScroll = throttle(immediateOnScroll, 200, {
+            leading: false
+        });
+        // TODO: fully in view or partially
+        function isScrolledIntoView(elem) {
+            const rect = elem.getBoundingClientRect();
+            const windowHeight = window.innerHeight;
+            const thresholdPercent = (animation.thresholdPercent || 0) / 100;
+            const threshold = thresholdPercent * windowHeight;
+            // TODO: partial in view? or what if element is larger than screen itself
+            return rect.bottom > threshold && rect.top < windowHeight - threshold // Element is peeking top or bottom
+            ;
+        }
+        const defaultState = animation.steps[0].styles;
+        function attachDefaultState() {
+            assign(element.style, defaultState);
+        }
+        attachDefaultState();
+        // TODO: queue/batch these timeouts!
+        setTimeout(() => {
+            element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(animation.easing)}`;
+            if (animation.delay) {
+                element.style.transitionDelay = animation.delay + 's';
+            }
+        });
+        // TODO: one listener for everything
+        document.addEventListener('scroll', onScroll, {
+            capture: true,
+            passive: true
+        });
+        // Do an initial check
+        immediateOnScroll();
+    });
+}

package/lib/browser/components/block/block.svelte

@@ -1,10 +1,12 @@
 <script context="module"></script>
 
-<script>import { writable } from "svelte/store";
+<script>import { onMount } from "svelte";
+import { writable } from "svelte/store";
 import "../../functions/extract-text-styles.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import "../../functions/get-style.js";
+import { bindAnimations } from "./animator.js";
 import { getComponent, getRepeatItemData } from "./block.helpers.js";
 import BlockStyles from "./components/block-styles.svelte";
 import BlockWrapper from "./components/block-wrapper.svelte";
@@ -100,6 +102,18 @@ $: componentRefProps = () => {
     };
 };
 let childrenContext = writable($context);
+onMount(() => {
+    const blockId = processedBlock().id;
+    const animations = processedBlock().animations;
+    if (animations && blockId) {
+        bindAnimations(animations
+            .filter((item) => item.trigger !== "hover")
+            .map((animation) => ({
+            ...animation,
+            elementId: blockId,
+        })));
+    }
+});
 </script>
 
 {#if canShowBlock()}

package/lib/browser/components/content/components/enable-editor.svelte

@@ -17,6 +17,7 @@ import { getDefaultCanTrack } from "../../../helpers/canTrack.js";
 import { logger } from "../../../helpers/logger.js";
 import "../../../helpers/preview-lru-cache/set.js";
 import { registerInsertMenu, setupBrowserForEditing, } from "../../../scripts/init-editing.js";
+import { triggerAnimation } from "../../block/animator.js";
 export let builderContextSignal;
 export let contentWrapper = undefined;
 export let trustedHosts = undefined;
@@ -83,6 +84,10 @@ function processMessage(event) {
                 forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
                 break;
             }
+            case "builder.triggerAnimation": {
+                triggerAnimation(data.data);
+                break;
+            }
             case "builder.contentUpdate": {
                 const messageContent = data.data;
                 const key = messageContent.key ||

package/lib/browser/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.12.6";
+export declare const SDK_VERSION = "0.12.7";

package/lib/browser/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "0.12.6";
+export const SDK_VERSION = "0.12.7";

package/lib/browser/types/builder-block.d.ts

@@ -4,6 +4,23 @@ interface JSONObject {
 }
 interface JSONArray extends Array<JSONValue> {
 }
+export interface AnimationStep {
+    styles: {
+        [key: string]: string;
+    };
+    delay?: number;
+}
+export interface BuilderAnimation {
+    elementId: string;
+    trigger: string;
+    steps: AnimationStep[];
+    duration: number;
+    delay?: number;
+    easing?: string;
+    id?: string;
+    repeat?: boolean;
+    thresholdPercent?: number;
+}
 /** @todo typedoc this */
 export interface BuilderBlock {
     '@type': '@builder.io/sdk:Element';
@@ -52,7 +69,7 @@ export interface BuilderBlock {
         collection: string;
         itemName?: string;
     } | null;
-    animations?: any[];
+    animations?: BuilderAnimation[];
     style?: Partial<CSSStyleDeclaration>;
     href?: string;
     /**

package/lib/edge/components/block/animator.d.ts

@@ -0,0 +1,5 @@
+import type { BuilderAnimation } from '../../types/builder-block.js';
+export declare function bindAnimations(animations: BuilderAnimation[]): void;
+export declare function triggerAnimation(animation: BuilderAnimation): void;
+export declare function bindHoverAnimation(animation: BuilderAnimation): void;
+export declare function bindScrollInViewAnimation(animation: BuilderAnimation): void;

package/lib/edge/components/block/animator.js

@@ -0,0 +1,243 @@
+// eslint-disable-next-line @typescript-eslint/ban-types
+function throttle(func, wait, options = {}) {
+    let context;
+    let args;
+    let result;
+    let timeout = null;
+    let previous = 0;
+    const later = function () {
+        previous = options.leading === false ? 0 : Date.now();
+        timeout = null;
+        result = func.apply(context, args);
+        if (!timeout)
+            context = args = null;
+    };
+    return function () {
+        const now = Date.now();
+        if (!previous && options.leading === false)
+            previous = now;
+        const remaining = wait - (now - previous);
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        context = this;
+        // eslint-disable-next-line prefer-rest-params
+        args = arguments;
+        if (remaining <= 0 || remaining > wait) {
+            if (timeout) {
+                clearTimeout(timeout);
+                timeout = null;
+            }
+            previous = now;
+            result = func.apply(context, args);
+            if (!timeout)
+                context = args = null;
+        }
+        else if (!timeout && options.trailing !== false) {
+            timeout = setTimeout(later, remaining);
+        }
+        return result;
+    };
+}
+function assign(target, ..._args) {
+    const to = Object(target);
+    for (let index = 1; index < arguments.length; index++) {
+        // eslint-disable-next-line prefer-rest-params
+        const nextSource = arguments[index];
+        if (nextSource != null) {
+            // Skip over if undefined or null
+            for (const nextKey in nextSource) {
+                // Avoid bugs when hasOwnProperty is shadowed
+                if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
+                    to[nextKey] = nextSource[nextKey];
+                }
+            }
+        }
+    }
+    return to;
+}
+const camelCaseToKebabCase = (str) => str ? str.replace(/([A-Z])/g, g => `-${g[0].toLowerCase()}`) : '';
+export function bindAnimations(animations) {
+    for (const animation of animations) {
+        switch (animation.trigger) {
+            case 'pageLoad':
+                triggerAnimation(animation);
+                break;
+            case 'hover':
+                bindHoverAnimation(animation);
+                break;
+            case 'scrollInView':
+                bindScrollInViewAnimation(animation);
+                break;
+        }
+    }
+}
+function warnElementNotPresent(id) {
+    console.warn(`Cannot animate element: element with ID ${id} not found!`);
+}
+function augmentAnimation(animation, element) {
+    const stylesUsed = getAllStylesUsed(animation);
+    const computedStyle = getComputedStyle(element);
+    // const computedStyle = getComputedStyle(element);
+    // // FIXME: this will break if original load is in one reponsive size then resize to another hmmm
+    // Need to use transform instead of left since left can change on screen sizes
+    const firstStyles = animation.steps[0].styles;
+    const lastStyles = animation.steps[animation.steps.length - 1].styles;
+    const bothStyles = [firstStyles, lastStyles];
+    // FIXME: this won't work as expected for augmented animations - may need the editor itself to manage this
+    for (const styles of bothStyles) {
+        for (const style of stylesUsed) {
+            if (!(style in styles)) {
+                styles[style] = computedStyle[style];
+            }
+        }
+    }
+}
+function getAllStylesUsed(animation) {
+    const properties = [];
+    for (const step of animation.steps) {
+        for (const key in step.styles) {
+            if (properties.indexOf(key) === -1) {
+                properties.push(key);
+            }
+        }
+    }
+    return properties;
+}
+export function triggerAnimation(animation) {
+    // TODO: do for ALL elements
+    const elements = Array.prototype.slice.call(document.getElementsByClassName(animation.elementId || animation.id || ''));
+    if (!elements.length) {
+        warnElementNotPresent(animation.elementId || animation.id || '');
+        return;
+    }
+    Array.from(elements).forEach(element => {
+        augmentAnimation(animation, element);
+        // TODO: do this properly, may have other animations of different properties
+        // TODO: only override the properties
+        // TODO: if there is an entrance and hover animation, the transition duration will get effed
+        // element.setAttribute('style', '');
+        // const styledUsed = this.getAllStylesUsed(animation);
+        element.style.transition = 'none';
+        element.style.transitionDelay = '0';
+        assign(element.style, animation.steps[0].styles);
+        // TODO: queue/batch these timeouts
+        // TODO: only include properties explicitly set in the animation
+        // using Object.keys(styles)
+        setTimeout(() => {
+            element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(animation.easing)}`;
+            if (animation.delay) {
+                element.style.transitionDelay = animation.delay + 's';
+            }
+            assign(element.style, animation.steps[1].styles);
+            // TODO: maybe remove/reset transitoin property after animation duration
+            // TODO: queue timers
+            setTimeout(() => {
+                // TODO: what if has other transition (reset back to what it was)
+                element.style.transition = '';
+                element.style.transitionDelay = '';
+            }, (animation.delay || 0) * 1000 + animation.duration * 1000 + 100);
+        });
+    });
+}
+export function bindHoverAnimation(animation) {
+    // TODO: is it multiple binding when editing...?
+    // TODO: unbind on element remove
+    // TODO: apply to ALL elements
+    const elements = Array.prototype.slice.call(document.getElementsByClassName(animation.elementId || animation.id || ''));
+    if (!elements.length) {
+        warnElementNotPresent(animation.elementId || animation.id || '');
+        return;
+    }
+    Array.from(elements).forEach(element => {
+        augmentAnimation(animation, element);
+        const defaultState = animation.steps[0].styles;
+        const hoverState = animation.steps[1].styles;
+        function attachDefaultState() {
+            assign(element.style, defaultState);
+        }
+        function attachHoverState() {
+            assign(element.style, hoverState);
+        }
+        attachDefaultState();
+        element.addEventListener('mouseenter', attachHoverState);
+        element.addEventListener('mouseleave', attachDefaultState);
+        // TODO: queue/batch these timeouts
+        setTimeout(() => {
+            element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(animation.easing)}`;
+            if (animation.delay) {
+                element.style.transitionDelay = animation.delay + 's';
+            }
+        });
+    });
+}
+// TODO: unbind on element remove
+export function bindScrollInViewAnimation(animation) {
+    // TODO: apply to ALL matching elements
+    const elements = Array.prototype.slice.call(document.getElementsByClassName(animation.elementId || animation.id || ''));
+    if (!elements.length) {
+        warnElementNotPresent(animation.elementId || animation.id || '');
+        return;
+    }
+    // TODO: if server side rendered and scrolled into view don't animate...
+    Array.from(elements).forEach(element => {
+        augmentAnimation(animation, element);
+        let triggered = false;
+        let pendingAnimation = false;
+        function immediateOnScroll() {
+            if (!triggered && isScrolledIntoView(element)) {
+                triggered = true;
+                pendingAnimation = true;
+                setTimeout(() => {
+                    assign(element.style, animation.steps[1].styles);
+                    if (!animation.repeat) {
+                        document.removeEventListener('scroll', onScroll);
+                    }
+                    setTimeout(() => {
+                        pendingAnimation = false;
+                        if (!animation.repeat) {
+                            element.style.transition = '';
+                            element.style.transitionDelay = '';
+                        }
+                    }, (animation.duration + (animation.delay || 0)) * 1000 + 100);
+                });
+            }
+            else if (animation.repeat && triggered && !pendingAnimation && !isScrolledIntoView(element)) {
+                // we want to repeat the animation every time the the element is out of view and back again
+                triggered = false;
+                assign(element.style, animation.steps[0].styles);
+            }
+        }
+        // TODO: roll all of these in one for more efficiency of checking all the rects
+        const onScroll = throttle(immediateOnScroll, 200, {
+            leading: false
+        });
+        // TODO: fully in view or partially
+        function isScrolledIntoView(elem) {
+            const rect = elem.getBoundingClientRect();
+            const windowHeight = window.innerHeight;
+            const thresholdPercent = (animation.thresholdPercent || 0) / 100;
+            const threshold = thresholdPercent * windowHeight;
+            // TODO: partial in view? or what if element is larger than screen itself
+            return rect.bottom > threshold && rect.top < windowHeight - threshold // Element is peeking top or bottom
+            ;
+        }
+        const defaultState = animation.steps[0].styles;
+        function attachDefaultState() {
+            assign(element.style, defaultState);
+        }
+        attachDefaultState();
+        // TODO: queue/batch these timeouts!
+        setTimeout(() => {
+            element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(animation.easing)}`;
+            if (animation.delay) {
+                element.style.transitionDelay = animation.delay + 's';
+            }
+        });
+        // TODO: one listener for everything
+        document.addEventListener('scroll', onScroll, {
+            capture: true,
+            passive: true
+        });
+        // Do an initial check
+        immediateOnScroll();
+    });
+}

package/lib/edge/components/block/block.svelte

@@ -1,10 +1,12 @@
 <script context="module"></script>
 
-<script>import { writable } from "svelte/store";
+<script>import { onMount } from "svelte";
+import { writable } from "svelte/store";
 import "../../functions/extract-text-styles.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import "../../functions/get-style.js";
+import { bindAnimations } from "./animator.js";
 import { getComponent, getRepeatItemData } from "./block.helpers.js";
 import BlockStyles from "./components/block-styles.svelte";
 import BlockWrapper from "./components/block-wrapper.svelte";
@@ -100,6 +102,18 @@ $: componentRefProps = () => {
     };
 };
 let childrenContext = writable($context);
+onMount(() => {
+    const blockId = processedBlock().id;
+    const animations = processedBlock().animations;
+    if (animations && blockId) {
+        bindAnimations(animations
+            .filter((item) => item.trigger !== "hover")
+            .map((animation) => ({
+            ...animation,
+            elementId: blockId,
+        })));
+    }
+});
 </script>
 
 {#if canShowBlock()}

package/lib/edge/components/content/components/enable-editor.svelte

@@ -17,6 +17,7 @@ import { getDefaultCanTrack } from "../../../helpers/canTrack.js";
 import { logger } from "../../../helpers/logger.js";
 import "../../../helpers/preview-lru-cache/set.js";
 import { registerInsertMenu, setupBrowserForEditing, } from "../../../scripts/init-editing.js";
+import { triggerAnimation } from "../../block/animator.js";
 export let builderContextSignal;
 export let contentWrapper = undefined;
 export let trustedHosts = undefined;
@@ -83,6 +84,10 @@ function processMessage(event) {
                 forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
                 break;
             }
+            case "builder.triggerAnimation": {
+                triggerAnimation(data.data);
+                break;
+            }
             case "builder.contentUpdate": {
                 const messageContent = data.data;
                 const key = messageContent.key ||

package/lib/edge/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.12.6";
+export declare const SDK_VERSION = "0.12.7";

package/lib/edge/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "0.12.6";
+export const SDK_VERSION = "0.12.7";