just-animate/lib/props/index.js

_Making Animation Simple_

Object.defineProperty(exports, "__esModule", { value: true });
var interpolate_1 = require("../lib/core/interpolate");
var constants_1 = require("../lib/utils/constants");
var inspect_1 = require("../lib/utils/inspect");
var strings_1 = require("../lib/utils/strings");
var lists_1 = require("../lib/utils/lists");
var PROPERTY = 0;
var ATTRIBUTE = 1;
var ATTRIBUTE_HYPHENATE = 2;
var CSSVAR = 3;
var cssVarExp = /^\-\-[a-z0-9\-]+$/i;
var viewbox = 'viewBox';
var svgReadonly = 'rx ry viewBox transform x x1 x2 y y1 y2'.split(' ');
var noHyphenate = [viewbox];
exports.propsPlugin = {
    name: 'props',
    animate: function (effect) {
        var target = effect.target, prop = effect.prop;
        var interpolate = interpolate_1.interpolator(effect.to - effect.from, effect.keyframes);
        var propSetter = getTargetSetter(target, prop);
        var propGetter = getTargetGetter(target, prop);
        var initial = constants_1._;
        return {
            cancel: function () {
                if (initial !== constants_1._) {
                    propSetter(initial);
                }
                initial = constants_1._;
            },
            update: function (localTime, _playbackRate, _isActive) {
                if (initial === constants_1._) {
                    initial = propGetter();
                }
                propSetter(interpolate(localTime));
            }
        };
    },
    getValue: function (target, prop) {
        return getTargetGetter(target, prop)();
    }
};
function getTargetType(target, prop) {
    if (!inspect_1.isDOM(target)) {
        return PROPERTY;
    }
    if (cssVarExp.test(prop)) {
        return CSSVAR;
    }
    if (typeof target[prop] !== 'undefined' && !lists_1.includes(svgReadonly, prop)) {
        return PROPERTY;
    }
    if (lists_1.includes(noHyphenate, prop)) {
        return ATTRIBUTE;
    }
    return ATTRIBUTE_HYPHENATE;
}
function getTargetGetter(target, prop) {
    var targetType = getTargetType(target, prop);
    return targetType === CSSVAR
        ? getVariable(target, prop)
        : targetType === ATTRIBUTE
            ? getAttribute(target, prop)
            : targetType === ATTRIBUTE_HYPHENATE
                ? getAttributeHyphenate(target, prop)
                : getProperty(target, prop);
}
function getTargetSetter(target, prop) {
    var targetType = getTargetType(target, prop);
    return targetType === CSSVAR
        ? setVariable(target, prop)
        : targetType === ATTRIBUTE
            ? setAttribute(target, prop)
            : targetType === ATTRIBUTE_HYPHENATE
                ? setAttributeHyphenate(target, prop)
                : setProperty(target, prop);
}
function getAttribute(target, name) {
    return function () { return target.getAttribute(name); };
}
function setAttribute(target, name) {
    return function (value) { return target.setAttribute(name, value); };
}
function setAttributeHyphenate(target, name) {
    var attName = strings_1.hyphenate(name);
    return function (value) { return target.setAttribute(attName, value); };
}
function getAttributeHyphenate(target, name) {
    var attName = strings_1.hyphenate(name);
    return function () { return target.getAttribute(attName); };
}
function getVariable(target, name) {
    return function () { return target.style.getPropertyValue(name); };
}
function setVariable(target, name) {
    return function (value) {
        return target.style.setProperty(name, value ? value + '' : '');
    };
}
function setProperty(target, name) {
    return function (value) { return (target[name] = value); };
}
function getProperty(target, name) {
    return function () { return target[name]; };
}