just-animate/lib/web/transforms.js

_Making Animation Simple_

Object.defineProperty(exports, "__esModule", { value: true });
var lists_1 = require("../lib/utils/lists");
var constants_1 = require("../lib/utils/constants");
var inspect_1 = require("../lib/utils/inspect");
var constants_2 = require("./constants");
var parse_unit_1 = require("./parse-unit");
function combineTransforms(target, effects, propToPlugin) {
    var transformNames = target.propNames.filter(function (t) { return lists_1.includes(constants_2.transforms, t); });
    if (!transformNames.length) {
        return;
    }
    if (lists_1.includes(target.propNames, constants_2.TRANSFORM)) {
        throw new Error('transform + shorthand is not allowed');
    }
    var offsets = [];
    var easings = {};
    lists_1.all(transformNames, function (name) {
        var effects2 = effects[name];
        if (effects2) {
            lists_1.all(effects2, function (effect) {
                easings[effect.offset] = effect.easing;
                lists_1.pushDistinct(offsets, effect.offset);
            });
        }
    });
    offsets.sort();
    var transformEffects = offsets.map(function (offset) {
        var values = {};
        lists_1.all(transformNames, function (name) {
            var effect = lists_1.find(effects[name], function (e) { return e.offset === offset; });
            values[name] = effect ? effect.value : constants_1._;
        });
        return {
            offset: offset,
            easing: easings[offset],
            values: values
        };
    });
    var len = transformEffects.length;
    for (var i = len - 1; i > -1; --i) {
        var effect = transformEffects[i];
        for (var transform in effect.values) {
            var value = effect.values[transform];
            if (inspect_1.isDefined(value)) {
                continue;
            }
            var startingPos = constants_1._;
            for (var j = i - 1; j > -1; j--) {
                if (inspect_1.isDefined(transformEffects[j].values[transform])) {
                    startingPos = j;
                    break;
                }
            }
            var endingPos = constants_1._;
            for (var k = i + 1; k < len; k++) {
                if (inspect_1.isDefined(transformEffects[k].values[transform])) {
                    endingPos = k;
                    break;
                }
            }
            var startingPosFound = startingPos !== constants_1._;
            var endingPosFound = endingPos !== constants_1._;
            if (startingPosFound && endingPosFound) {
                var startEffect = transformEffects[startingPos];
                var endEffect = transformEffects[endingPos];
                var startVal = parse_unit_1.parseUnit(startEffect.values[transform]);
                var endVal = parse_unit_1.parseUnit(endEffect.values[transform]);
                for (var g = startingPos + 1; g < endingPos; g++) {
                    var currentOffset = offsets[g];
                    var offsetDelta = (currentOffset - startEffect.offset) /
                        (endEffect.offset - startEffect.offset);
                    var currentValue = startVal.value + (endVal.value - startVal.value) * offsetDelta;
                    var currentValueWithUnit = currentValue + (endVal.unit || startVal.unit || '');
                    var currentKeyframe = transformEffects[g];
                    currentKeyframe.values[transform] = currentValueWithUnit;
                }
            }
            else if (startingPosFound) {
                for (var g = startingPos + 1; g < len; g++) {
                    transformEffects[g].values[transform] =
                        transformEffects[startingPos].values[transform];
                }
            }
        }
    }
    if (transformEffects.length) {
        lists_1.all(transformNames, function (name) {
            effects[name] = constants_1._;
        });
        var transformEffects2_1 = [];
        lists_1.all(transformEffects, function (effect) {
            var val = constants_1._;
            for (var prop in effect.values) {
                var unit = parse_unit_1.parseUnit(effect.values[prop]);
                if (unit.value === constants_1._) {
                    continue;
                }
                if (!unit.unit) {
                    unit.unit = lists_1.includes(constants_2.transformLengths, prop)
                        ? constants_2.PX
                        : lists_1.includes(constants_2.transformAngles, prop)
                            ? constants_2.DEG
                            : '';
                }
                val =
                    (val ? val + ' ' : '') +
                        (constants_2.aliases[prop] || prop) +
                        '(' +
                        unit.value +
                        unit.unit +
                        ')';
            }
            transformEffects2_1.push({
                offset: effect.offset,
                value: val,
                easing: effect.easing,
                interpolate: constants_1._
            });
        });
        effects[constants_2.TRANSFORM] = transformEffects2_1;
        propToPlugin[constants_2.TRANSFORM] = 'web';
    }
}
exports.combineTransforms = combineTransforms;