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
58 lines
1.6 KiB
JavaScript
58 lines
1.6 KiB
JavaScript
import defaultValues from '../objects/defaultValues';
|
|
import getStyleForProperty from '../process/getStyleForProperty';
|
|
import numbers from '../interpolation/numbers';
|
|
import trueDimension from '../util/trueDimension';
|
|
import { onStartBgPos } from './backgroundPositionBase';
|
|
|
|
// Component Functions
|
|
|
|
/**
|
|
* Returns the property computed style.
|
|
* @param {string} prop the property
|
|
* @returns {string} the property computed style
|
|
*/
|
|
function getBgPos(prop/* , value */) {
|
|
return getStyleForProperty(this.element, prop) || defaultValues[prop];
|
|
}
|
|
|
|
/**
|
|
* Returns the property tween object.
|
|
* @param {string} _ the property name
|
|
* @param {string} value the property value
|
|
* @returns {number[]} the property tween object
|
|
*/
|
|
function prepareBgPos(/* prop, */_, value) {
|
|
if (value instanceof Array) {
|
|
const x = trueDimension(value[0]).v;
|
|
const y = trueDimension(value[1]).v;
|
|
return [!Number.isNaN(x * 1) ? x : 50, !Number.isNaN(y * 1) ? y : 50];
|
|
}
|
|
|
|
let posxy = value.replace(/top|left/g, 0)
|
|
.replace(/right|bottom/g, 100)
|
|
.replace(/center|middle/g, 50);
|
|
|
|
posxy = posxy.split(/(,|\s)/g);
|
|
posxy = posxy.length === 2 ? posxy : [posxy[0], 50];
|
|
return [trueDimension(posxy[0]).v, trueDimension(posxy[1]).v];
|
|
}
|
|
|
|
// All Component Functions
|
|
const bgPositionFunctions = {
|
|
prepareStart: getBgPos,
|
|
prepareProperty: prepareBgPos,
|
|
onStart: onStartBgPos,
|
|
};
|
|
|
|
// Component Full Object
|
|
const BackgroundPosition = {
|
|
component: 'backgroundPositionProp',
|
|
property: 'backgroundPosition',
|
|
defaultValue: [50, 50],
|
|
Interpolate: { numbers },
|
|
functions: bgPositionFunctions,
|
|
Util: { trueDimension },
|
|
};
|
|
|
|
export default BackgroundPosition;
|