@builder.io/sdk-qwik 0.12.6 → 0.12.8

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: [
@@ -3145,17 +3352,6 @@ async function fetchEntries(options) {
   }
 }
 const getAllContent = fetchEntries;
-const DEFAULT_TRUSTED_HOSTS = [
-  "*.beta.builder.io",
-  "beta.builder.io",
-  "builder.io",
-  "localhost",
-  "qa.builder.io"
-];
-function isFromTrustedHost(trustedHosts, e) {
-  const url = new URL(e.origin), hostname = url.hostname;
-  return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex((trustedHost) => trustedHost.startsWith("*.") ? hostname.endsWith(trustedHost.slice(1)) : trustedHost === hostname) > -1;
-}
 function isPreviewing() {
   if (!isBrowser())
     return false;
@@ -3355,7 +3551,18 @@ const getInteractionPropertiesForEvent = (event) => {
     }
   };
 };
-const SDK_VERSION = "0.12.6";
+const DEFAULT_TRUSTED_HOSTS = [
+  "*.beta.builder.io",
+  "beta.builder.io",
+  "builder.io",
+  "localhost",
+  "qa.builder.io"
+];
+function isFromTrustedHost(trustedHosts, e) {
+  const url = new URL(e.origin), hostname = url.hostname;
+  return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex((trustedHost) => trustedHost.startsWith("*.") ? hostname.endsWith(trustedHost.slice(1)) : trustedHost === hostname) > -1;
+}
+const SDK_VERSION = "0.12.8";
 const registry = {};
 function register(type, info) {
   let typeList = registry[type];
@@ -3491,6 +3698,53 @@ const setupBrowserForEditing = (options = {}) => {
     });
   }
 };
+const createEditorListener = ({ model, trustedHosts, callbacks }) => {
+  return (event) => {
+    if (!isFromTrustedHost(trustedHosts, event))
+      return;
+    const { data } = event;
+    if (data)
+      switch (data.type) {
+        case "builder.configureSdk":
+          callbacks.configureSdk(data.data);
+          break;
+        case "builder.triggerAnimation":
+          callbacks.animation(data.data);
+          break;
+        case "builder.contentUpdate": {
+          const messageContent = data.data;
+          const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
+          const contentData = messageContent.data;
+          if (key === model)
+            callbacks.contentUpdate(contentData);
+          break;
+        }
+      }
+  };
+};
+const subscribeToEditor = (model, callback, options) => {
+  if (!isBrowser) {
+    logger.warn("`subscribeToEditor` only works in the browser. It currently seems to be running on the server.");
+    return () => {
+    };
+  }
+  setupBrowserForEditing();
+  const listener = createEditorListener({
+    callbacks: {
+      contentUpdate: callback,
+      animation: () => {
+      },
+      configureSdk: () => {
+      }
+    },
+    model,
+    trustedHosts: options == null ? void 0 : options.trustedHosts
+  });
+  window.addEventListener("message", listener);
+  return () => {
+    window.removeEventListener("message", listener);
+  };
+};
 const mergeNewRootState = function mergeNewRootState2(props, state, elementRef, newData) {
   var _a, _b;
   const combinedState = {
@@ -3520,37 +3774,33 @@ const mergeNewContent = function mergeNewContent2(props, state, elementRef, newC
   props.builderContextSignal.content = newContentValue;
 };
 const processMessage = function processMessage2(props, state, elementRef, event) {
-  var _a;
-  if (!isFromTrustedHost(props.trustedHosts, event))
-    return;
-  const { data } = event;
-  if (data)
-    switch (data.type) {
-      case "builder.configureSdk": {
-        const messageContent = data.data;
+  return createEditorListener({
+    model: props.model,
+    trustedHosts: props.trustedHosts,
+    callbacks: {
+      configureSdk: (messageContent) => {
+        var _a;
         const { breakpoints, contentId } = messageContent;
         if (!contentId || contentId !== ((_a = props.builderContextSignal.content) == null ? void 0 : _a.id))
           return;
-        if (breakpoints)
+        if (breakpoints) {
           mergeNewContent(props, state, elementRef, {
             meta: {
               breakpoints
             }
           });
-        state.forceReRenderCount = state.forceReRenderCount + 1;
-        break;
-      }
-      case "builder.contentUpdate": {
-        const messageContent = data.data;
-        const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
-        const contentData = messageContent.data;
-        if (key === props.model) {
-          mergeNewContent(props, state, elementRef, contentData);
           state.forceReRenderCount = state.forceReRenderCount + 1;
         }
-        break;
+      },
+      animation: (animation) => {
+        triggerAnimation(animation);
+      },
+      contentUpdate: (newContent) => {
+        mergeNewContent(props, state, elementRef, newContent);
+        state.forceReRenderCount = state.forceReRenderCount + 1;
       }
     }
+  })(event);
 };
 const evaluateJsCode = function evaluateJsCode2(props, state, elementRef) {
   var _a, _b;
@@ -4683,4 +4933,5 @@ exports.isEditing = isEditing;
 exports.isPreviewing = isPreviewing;
 exports.register = register;
 exports.setEditorSettings = setEditorSettings;
+exports.subscribeToEditor = subscribeToEditor;
 exports.track = track;