@jsenv/dom 0.6.0 → 0.7.0

package/src/transition/dom_transition.js

@@ -1,254 +0,0 @@
-/**
- * TODO: use style_controller.js
- *
- * - Able to force transition styles
- * - Able to read natural styles (getUnderlyingValue)
- * - Able to getWith/Height/opacity without transition
- *
- */
-
-import { getHeight } from "../size/get_height.js";
-import { getWidth } from "../size/get_width.js";
-import { addWillChange } from "../style/dom_styles.js";
-import { parseTransform } from "./transform_style_parser.js";
-import { createTimelineTransition } from "./transition_playback.js";
-
-import.meta.css = /* css */ `
-  /* Transition data attributes override inline styles using CSS custom properties */
-  *[data-transition-opacity] {
-    opacity: var(--ui-transition-opacity) !important;
-  }
-
-  *[data-transition-translate-x] {
-    transform: translateX(var(--ui-transition-translate-x)) !important;
-  }
-
-  *[data-transition-width] {
-    width: var(--ui-transition-width) !important;
-  }
-
-  *[data-transition-height] {
-    height: var(--ui-transition-height) !important;
-  }
-`;
-
-export const createHeightTransition = (element, to, options) => {
-  const heightTransition = createTimelineTransition({
-    ...options,
-    constructor: createHeightTransition,
-    key: element,
-    to,
-    isVisual: true,
-    minDiff: 10,
-    lifecycle: {
-      setup: () => {
-        const restoreWillChange = addWillChange(element, "height");
-        return {
-          from: getHeight(element),
-          update: ({ value }) => {
-            const valueWithUnit = `${value}px`;
-            element.setAttribute("data-transition-height", valueWithUnit);
-            element.style.setProperty("--ui-transition-height", valueWithUnit);
-          },
-          teardown: () => {
-            element.removeAttribute("data-transition-height");
-            element.style.removeProperty("--ui-transition-height");
-            restoreWillChange();
-          },
-          restore: () => {
-            element.removeAttribute("data-transition-height");
-            element.style.removeProperty("--ui-transition-height");
-          },
-        };
-      },
-    },
-  });
-  return heightTransition;
-};
-export const createWidthTransition = (element, to, options) => {
-  const widthTransition = createTimelineTransition({
-    ...options,
-    constructor: createWidthTransition,
-    key: element,
-    to,
-    minDiff: 10,
-    isVisual: true,
-    lifecycle: {
-      setup: () => {
-        const restoreWillChange = addWillChange(element, "width");
-        return {
-          from: getWidth(element),
-          update: ({ value }) => {
-            const valueWithUnit = `${value}px`;
-            element.setAttribute("data-transition-width", valueWithUnit);
-            element.style.setProperty("--ui-transition-width", valueWithUnit);
-          },
-          teardown: () => {
-            element.removeAttribute("data-transition-width");
-            element.style.removeProperty("--ui-transition-width");
-            restoreWillChange();
-          },
-          restore: () => {
-            element.removeAttribute("data-transition-width");
-            element.style.removeProperty("--ui-transition-width");
-          },
-        };
-      },
-    },
-  });
-  return widthTransition;
-};
-export const createOpacityTransition = (element, to, options = {}) => {
-  const opacityTransition = createTimelineTransition({
-    ...options,
-    constructor: createOpacityTransition,
-    key: element,
-    to,
-    minDiff: 0.1,
-    isVisual: true,
-    lifecycle: {
-      setup: () => {
-        const restoreWillChange = addWillChange(element, "opacity");
-        return {
-          from: getOpacity(element),
-          update: ({ value }) => {
-            element.setAttribute("data-transition-opacity", value);
-            element.style.setProperty("--ui-transition-opacity", value);
-          },
-          teardown: () => {
-            element.removeAttribute("data-transition-opacity");
-            element.style.removeProperty("--ui-transition-opacity");
-            restoreWillChange();
-          },
-          restore: () => {
-            element.removeAttribute("data-transition-opacity");
-            element.style.removeProperty("--ui-transition-opacity");
-          },
-        };
-      },
-    },
-  });
-  return opacityTransition;
-};
-export const getOpacity = (element) => {
-  return parseFloat(getComputedStyle(element).opacity) || 0;
-};
-
-export const createTranslateXTransition = (element, to, options) => {
-  let unit = "px";
-  if (typeof to === "string") {
-    if (to.endsWith("%")) {
-      unit = "%";
-    }
-    to = parseFloat(to);
-  }
-
-  const translateXTransition = createTimelineTransition({
-    ...options,
-    constructor: createTranslateXTransition,
-    key: element,
-    to,
-    minDiff: 10,
-    isVisual: true,
-    lifecycle: {
-      setup: () => {
-        const restoreWillChange = addWillChange(element, "transform");
-        return {
-          from: getTranslateX(element),
-          update: ({ value }) => {
-            const valueWithUnit = `${value}${unit}`;
-            element.setAttribute("data-transition-translate-x", valueWithUnit);
-            element.style.setProperty(
-              "--ui-transition-translate-x",
-              valueWithUnit,
-            );
-          },
-          teardown: () => {
-            restoreWillChange();
-            element.removeAttribute("data-transition-translate-x");
-            element.style.removeProperty("--ui-transition-translate-x");
-          },
-          restore: () => {
-            element.removeAttribute("data-transition-translate-x");
-            element.style.removeProperty("--ui-transition-translate-x");
-          },
-        };
-      },
-    },
-  });
-  return translateXTransition;
-};
-export const getTranslateX = (element) => {
-  const transform = getComputedStyle(element).transform;
-  const transformMap = parseTransform(transform);
-  return transformMap.get("translateX")?.value || 0;
-};
-
-// Helper functions for getting natural (non-transition) values
-export const getOpacityWithoutTransition = (element) => {
-  const transitionOpacity = element.getAttribute("data-transition-opacity");
-
-  // Temporarily remove transition attribute
-  element.removeAttribute("data-transition-opacity");
-
-  const naturalValue = parseFloat(getComputedStyle(element).opacity) || 0;
-
-  // Restore transition attribute if it existed
-  if (transitionOpacity !== null) {
-    element.setAttribute("data-transition-opacity", transitionOpacity);
-  }
-
-  return naturalValue;
-};
-
-export const getTranslateXWithoutTransition = (element) => {
-  const transitionTranslateX = element.getAttribute(
-    "data-transition-translate-x",
-  );
-
-  // Temporarily remove transition attribute
-  element.removeAttribute("data-transition-translate-x");
-
-  const transform = getComputedStyle(element).transform;
-  const transformMap = parseTransform(transform);
-  const naturalValue = transformMap.get("translateX")?.value || 0;
-
-  // Restore transition attribute if it existed
-  if (transitionTranslateX !== null) {
-    element.setAttribute("data-transition-translate-x", transitionTranslateX);
-  }
-
-  return naturalValue;
-};
-
-export const getWidthWithoutTransition = (element) => {
-  const transitionWidth = element.getAttribute("data-transition-width");
-
-  // Temporarily remove transition attribute
-  element.removeAttribute("data-transition-width");
-
-  const naturalValue = getWidth(element);
-
-  // Restore transition attribute if it existed
-  if (transitionWidth !== null) {
-    element.setAttribute("data-transition-width", transitionWidth);
-  }
-
-  return naturalValue;
-};
-
-export const getHeightWithoutTransition = (element) => {
-  const transitionHeight = element.getAttribute("data-transition-height");
-
-  // Temporarily remove transition attribute
-  element.removeAttribute("data-transition-height");
-
-  const naturalValue = getHeight(element);
-
-  // Restore transition attribute if it existed
-  if (transitionHeight !== null) {
-    element.setAttribute("data-transition-height", transitionHeight);
-  }
-
-  return naturalValue;
-};

