258 lines
34 KiB
JavaScript
258 lines
34 KiB
JavaScript
|
/**
|
||
|
|
* @license
|
||
|
|
* Copyright Google LLC All Rights Reserved.
|
||
|
|
*
|
||
|
|
* Use of this source code is governed by an MIT-style license that can be
|
||
|
|
* found in the LICENSE file at https://angular.io/license
|
||
|
|
*/
|
||
|
|
import { sequence } from '@angular/animations';
|
||
|
|
import { invalidNodeType, invalidParamValue, invalidStyleParams, invalidTimingValue, negativeDelayValue, negativeStepValue } from './error_helpers';
|
||
|
|
export const ONE_SECOND = 1000;
|
||
|
|
export const SUBSTITUTION_EXPR_START = '{{';
|
||
|
|
export const SUBSTITUTION_EXPR_END = '}}';
|
||
|
|
export const ENTER_CLASSNAME = 'ng-enter';
|
||
|
|
export const LEAVE_CLASSNAME = 'ng-leave';
|
||
|
|
export const NG_TRIGGER_CLASSNAME = 'ng-trigger';
|
||
|
|
export const NG_TRIGGER_SELECTOR = '.ng-trigger';
|
||
|
|
export const NG_ANIMATING_CLASSNAME = 'ng-animating';
|
||
|
|
export const NG_ANIMATING_SELECTOR = '.ng-animating';
|
||
|
|
export function resolveTimingValue(value) {
|
||
|
|
if (typeof value == 'number')
|
||
|
|
return value;
|
||
|
|
const matches = value.match(/^(-?[\.\d]+)(m?s)/);
|
||
|
|
if (!matches || matches.length < 2)
|
||
|
|
return 0;
|
||
|
|
return _convertTimeValueToMS(parseFloat(matches[1]), matches[2]);
|
||
|
|
}
|
||
|
|
function _convertTimeValueToMS(value, unit) {
|
||
|
|
switch (unit) {
|
||
|
|
case 's':
|
||
|
|
return value * ONE_SECOND;
|
||
|
|
default: // ms or something else
|
||
|
|
return value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
export function resolveTiming(timings, errors, allowNegativeValues) {
|
||
|
|
return timings.hasOwnProperty('duration') ?
|
||
|
|
timings :
|
||
|
|
parseTimeExpression(timings, errors, allowNegativeValues);
|
||
|
|
}
|
||
|
|
function parseTimeExpression(exp, errors, allowNegativeValues) {
|
||
|
|
const regex = /^(-?[\.\d]+)(m?s)(?:\s+(-?[\.\d]+)(m?s))?(?:\s+([-a-z]+(?:\(.+?\))?))?$/i;
|
||
|
|
let duration;
|
||
|
|
let delay = 0;
|
||
|
|
let easing = '';
|
||
|
|
if (typeof exp === 'string') {
|
||
|
|
const matches = exp.match(regex);
|
||
|
|
if (matches === null) {
|
||
|
|
errors.push(invalidTimingValue(exp));
|
||
|
|
return { duration: 0, delay: 0, easing: '' };
|
||
|
|
}
|
||
|
|
duration = _convertTimeValueToMS(parseFloat(matches[1]), matches[2]);
|
||
|
|
const delayMatch = matches[3];
|
||
|
|
if (delayMatch != null) {
|
||
|
|
delay = _convertTimeValueToMS(parseFloat(delayMatch), matches[4]);
|
||
|
|
}
|
||
|
|
const easingVal = matches[5];
|
||
|
|
if (easingVal) {
|
||
|
|
easing = easingVal;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
duration = exp;
|
||
|
|
}
|
||
|
|
if (!allowNegativeValues) {
|
||
|
|
let containsErrors = false;
|
||
|
|
let startIndex = errors.length;
|
||
|
|
if (duration < 0) {
|
||
|
|
errors.push(negativeStepValue());
|
||
|
|
containsErrors = true;
|
||
|
|
}
|
||
|
|
if (delay < 0) {
|
||
|
|
errors.push(negativeDelayValue());
|
||
|
|
containsErrors = true;
|
||
|
|
}
|
||
|
|
if (containsErrors) {
|
||
|
|
errors.splice(startIndex, 0, invalidTimingValue(exp));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return { duration, delay, easing };
|
||
|
|
}
|
||
|
|
export function copyObj(obj, destination = {}) {
|
||
|
|
Object.keys(obj).forEach(prop => {
|
||
|
|
destination[prop] = obj[prop];
|
||
|
|
});
|
||
|
|
return destination;
|
||
|
|
}
|
||
|
|
export function convertToMap(obj) {
|
||
|
|
const styleMap = new Map();
|
||
|
|
Object.keys(obj).forEach(prop => {
|
||
|
|
const val = obj[prop];
|
||
|
|
styleMap.set(prop, val);
|
||
|
|
});
|
||
|
|
return styleMap;
|
||
|
|
}
|
||
|
|
export function normalizeKeyframes(keyframes) {
|
||
|
|
if (!keyframes.length) {
|
||
|
|
return [];
|
||
|
|
}
|
||
|
|
if (keyframes[0] instanceof Map) {
|
||
|
|
return keyframes;
|
||
|
|
}
|
||
|
|
return keyframes.map(kf => convertToMap(kf));
|
||
|
|
}
|
||
|
|
export function normalizeStyles(styles) {
|
||
|
|
const normalizedStyles = new Map();
|
||
|
|
if (Array.isArray(styles)) {
|
||
|
|
styles.forEach(data => copyStyles(data, normalizedStyles));
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
copyStyles(styles, normalizedStyles);
|
||
|
|
}
|
||
|
|
return normalizedStyles;
|
||
|
|
}
|
||
|
|
export function copyStyles(styles, destination = new Map(), backfill) {
|
||
|
|
if (backfill) {
|
||
|
|
for (let [prop, val] of backfill) {
|
||
|
|
destination.set(prop, val);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
for (let [prop, val] of styles) {
|
||
|
|
destination.set(prop, val);
|
||
|
|
}
|
||
|
|
return destination;
|
||
|
|
}
|
||
|
|
export function setStyles(element, styles, formerStyles) {
|
||
|
|
styles.forEach((val, prop) => {
|
||
|
|
const camelProp = dashCaseToCamelCase(prop);
|
||
|
|
if (formerStyles && !formerStyles.has(prop)) {
|
||
|
|
formerStyles.set(prop, element.style[camelProp]);
|
||
|
|
}
|
||
|
|
element.style[camelProp] = val;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
export function eraseStyles(element, styles) {
|
||
|
|
styles.forEach((_, prop) => {
|
||
|
|
const camelProp = dashCaseToCamelCase(prop);
|
||
|
|
element.style[camelProp] = '';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
export function normalizeAnimationEntry(steps) {
|
||
|
|
if (Array.isArray(steps)) {
|
||
|
|
if (steps.length == 1)
|
||
|
|
return steps[0];
|
||
|
|
return sequence(steps);
|
||
|
|
}
|
||
|
|
return steps;
|
||
|
|
}
|
||
|
|
export function validateStyleParams(value, options, errors) {
|
||
|
|
const params = options.params || {};
|
||
|
|
const matches = extractStyleParams(value);
|
||
|
|
if (matches.length) {
|
||
|
|
matches.forEach(varName => {
|
||
|
|
if (!params.hasOwnProperty(varName)) {
|
||
|
|
errors.push(invalidStyleParams(varName));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const PARAM_REGEX = new RegExp(`${SUBSTITUTION_EXPR_START}\\s*(.+?)\\s*${SUBSTITUTION_EXPR_END}`, 'g');
|
||
|
|
export function extractStyleParams(value) {
|
||
|
|
let params = [];
|
||
|
|
if (typeof value === 'string') {
|
||
|
|
let match;
|
||
|
|
while (match = PARAM_REGEX.exec(value)) {
|
||
|
|
params.push(match[1]);
|
||
|
|
}
|
||
|
|
PARAM_REGEX.lastIndex = 0;
|
||
|
|
}
|
||
|
|
return params;
|
||
|
|
}
|
||
|
|
export function interpolateParams(value, params, errors) {
|
||
|
|
const original = value.toString();
|
||
|
|
const str = original.replace(PARAM_REGEX, (_, varName) => {
|
||
|
|
let localVal = params[varName];
|
||
|
|
// this means that the value was never overridden by the data passed in by the user
|
||
|
|
if (localVal == null) {
|
||
|
|
errors.push(invalidParamValue(varName));
|
||
|
|
localVal = '';
|
||
|
|
}
|
||
|
|
return localVal.toString();
|
||
|
|
});
|
||
|
|
// we do this to assert that numeric values stay as they are
|
||
|
|
return str == original ? value : str;
|
||
|
|
}
|
||
|
|
export function iteratorToArray(iterator) {
|
||
|
|
const arr = [];
|
||
|
|
let item = iterator.next();
|
||
|
|
while (!item.done) {
|
||
|
|
arr.push(item.value);
|
||
|
|
item = iterator.next();
|
||
|
|
}
|
||
|
|
return arr;
|
||
|
|
}
|
||
|
|
const DASH_CASE_REGEXP = /-+([a-z0-9])/g;
|
||
|
|
export function dashCaseToCamelCase(input) {
|
||
|
|
return input.replace(DASH_CASE_REGEXP, (...m) => m[1].toUpperCase());
|
||
|
|
}
|
||
|
|
export function camelCaseToDashCase(input) {
|
||
|
|
return input.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
|
||
|
|
}
|
||
|
|
export function allowPreviousPlayerStylesMerge(duration, delay) {
|
||
|
|
return duration === 0 || delay === 0;
|
||
|
|
}
|
||
|
|
export function balancePreviousStylesIntoKeyframes(element, keyframes, previousStyles) {
|
||
|
|
if (previousStyles.size && keyframes.length) {
|
||
|
|
let startingKeyframe = keyframes[0];
|
||
|
|
let missingStyleProps = [];
|
||
|
|
previousStyles.forEach((val, prop) => {
|
||
|
|
if (!startingKeyframe.has(prop)) {
|
||
|
|
missingStyleProps.push(prop);
|
||
|
|
}
|
||
|
|
startingKeyframe.set(prop, val);
|
||
|
|
});
|
||
|
|
if (missingStyleProps.length) {
|
||
|
|
for (let i = 1; i < keyframes.length; i++) {
|
||
|
|
let kf = keyframes[i];
|
||
|
|
missingStyleProps.forEach(prop => kf.set(prop, computeStyle(element, prop)));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return keyframes;
|
||
|
|
}
|
||
|
|
export function visitDslNode(visitor, node, context) {
|
||
|
|
switch (node.type) {
|
||
|
|
case 7 /* AnimationMetadataType.Trigger */:
|
||
|
|
return visitor.visitTrigger(node, context);
|
||
|
|
case 0 /* AnimationMetadataType.State */:
|
||
|
|
return visitor.visitState(node, context);
|
||
|
|
case 1 /* AnimationMetadataType.Transition */:
|
||
|
|
return visitor.visitTransition(node, context);
|
||
|
|
case 2 /* AnimationMetadataType.Sequence */:
|
||
|
|
return visitor.visitSequence(node, context);
|
||
|
|
case 3 /* AnimationMetadataType.Group */:
|
||
|
|
return visitor.visitGroup(node, context);
|
||
|
|
case 4 /* AnimationMetadataType.Animate */:
|
||
|
|
return visitor.visitAnimate(node, context);
|
||
|
|
case 5 /* AnimationMetadataType.Keyframes */:
|
||
|
|
return visitor.visitKeyframes(node, context);
|
||
|
|
case 6 /* AnimationMetadataType.Style */:
|
||
|
|
return visitor.visitStyle(node, context);
|
||
|
|
case 8 /* AnimationMetadataType.Reference */:
|
||
|
|
return visitor.visitReference(node, context);
|
||
|
|
case 9 /* AnimationMetadataType.AnimateChild */:
|
||
|
|
return visitor.visitAnimateChild(node, context);
|
||
|
|
case 10 /* AnimationMetadataType.AnimateRef */:
|
||
|
|
return visitor.visitAnimateRef(node, context);
|
||
|
|
case 11 /* AnimationMetadataType.Query */:
|
||
|
|
return visitor.visitQuery(node, context);
|
||
|
|
case 12 /* AnimationMetadataType.Stagger */:
|
||
|
|
return visitor.visitStagger(node, context);
|
||
|
|
default:
|
||
|
|
throw invalidNodeType(node.type);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
export function computeStyle(element, prop) {
|
||
|
|
return window.getComputedStyle(element)[prop];
|
||
|
|
}
|
||
|
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXRpbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2FuaW1hdGlvbnMvYnJvd3Nlci9zcmMvdXRpbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7O0dBTUc7QUFDSCxPQUFPLEVBQTZFLFFBQVEsRUFBNEIsTUFBTSxxQkFBcUIsQ0FBQztBQUlwSixPQUFPLEVBQUMsZUFBZSxFQUFFLGlCQUFpQixFQUFFLGtCQUFrQixFQUFFLGtCQUFrQixFQUFFLGtCQUFrQixFQUFFLGlCQUFpQixFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFFbEosTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQztBQUUvQixNQUFNLENBQUMsTUFBTSx1QkFBdUIsR0FBRyxJQUFJLENBQUM7QUFDNUMsTUFBTSxDQUFDLE1BQU0scUJBQXFCLEdBQUcsSUFBSSxDQUFDO0FBQzFDLE1BQU0sQ0FBQyxNQUFNLGVBQWUsR0FBRyxVQUFVLENBQUM7QUFDMUMsTUFBTSxDQUFDLE1BQU0sZUFBZSxHQUFHLFVBQVUsQ0FBQztBQUMxQyxNQUFNLENBQUMsTUFBTSxvQkFBb0IsR0FBRyxZQUFZLENBQUM7QUFDakQsTUFBTSxDQUFDLE1BQU0sbUJBQW1CLEdBQUcsYUFBYSxDQUFDO0FBQ2pELE1BQU0sQ0FBQyxNQUFNLHNCQUFzQixHQUFHLGNBQWMsQ0FBQztBQUNyRCxNQUFNLENBQUMsTUFBTSxxQkFBcUIsR0FBRyxlQUFlLENBQUM7QUFFckQsTUFBTSxVQUFVLGtCQUFrQixDQUFDLEtBQW9CO0lBQ3JELElBQUksT0FBTyxLQUFLLElBQUksUUFBUTtRQUFFLE9BQU8sS0FBSyxDQUFDO0lBRTNDLE1BQU0sT0FBTyxHQUFHLEtBQUssQ0FBQyxLQUFLLENBQUMsbUJBQW1CLENBQUMsQ0FBQztJQUNqRCxJQUFJLENBQUMsT0FBTyxJQUFJLE9BQU8sQ0FBQyxNQUFNLEdBQUcsQ0FBQztRQUFFLE9BQU8sQ0FBQyxDQUFD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
|