2a5bac2bb3
* major JSDoc write up * removed ESLint `no-bitwise` exception, it only applies to specific functions and not the entire code * the `SVGCubicMorph` component will remove un-necessary `Z` path commands when is the case for better out of the box animation * fixed a minor disambiguation with `filterEffects` and `drop-shadow` property and its `dropshadow` interpolation function * TypeScript strong: all files are modules, easy to implement in any third party app * updated `CubicBezier` and SVGPathCommander * code cleanup
96 lines
2.8 KiB
JavaScript
96 lines
2.8 KiB
JavaScript
import KEC from '../objects/kute';
|
|
import getInlineStyle from '../process/getInlineStyle';
|
|
import defaultValues from '../objects/defaultValues';
|
|
import trueProperty from '../util/trueProperty';
|
|
import numbers from '../interpolation/numbers';
|
|
|
|
// Component Const
|
|
const transformProperty = trueProperty('transform');
|
|
const supportTransform = transformProperty in document.body.style ? 1 : 0;
|
|
|
|
// Component Functions
|
|
/**
|
|
* Returns the property current style.
|
|
*/
|
|
function getComponentCurrentValue(/* tweenProp, value */) {
|
|
const currentTransform = getInlineStyle(this.element);
|
|
const { left } = this.element.style;
|
|
const { top } = this.element.style;
|
|
let x = 0;
|
|
let y = 0;
|
|
|
|
if (supportTransform && currentTransform.translate) {
|
|
[x, y] = currentTransform.translate;
|
|
} else {
|
|
x = Number.isFinite(left * 1) ? left : defaultValues.move[0];
|
|
y = Number.isFinite(top * 1) ? top : defaultValues.move[1];
|
|
}
|
|
|
|
return [x, y];
|
|
}
|
|
/**
|
|
* Returns the property tween object.
|
|
* @param {string} _ property name
|
|
* @param {string} value property value
|
|
* @returns {number[]} the property tween object
|
|
*/
|
|
function prepareComponentValue(/* tweenProp */_, value) {
|
|
const x = Number.isFinite(value * 1) ? parseInt(value, 10) : parseInt(value[0], 10) || 0;
|
|
const y = parseInt(value[1], 10) || 0;
|
|
|
|
return [x, y];
|
|
}
|
|
|
|
/**
|
|
* Sets the property update function.
|
|
* @param {string} tweenProp the `path` property
|
|
*/
|
|
export function onStartComponent(tweenProp/* , value */) {
|
|
if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) {
|
|
if (supportTransform) {
|
|
KEC[tweenProp] = (elem, a, b, v) => {
|
|
/* eslint-disable-next-line no-param-reassign -- impossible to satisfy */
|
|
elem.style[transformProperty] = `translate(${numbers(a[0], b[0], v)}px,${numbers(a[1], b[1], v)}px)`;
|
|
};
|
|
} else {
|
|
KEC[tweenProp] = (elem, a, b, v) => {
|
|
if (a[0] || b[0]) {
|
|
/* eslint-disable-next-line no-param-reassign -- impossible to satisfy */
|
|
elem.style.left = `${numbers(a[0], b[0], v)}px`;
|
|
}
|
|
if (a[1] || b[1]) {
|
|
/* eslint-disable-next-line no-param-reassign -- impossible to satisfy */
|
|
elem.style.top = `${numbers(a[1], b[1], v)}px`;
|
|
}
|
|
};
|
|
}
|
|
}
|
|
}
|
|
|
|
// All Component Functions
|
|
const componentFunctions = {
|
|
prepareStart: getComponentCurrentValue,
|
|
prepareProperty: prepareComponentValue,
|
|
onStart: onStartComponent,
|
|
};
|
|
|
|
// Base Component
|
|
export const baseCrossBrowserMove = {
|
|
component: 'baseCrossBrowserMove',
|
|
property: 'move',
|
|
Interpolate: { numbers },
|
|
functions: { onStart: onStartComponent },
|
|
};
|
|
|
|
// Full Component
|
|
const crossBrowserMove = {
|
|
component: 'crossBrowserMove',
|
|
property: 'move',
|
|
defaultValue: [0, 0],
|
|
Interpolate: { numbers },
|
|
functions: componentFunctions,
|
|
Util: { trueProperty },
|
|
};
|
|
|
|
export default crossBrowserMove;
|