package/src/transition/easing.js

@@ -1,48 +0,0 @@
-export const EASING = {
-  LINEAR: (x) => x,
-  EASE: (x) => {
-    return cubicBezier(x, 0.25, 0.1, 0.25, 1.0);
-  },
-  EASE_IN: (x) => {
-    return cubicBezier(x, 0.42, 0, 1.0, 1.0);
-  },
-  EASE_OUT: (x) => {
-    return cubicBezier(x, 0, 0, 0.58, 1.0);
-  },
-  EASE_IN_OUT: (x) => {
-    return cubicBezier(x, 0.42, 0, 0.58, 1.0);
-  },
-  EASE_IN_OUT_CUBIC: (x) => {
-    return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
-  },
-  EASE_IN_EXPO: (x) => {
-    return x === 0 ? 0 : Math.pow(2, 10 * x - 10);
-  },
-  EASE_OUT_EXPO: (x) => {
-    return x === 1 ? 1 : 1 - Math.pow(2, -10 * x);
-  },
-  EASE_OUT_ELASTIC: (x) => {
-    const c4 = (2 * Math.PI) / 3;
-    if (x === 0) {
-      return 0;
-    }
-    if (x === 1) {
-      return 1;
-    }
-    return Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1;
-  },
-  EASE_OUT_CUBIC: (x) => {
-    return 1 - Math.pow(1 - x, 3);
-  },
-};
-
-export const easingDefault = (x) => cubicBezier(x, 0.1, 0.4, 0.6, 1.0);
-
-export const cubicBezier = (t, initial, p1, p2, final) => {
-  return (
-    (1 - t) * (1 - t) * (1 - t) * initial +
-    3 * (1 - t) * (1 - t) * t * p1 +
-    3 * (1 - t) * t * t * p2 +
-    t * t * t * final
-  );
-};

