@builder.io/sdk-qwik 0.12.6 → 0.12.7

package/lib/browser/index.qwik.cjs

@@ -313,6 +313,201 @@ function getProcessedBlock({ block, context, shouldEvaluateBindings, localState,
   else
     return transformedBlock;
 }
+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);
+    context = this;
+    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++) {
+    const nextSource = arguments[index];
+    if (nextSource != null) {
+      for (const nextKey in nextSource)
+        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()}`) : "";
+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 firstStyles = animation.steps[0].styles;
+  const lastStyles = animation.steps[animation.steps.length - 1].styles;
+  const bothStyles = [
+    firstStyles,
+    lastStyles
+  ];
+  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;
+}
+function triggerAnimation(animation) {
+  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);
+    element.style.transition = "none";
+    element.style.transitionDelay = "0";
+    assign(element.style, animation.steps[0].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);
+      setTimeout(() => {
+        element.style.transition = "";
+        element.style.transitionDelay = "";
+      }, (animation.delay || 0) * 1e3 + animation.duration * 1e3 + 100);
+    });
+  });
+}
+function bindHoverAnimation(animation) {
+  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);
+    setTimeout(() => {
+      element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(animation.easing)}`;
+      if (animation.delay)
+        element.style.transitionDelay = animation.delay + "s";
+    });
+  });
+}
+function bindScrollInViewAnimation(animation) {
+  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);
+    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)) * 1e3 + 100);
+        });
+      } else if (animation.repeat && triggered && !pendingAnimation && !isScrolledIntoView(element)) {
+        triggered = false;
+        assign(element.style, animation.steps[0].styles);
+      }
+    }
+    const onScroll = throttle(immediateOnScroll, 200, {
+      leading: false
+    });
+    function isScrolledIntoView(elem) {
+      const rect = elem.getBoundingClientRect();
+      const windowHeight = window.innerHeight;
+      const thresholdPercent = (animation.thresholdPercent || 0) / 100;
+      const threshold = thresholdPercent * windowHeight;
+      return rect.bottom > threshold && rect.top < windowHeight - threshold;
+    }
+    const defaultState = animation.steps[0].styles;
+    function attachDefaultState() {
+      assign(element.style, defaultState);
+    }
+    attachDefaultState();
+    setTimeout(() => {
+      element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(animation.easing)}`;
+      if (animation.delay)
+        element.style.transitionDelay = animation.delay + "s";
+    });
+    document.addEventListener("scroll", onScroll, {
+      capture: true,
+      passive: true
+    });
+    immediateOnScroll();
+  });
+}
 const getComponent = ({ block, context, registeredComponents }) => {
   var _a;
   const componentName = (_a = getProcessedBlock({
@@ -859,6 +1054,18 @@ const Block = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl(
     props,
     state
   ]));
+  qwik.useVisibleTaskQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [processedBlock2] = qwik.useLexicalScope();
+    const blockId = processedBlock2.value.id;
+    const animations = processedBlock2.value.animations;
+    if (animations && blockId)
+      bindAnimations(animations.filter((item) => item.trigger !== "hover").map((animation) => ({
+        ...animation,
+        elementId: blockId
+      })));
+  }, "Block_component_useVisibleTask_hrTYvqw0Tbs", [
+    processedBlock
+  ]));
   return /* @__PURE__ */ qwik._jsxC(jsxRuntime.Fragment, {
     children: canShowBlock.value ? /* @__PURE__ */ qwik._jsxC(jsxRuntime.Fragment, {
       children: [
@@ -3355,7 +3562,7 @@ const getInteractionPropertiesForEvent = (event) => {
     }
   };
 };
-const SDK_VERSION = "0.12.6";
+const SDK_VERSION = "0.12.7";
 const registry = {};
 function register(type, info) {
   let typeList = registry[type];
@@ -3540,6 +3747,9 @@ const processMessage = function processMessage2(props, state, elementRef, event)
         state.forceReRenderCount = state.forceReRenderCount + 1;
         break;
       }
+      case "builder.triggerAnimation":
+        triggerAnimation(data.data);
+        break;
       case "builder.contentUpdate": {
         const messageContent = data.data;
         const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;

package/lib/browser/index.qwik.mjs

@@ -1,4 +1,4 @@
-import { componentQrl, inlinedQrl, _jsxBranch, _jsxC, Slot as Slot$1, _fnSignal, _IMMUTABLE, createContextId, _jsxQ, useComputedQrl, useLexicalScope, useStore, useContextProvider, _wrapProp, useStylesScopedQrl, useContext, Fragment as Fragment$1, _jsxS, useSignal, useOn, useTaskQrl, createElement } from "@builder.io/qwik";
+import { componentQrl, inlinedQrl, _jsxBranch, _jsxC, Slot as Slot$1, _fnSignal, _IMMUTABLE, createContextId, _jsxQ, useComputedQrl, useLexicalScope, useStore, useContextProvider, useVisibleTaskQrl, _wrapProp, useStylesScopedQrl, useContext, Fragment as Fragment$1, _jsxS, useSignal, useOn, useTaskQrl, createElement } from "@builder.io/qwik";
 import { Fragment } from "@builder.io/qwik/jsx-runtime";
 import { isBrowser as isBrowser$1 } from "@builder.io/qwik/build";
 const EMPTY_HTML_ELEMENTS = /* @__PURE__ */ new Set([
@@ -311,6 +311,201 @@ function getProcessedBlock({ block, context, shouldEvaluateBindings, localState,
   else
     return transformedBlock;
 }
+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);
+    context = this;
+    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++) {
+    const nextSource = arguments[index];
+    if (nextSource != null) {
+      for (const nextKey in nextSource)
+        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()}`) : "";
+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 firstStyles = animation.steps[0].styles;
+  const lastStyles = animation.steps[animation.steps.length - 1].styles;
+  const bothStyles = [
+    firstStyles,
+    lastStyles
+  ];
+  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;
+}
+function triggerAnimation(animation) {
+  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);
+    element.style.transition = "none";
+    element.style.transitionDelay = "0";
+    assign(element.style, animation.steps[0].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);
+      setTimeout(() => {
+        element.style.transition = "";
+        element.style.transitionDelay = "";
+      }, (animation.delay || 0) * 1e3 + animation.duration * 1e3 + 100);
+    });
+  });
+}
+function bindHoverAnimation(animation) {
+  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);
+    setTimeout(() => {
+      element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(animation.easing)}`;
+      if (animation.delay)
+        element.style.transitionDelay = animation.delay + "s";
+    });
+  });
+}
+function bindScrollInViewAnimation(animation) {
+  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);
+    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)) * 1e3 + 100);
+        });
+      } else if (animation.repeat && triggered && !pendingAnimation && !isScrolledIntoView(element)) {
+        triggered = false;
+        assign(element.style, animation.steps[0].styles);
+      }
+    }
+    const onScroll = throttle(immediateOnScroll, 200, {
+      leading: false
+    });
+    function isScrolledIntoView(elem) {
+      const rect = elem.getBoundingClientRect();
+      const windowHeight = window.innerHeight;
+      const thresholdPercent = (animation.thresholdPercent || 0) / 100;
+      const threshold = thresholdPercent * windowHeight;
+      return rect.bottom > threshold && rect.top < windowHeight - threshold;
+    }
+    const defaultState = animation.steps[0].styles;
+    function attachDefaultState() {
+      assign(element.style, defaultState);
+    }
+    attachDefaultState();
+    setTimeout(() => {
+      element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(animation.easing)}`;
+      if (animation.delay)
+        element.style.transitionDelay = animation.delay + "s";
+    });
+    document.addEventListener("scroll", onScroll, {
+      capture: true,
+      passive: true
+    });
+    immediateOnScroll();
+  });
+}
 const getComponent = ({ block, context, registeredComponents }) => {
   var _a;
   const componentName = (_a = getProcessedBlock({
@@ -857,6 +1052,18 @@ const Block = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
     props,
     state
   ]));
+  useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [processedBlock2] = useLexicalScope();
+    const blockId = processedBlock2.value.id;
+    const animations = processedBlock2.value.animations;
+    if (animations && blockId)
+      bindAnimations(animations.filter((item) => item.trigger !== "hover").map((animation) => ({
+        ...animation,
+        elementId: blockId
+      })));
+  }, "Block_component_useVisibleTask_hrTYvqw0Tbs", [
+    processedBlock
+  ]));
   return /* @__PURE__ */ _jsxC(Fragment, {
     children: canShowBlock.value ? /* @__PURE__ */ _jsxC(Fragment, {
       children: [
@@ -3353,7 +3560,7 @@ const getInteractionPropertiesForEvent = (event) => {
     }
   };
 };
-const SDK_VERSION = "0.12.6";
+const SDK_VERSION = "0.12.7";
 const registry = {};
 function register(type, info) {
   let typeList = registry[type];
@@ -3538,6 +3745,9 @@ const processMessage = function processMessage2(props, state, elementRef, event)
         state.forceReRenderCount = state.forceReRenderCount + 1;
         break;
       }
+      case "builder.triggerAnimation":
+        triggerAnimation(data.data);
+        break;
       case "builder.contentUpdate": {
         const messageContent = data.data;
         const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;