'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); var utils = require('@motionone/utils'); var data = require('../data.cjs.js'); /** * A list of all transformable axes. We'll use this list to generated a version * of each axes for each transform. */ const axes = ["", "X", "Y", "Z"]; /** * An ordered array of each transformable value. By default, transform values * will be sorted to this order. */ const order = ["translate", "scale", "rotate", "skew"]; const transformAlias = { x: "translateX", y: "translateY", z: "translateZ", }; const rotation = { syntax: "", initialValue: "0deg", toDefaultUnit: (v) => v + "deg", }; const baseTransformProperties = { translate: { syntax: "", initialValue: "0px", toDefaultUnit: (v) => v + "px", }, rotate: rotation, scale: { syntax: "", initialValue: 1, toDefaultUnit: utils.noopReturn, }, skew: rotation, }; const transformDefinitions = new Map(); const asTransformCssVar = (name) => `--motion-${name}`; /** * Generate a list of every possible transform key */ const transforms = ["x", "y", "z"]; order.forEach((name) => { axes.forEach((axis) => { transforms.push(name + axis); transformDefinitions.set(asTransformCssVar(name + axis), baseTransformProperties[name]); }); }); /** * A function to use with Array.sort to sort transform keys by their default order. */ const compareTransformOrder = (a, b) => transforms.indexOf(a) - transforms.indexOf(b); /** * Provide a quick way to check if a string is the name of a transform */ const transformLookup = new Set(transforms); const isTransform = (name) => transformLookup.has(name); const addTransformToElement = (element, name) => { // Map x to translateX etc if (transformAlias[name]) name = transformAlias[name]; const { transforms } = data.getAnimationData(element); utils.addUniqueItem(transforms, name); /** * TODO: An optimisation here could be to cache the transform in element data * and only update if this has changed. */ element.style.transform = buildTransformTemplate(transforms); }; const buildTransformTemplate = (transforms) => transforms .sort(compareTransformOrder) .reduce(transformListToString, "") .trim(); const transformListToString = (template, name) => `${template} ${name}(var(${asTransformCssVar(name)}))`; exports.addTransformToElement = addTransformToElement; exports.asTransformCssVar = asTransformCssVar; exports.axes = axes; exports.buildTransformTemplate = buildTransformTemplate; exports.compareTransformOrder = compareTransformOrder; exports.isTransform = isTransform; exports.transformAlias = transformAlias; exports.transformDefinitions = transformDefinitions;