package/src/transition/group_transition.js

@@ -1,261 +0,0 @@
-import { createTransition } from "./transition_playback.js";
-
-// transition that manages multiple transitions
-export const createGroupTransition = (transitionArray) => {
-  let finishedCount = 0;
-  let duration = 0;
-  let childCount = transitionArray.length;
-  for (const childTransition of transitionArray) {
-    if (childTransition.duration > duration) {
-      duration = childTransition.duration;
-    }
-  }
-
-  const groupTransition = createTransition({
-    constructor: createGroupTransition,
-    from: 0,
-    to: 1,
-    duration,
-    lifecycle: {
-      setup: (transition) => {
-        finishedCount = 0;
-
-        const cleanupCallbackSet = new Set();
-        for (const childTransition of transitionArray) {
-          const removeFinishListener = childTransition.channels.finish.add(
-            // eslint-disable-next-line no-loop-func
-            () => {
-              finishedCount++;
-              const allFinished = finishedCount === childCount;
-              if (allFinished) {
-                transition.finish();
-              }
-            },
-          );
-          cleanupCallbackSet.add(removeFinishListener);
-          childTransition.play();
-
-          const removeUpdateListener = childTransition.channels.update.add(
-            () => {
-              // Calculate average progress (handle undefined progress)
-              let totalProgress = 0;
-              let progressCount = 0;
-              for (const t of transitionArray) {
-                if (typeof t.progress === "number") {
-                  totalProgress += t.progress;
-                  progressCount++;
-                }
-              }
-              const averageProgress =
-                progressCount > 0 ? totalProgress / progressCount : 0;
-              // Expose progress on the group transition for external access
-              transition.progress = averageProgress;
-              // Update this transition's value with average progress
-              const isLast = averageProgress >= 1;
-              transition.update(averageProgress, isLast);
-            },
-          );
-          cleanupCallbackSet.add(removeUpdateListener);
-        }
-
-        return {
-          update: () => {},
-          teardown: () => {
-            for (const cleanupCallback of cleanupCallbackSet) {
-              cleanupCallback();
-            }
-            cleanupCallbackSet.clear();
-          },
-          restore: () => {},
-        };
-      },
-      pause: () => {
-        for (const childTransition of transitionArray) {
-          if (childTransition.playState === "running") {
-            childTransition.pause();
-          }
-        }
-        return () => {
-          for (const childTransition of transitionArray) {
-            if (childTransition.playState === "paused") {
-              childTransition.play();
-            }
-          }
-        };
-      },
-
-      cancel: () => {
-        for (const childTransition of transitionArray) {
-          if (childTransition.playState !== "idle") {
-            childTransition.cancel();
-          }
-        }
-      },
-
-      finish: () => {
-        for (const childTransition of transitionArray) {
-          if (childTransition.playState !== "finished") {
-            childTransition.finish();
-          }
-        }
-      },
-
-      reverse: () => {
-        for (const childTransition of transitionArray) {
-          if (
-            childTransition.playState === "running" ||
-            childTransition.playState === "paused"
-          ) {
-            childTransition.reverse();
-          }
-        }
-      },
-    },
-  });
-  return groupTransition;
-};
-
-/**
- * Creates an interface that manages ongoing transitions
- * and handles target updates automatically
- */
-export const createGroupTransitionController = () => {
-  // Track all active transitions for cancellation and matching
-  const activeTransitions = new Set();
-
-  return {
-    /**
-     * Animate multiple transitions simultaneously
-     * Automatically handles updateTarget for transitions that match constructor + targetKey
-     * @param {Array} transitions - Array of transition objects with constructor and targetKey properties
-     * @param {Object} options - Transition options
-     * @param {Function} options.onChange - Called with (changeEntries, isLast) during transition
-     * @param {Function} options.onFinish - Called when all transitions complete
-     * @returns {Object} Playback controller with play(), pause(), cancel(), etc.
-     */
-    animate: (transitions, options = {}) => {
-      const { onChange, onFinish } = options;
-
-      if (transitions.length === 0) {
-        // No transitions to animate, call onFinish immediately
-        if (onFinish) {
-          onFinish([]);
-        }
-        return {
-          play: () => {},
-          pause: () => {},
-          cancel: () => {},
-          finish: () => {},
-          playState: "idle",
-          channels: { update: { add: () => {} }, finish: { add: () => {} } },
-        };
-      }
-
-      const newTransitions = [];
-      const updatedTransitions = [];
-
-      // Separate transitions into new vs updates to existing ones
-      for (const transition of transitions) {
-        // Look for existing transition with same constructor and targetKey
-        let existingTransition = null;
-        for (const transitionCandidate of activeTransitions) {
-          if (
-            transitionCandidate.constructor === transition.constructor &&
-            transitionCandidate.key === transition.key
-          ) {
-            existingTransition = transitionCandidate;
-            break;
-          }
-        }
-
-        if (existingTransition && existingTransition.playState === "running") {
-          // Update the existing transition's target if it supports updateTarget
-          if (existingTransition.updateTarget) {
-            existingTransition.updateTarget(transition.to);
-          }
-          updatedTransitions.push(existingTransition);
-        } else {
-          // Track this new transition
-          activeTransitions.add(transition);
-          // Clean up tracking when transition finishes
-          transition.channels.finish.add(() => {
-            activeTransitions.delete(transition);
-          });
-
-          newTransitions.push(transition);
-        }
-      }
-
-      // If we only have updated transitions (no new ones), return a minimal controller
-      if (newTransitions.length === 0) {
-        return {
-          play: () => {}, // Already playing
-          pause: () =>
-            updatedTransitions.forEach((transition) => transition.pause()),
-          cancel: () =>
-            updatedTransitions.forEach((transition) => transition.cancel()),
-          finish: () =>
-            updatedTransitions.forEach((transition) => transition.finish()),
-          reverse: () =>
-            updatedTransitions.forEach((transition) => transition.reverse()),
-          playState: "running", // All are already running
-          channels: {
-            update: { add: () => {} }, // Update tracking already set up
-            finish: { add: () => {} },
-          },
-        };
-      }
-
-      // Create group transition to coordinate new transitions only
-      const groupTransition = createGroupTransition(newTransitions);
-
-      // Add unified update tracking for ALL transitions (new + updated)
-      if (onChange) {
-        groupTransition.channels.update.add((transition) => {
-          // Build change entries for current state of ALL transitions
-          const changeEntries = [...newTransitions, ...updatedTransitions].map(
-            (transition) => ({
-              transition,
-              value: transition.value,
-            }),
-          );
-
-          const isLast = transition.value >= 1; // isLast = value >= 1 (since group tracks 0-1)
-          onChange(changeEntries, isLast);
-        });
-      }
-
-      // Add finish tracking
-      if (onFinish) {
-        groupTransition.channels.finish.add(() => {
-          const changeEntries = [...newTransitions, ...updatedTransitions].map(
-            (transition) => ({
-              transition,
-              value: transition.value,
-            }),
-          );
-          onFinish(changeEntries);
-        });
-      }
-
-      return groupTransition;
-    },
-
-    /**
-     * Cancel all ongoing transitions managed by this controller
-     */
-    cancel: () => {
-      // Cancel all active transitions
-      for (const transition of activeTransitions) {
-        if (
-          transition.playState === "running" ||
-          transition.playState === "paused"
-        ) {
-          transition.cancel();
-        }
-      }
-      // Clear the sets - the finish callbacks will handle individual cleanup
-      activeTransitions.clear();
-    },
-  };
-};

package/src/transition/transform_style_parser.js

@@ -1,32 +0,0 @@
-export const parseTransform = (transform) => {
-  if (!transform || transform === "none") return new Map();
-  const transformMap = new Map();
-
-  if (transform.startsWith("matrix(")) {
-    // matrix(a, b, c, d, e, f) where e is translateX and f is translateY
-    const values = transform
-      .match(/matrix\((.*?)\)/)?.[1]
-      .split(",")
-      .map(Number);
-    if (values) {
-      const translateX = values[4]; // e value from matrix
-      transformMap.set("translateX", { value: translateX, unit: "px" });
-      return transformMap;
-    }
-  }
-
-  // For direct transform functions (when set via style.transform)
-  const matches = transform.matchAll(/(\w+)\(([-\d.]+)(%|px|deg)?\)/g);
-  for (const match of matches) {
-    const [, func, value, unit = ""] = match;
-    transformMap.set(func, { value: parseFloat(value), unit });
-  }
-  return transformMap;
-};
-
-export const stringifyTransform = (transformMap) => {
-  if (transformMap.size === 0) return "none";
-  return Array.from(transformMap.entries())
-    .map(([func, { value, unit }]) => `${func}(${value}${unit})`)
-    .join(" ");
-};