933d61de19
* added ESLint and updated all code base * updated SVGPathCommander, CubicBezier, shorter-js, minifill * updated polyfills * minor CSS fixes
70 lines
2.9 KiB
JavaScript
70 lines
2.9 KiB
JavaScript
import KUTE from '../objects/kute.js';
|
|
import numbers from '../interpolation/numbers.js';
|
|
import colors from '../interpolation/colors.js';
|
|
|
|
/* filterEffects = {
|
|
property: 'filter',
|
|
subProperties: {},
|
|
defaultValue: {},
|
|
interpolators: {},
|
|
functions = { prepareStart, prepareProperty, onStart, crossCheck }
|
|
} */
|
|
|
|
// Component Interpolation
|
|
export function dropShadow(a, b, v) {
|
|
const params = [];
|
|
const unit = 'px';
|
|
|
|
for (let i = 0; i < 3; i += 1) {
|
|
params[i] = ((numbers(a[i], b[i], v) * 100 >> 0) / 100) + unit;
|
|
}
|
|
return `drop-shadow(${params.concat(colors(a[3], b[3], v)).join(' ')})`;
|
|
}
|
|
// Component Functions
|
|
export function onStartFilter(tweenProp) {
|
|
if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
|
|
KUTE[tweenProp] = (elem, a, b, v) => {
|
|
elem.style[tweenProp] = (b.url ? `url(${b.url})` : '')
|
|
+ (a.opacity || b.opacity ? `opacity(${((numbers(a.opacity, b.opacity, v) * 100) >> 0) / 100}%)` : '')
|
|
+ (a.blur || b.blur ? `blur(${((numbers(a.blur, b.blur, v) * 100) >> 0) / 100}em)` : '')
|
|
+ (a.saturate || b.saturate ? `saturate(${((numbers(a.saturate, b.saturate, v) * 100) >> 0) / 100}%)` : '')
|
|
+ (a.invert || b.invert ? `invert(${((numbers(a.invert, b.invert, v) * 100) >> 0) / 100}%)` : '')
|
|
+ (a.grayscale || b.grayscale ? `grayscale(${((numbers(a.grayscale, b.grayscale, v) * 100) >> 0) / 100}%)` : '')
|
|
+ (a.hueRotate || b.hueRotate ? `hue-rotate(${((numbers(a.hueRotate, b.hueRotate, v) * 100) >> 0) / 100}deg)` : '')
|
|
+ (a.sepia || b.sepia ? `sepia(${((numbers(a.sepia, b.sepia, v) * 100) >> 0) / 100}%)` : '')
|
|
+ (a.brightness || b.brightness ? `brightness(${((numbers(a.brightness, b.brightness, v) * 100) >> 0) / 100}%)` : '')
|
|
+ (a.contrast || b.contrast ? `contrast(${((numbers(a.contrast, b.contrast, v) * 100) >> 0) / 100}%)` : '')
|
|
+ (a.dropShadow || b.dropShadow ? dropShadow(a.dropShadow, b.dropShadow, v) : '');
|
|
};
|
|
}
|
|
}
|
|
|
|
// Base Component
|
|
const baseFilter = {
|
|
component: 'baseFilter',
|
|
property: 'filter',
|
|
// opacity function interfere with opacityProperty
|
|
// subProperties: ['blur', 'brightness','contrast','dropShadow',
|
|
// 'hueRotate','grayscale','invert','opacity','saturate','sepia','url'],
|
|
// defaultValue: {
|
|
// opacity: 100, blur: 0, saturate: 100, grayscale: 0,
|
|
// brightness: 100, contrast: 100, sepia: 0, invert: 0, hueRotate:0,
|
|
// dropShadow: [0,0,0,{r:0,g:0,b:0}], url:''
|
|
// },
|
|
Interpolate: {
|
|
opacity: numbers,
|
|
blur: numbers,
|
|
saturate: numbers,
|
|
grayscale: numbers,
|
|
brightness: numbers,
|
|
contrast: numbers,
|
|
sepia: numbers,
|
|
invert: numbers,
|
|
hueRotate: numbers,
|
|
dropShadow: { numbers, colors, dropShadow },
|
|
},
|
|
functions: { onStart: onStartFilter },
|
|
};
|
|
|
|
export default baseFilter;
|