@keyframes/core
Version:
Keyframes allows dynamic generation of CSS3 keyframes with callback events and other niceness.
361 lines (349 loc) • 18.6 kB
JavaScript
var keyframesSheet, styleElem, __assign = this && this.__assign || function() {
return (__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) for (var p in s = arguments[i]) Object.prototype.hasOwnProperty.call(s, p) && (t[p] = s[p]);
return t;
}).apply(this, arguments);
}, __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
void 0 === k2 && (k2 = k);
var desc = Object.getOwnPropertyDescriptor(m, k);
desc && ("get" in desc ? m.__esModule : !desc.writable && !desc.configurable) || (desc = {
enumerable: !0,
get: function() {
return m[k];
}
}), Object.defineProperty(o, k2, desc);
} : function(o, m, k, k2) {
o[k2 = void 0 === k2 ? k : k2] = m[k];
}), __exportStar = this && this.__exportStar || function(m, exports) {
for (var p in m) "default" === p || Object.prototype.hasOwnProperty.call(exports, p) || __createBinding(exports, m, p);
}, __awaiter = this && this.__awaiter || function(thisArg, _arguments, P, generator) {
return new (P = P || Promise)(function(resolve, reject) {
function fulfilled(value) {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
}
function rejected(value) {
try {
step(generator.throw(value));
} catch (e) {
reject(e);
}
}
function step(result) {
var value;
result.done ? resolve(result.value) : ((value = result.value) instanceof P ? value : new P(function(resolve) {
resolve(value);
})).then(fulfilled, rejected);
}
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}, __generator = this && this.__generator || function(thisArg, body) {
var f, y, t, _ = {
label: 0,
sent: function() {
if (1 & t[0]) throw t[1];
return t[1];
},
trys: [],
ops: []
}, g = Object.create(("function" == typeof Iterator ? Iterator : Object).prototype);
return g.next = verb(0), g.throw = verb(1), g.return = verb(2), "function" == typeof Symbol && (g[Symbol.iterator] = function() {
return this;
}), g;
function verb(n) {
return function(v) {
var op = [ n, v ];
if (f) throw new TypeError("Generator is already executing.");
for (;_ = g && op[g = 0] ? 0 : _; ) try {
if (f = 1, y && (t = 2 & op[0] ? y.return : op[0] ? y.throw || ((t = y.return) && t.call(y),
0) : y.next) && !(t = t.call(y, op[1])).done) return t;
switch (y = 0, (op = t ? [ 2 & op[0], t.value ] : op)[0]) {
case 0:
case 1:
t = op;
break;
case 4:
return _.label++, {
value: op[1],
done: !1
};
case 5:
_.label++, y = op[1], op = [ 0 ];
continue;
case 7:
op = _.ops.pop(), _.trys.pop();
continue;
default:
if (!(t = 0 < (t = _.trys).length && t[t.length - 1]) && (6 === op[0] || 2 === op[0])) {
_ = 0;
continue;
}
if (3 === op[0] && (!t || op[1] > t[0] && op[1] < t[3])) _.label = op[1]; else if (6 === op[0] && _.label < t[1]) _.label = t[1],
t = op; else {
if (!(t && _.label < t[2])) {
t[2] && _.ops.pop(), _.trys.pop();
continue;
}
_.label = t[2], _.ops.push(op);
}
}
op = body.call(thisArg, _);
} catch (e) {
op = [ 6, e ], y = 0;
} finally {
f = t = 0;
}
if (5 & op[0]) throw op[1];
return {
value: op[0] ? op[1] : void 0,
done: !0
};
};
}
}, __read = this && this.__read || function(o, n) {
var m = "function" == typeof Symbol && o[Symbol.iterator];
if (!m) return o;
var r, e, i = m.call(o), ar = [];
try {
for (;(void 0 === n || 0 < n--) && !(r = i.next()).done; ) ar.push(r.value);
} catch (error) {
e = {
error: error
};
} finally {
try {
r && !r.done && (m = i.return) && m.call(i);
} finally {
if (e) throw e.error;
}
}
return ar;
}, __spreadArray = this && this.__spreadArray || function(to, from, pack) {
if (pack || 2 === arguments.length) for (var ar, i = 0, l = from.length; i < l; i++) !ar && i in from || ((ar = ar || Array.prototype.slice.call(from, 0, i))[i] = from[i]);
return to.concat(ar || Array.prototype.slice.call(from));
}, __importDefault = this && this.__importDefault || function(mod) {
return mod && mod.__esModule ? mod : {
default: mod
};
}, add_px_to_style_1 = (Object.defineProperty(exports, "__esModule", {
value: !0
}), exports.isBrowser = void 0, __importDefault(require("add-px-to-style"))), hyphenate_style_name_1 = __importDefault(require("hyphenate-style-name")), wait = function() {
return new Promise(function(accept) {
requestAnimationFrame(function() {
accept();
});
});
}, clone = (exports.isBrowser = "undefined" != typeof window, exports.isBrowser && ((styleElem = document.createElement("style")).setAttribute("id", "keyframesjs-stylesheet"),
document.head.appendChild(styleElem), keyframesSheet = styleElem.sheet), function(input) {
return Array.isArray(input) ? __spreadArray([], __read(input), !1) : "object" == typeof input ? __assign({}, input) : input.toString();
}), voidFunction = function() {}, defaultCallbacks = {
onStart: voidFunction,
onBeforeStart: voidFunction,
onIteration: voidFunction,
onEnd: voidFunction,
onQueueComplete: voidFunction,
onCancel: voidFunction
}, objToCss = function(obj) {
if (!Object.keys(obj).length) return "";
var key, result = "";
for (key in obj) result += "".concat((0, hyphenate_style_name_1.default)(key), ":").concat((0,
add_px_to_style_1.default)(key, obj[key]), ";");
return result;
}, Keyframes = (() => {
function Keyframes(elem, debug) {
void 0 === debug && (debug = !1), this.playing = !1, this.previousCancel = voidFunction,
this.debug = !1, this.queueStore = [], this.callbacks = defaultCallbacks,
this.animationstartListener = voidFunction, this.animationendListener = voidFunction,
this.animationiterationListener = voidFunction, this.animationcancelListener = voidFunction,
this.mountedElement = elem, this.frozenStyles = [], this.debug = debug;
}
return Keyframes.isSupported = function() {
return void 0 !== document.body.style.animationName;
}, Keyframes.prototype.freeze = function() {
var computedStyle_1, _this = this, ruleCache = Keyframes.ruleCache[this.mountedElement.style.animationName];
ruleCache && (computedStyle_1 = __assign({}, getComputedStyle(this.mountedElement)),
ruleCache.forEach(function(rule) {
_this.mountedElement.style[rule] = computedStyle_1[rule];
}), this.frozenStyles = __spreadArray([], __read(new Set(this.frozenStyles.concat(ruleCache))), !1));
}, Keyframes.prototype.unfreeze = function() {
var _this = this;
this.frozenStyles.length && (this.frozenStyles.forEach(function(rule) {
_this.mountedElement.style[rule] = "";
}), this.frozenStyles = []);
}, Keyframes.prototype.reset = function() {
return __awaiter(this, void 0, void 0, function() {
return __generator(this, function(_a) {
switch (_a.label) {
case 0:
return this.log("reset"), this.playing = !1, this.removeEvents(),
this.mountedElement.style.animationPlayState = "running", this.mountedElement.style.animation = "none",
[ 4, wait() ];
case 1:
return _a.sent(), [ 2, this ];
}
});
});
}, Keyframes.prototype.pause = function() {
return this.mountedElement.style.animationPlayState = "paused", this;
}, Keyframes.prototype.resume = function() {
return this.mountedElement.style.animationPlayState = "running", this;
}, Keyframes.prototype.play = function(animationOptions, callbacks) {
var animationCount, _this = this, _a = (this.log("play", animationOptions),
callbacks || {}), _b = _a.onBeforeStart, _b = void 0 === _b ? null : _b, _c = _a.onStart, onStart = void 0 === _c ? null : _c, _c = _a.onIteration, onIteration = void 0 === _c ? null : _c, _c = _a.onEnd, onEnd = void 0 === _c ? null : _c, _c = _a.onCancel, _a = void 0 === _c ? null : _c;
return !0 === this.playing && (this.log("cancelled"), this.previousCancel) && (this.queueStore = [],
this.previousCancel()), _a && (this.previousCancel = _a), this.mountedElement.style.animationName === this.getAnimationName(animationOptions) ? (this.freeze(),
requestAnimationFrame(function() {
return __awaiter(_this, void 0, void 0, function() {
return __generator(this, function(_a) {
switch (_a.label) {
case 0:
return [ 4, this.reset() ];
case 1:
return _a.sent(), this.play(animationOptions, callbacks),
this.unfreeze(), [ 2 ];
}
});
});
})) : (this.playing = !0, animationCount = Array.isArray(animationOptions) ? animationOptions.length : 1,
_c = Keyframes.playCSS(animationOptions), _a = function(type, eventCallback) {
var listenerName = "".concat(type, "Listener");
_this.mountedElement.removeEventListener(type, _this[listenerName]),
_this[listenerName] = eventCallback, _this.mountedElement.addEventListener(type, _this[listenerName]);
}, this.log("onBeforeStart"), _b && _b(), this.mountedElement.style.animationPlayState = "running",
this.mountedElement.style.animation = _c, _a("animationiteration", function(e) {
_this.log("animationiteration", e), onIteration && onIteration(e);
}), _a("animationend", function(e) {
--animationCount || (_this.log("ended", e), _this.playing = !1, onEnd && !animationCount && onEnd(e));
}), _a("animationstart", function(e) {
_this.log("onStart", e), onStart && onStart(e);
})), this;
}, Keyframes.prototype.playNext = function() {
var _this = this, animationOption = this.queueStore[this.queueStore.length - 1];
animationOption ? this.log("playNext", animationOption) : this.log("Queue Complete"),
animationOption ? this.play(animationOption, {
onEnd: function(e) {
_this.queueStore.pop(), _this.callbacks.onEnd && _this.callbacks.onEnd(e),
_this.playNext();
},
onCancel: this.callbacks.onCancel,
onIteration: this.callbacks.onIteration
}) : this.callbacks.onQueueComplete && this.callbacks.onQueueComplete();
}, Keyframes.prototype.removeEvents = function() {
return this.log("events cleared"), this.mountedElement.removeEventListener("animationiteration", this.animationiterationListener),
this.mountedElement.removeEventListener("animationend", this.animationendListener),
this.mountedElement.removeEventListener("animationstart", this.animationstartListener),
this;
}, Keyframes.prototype.updateCallbacks = function(callbacks) {
callbacks && (this.callbacks = __assign(__assign({}, this.callbacks), callbacks));
}, Keyframes.prototype.queue = function(animationOptions, callbacks) {
var _this = this, currentQueueLength = this.queueStore.length, callbacks = (this.updateCallbacks(__assign(__assign({}, defaultCallbacks), callbacks)),
clone(animationOptions));
return Array.isArray(callbacks) ? this.queueStore = callbacks.reverse().concat(this.queueStore) : this.queueStore.unshift(callbacks),
this.log("queued", animationOptions, currentQueueLength), currentQueueLength ? this.playing || this.playNext() : requestAnimationFrame(function() {
return __awaiter(_this, void 0, void 0, function() {
return __generator(this, function(_a) {
switch (_a.label) {
case 0:
return [ 4, this.reset() ];
case 1:
return _a.sent(), this.playNext(), [ 2 ];
}
});
});
}), this;
}, Keyframes.prototype.chain = function(animationOptions, callbacks) {
return this.queue(animationOptions, callbacks), this;
}, Keyframes.prototype.resetQueue = function() {
return __awaiter(this, void 0, void 0, function() {
return __generator(this, function(_a) {
switch (_a.label) {
case 0:
return this.log("resetQueue"), [ 4, wait() ];
case 1:
return _a.sent(), this.removeEvents(), this.queueStore = [],
[ 4, this.reset() ];
case 2:
return _a.sent(), [ 2, this ];
}
});
});
}, Keyframes.prototype.loop = function(animationOptions_1) {
return __awaiter(this, arguments, void 0, function(animationOptions, callbacks) {
var populateQueue, _this = this;
return void 0 === callbacks && (callbacks = {}), __generator(this, function(_a) {
switch (_a.label) {
case 0:
return this.log("loop", animationOptions), [ 4, this.resetQueue() ];
case 1:
return _a.sent(), (populateQueue = function() {
_this.queue(animationOptions, __assign(__assign({}, callbacks), {
onQueueComplete: function() {
return populateQueue();
}
}));
})(), [ 2, this ];
}
});
});
}, Keyframes.prototype.getAnimationName = function(animationObject) {
var _this = this;
return Array.isArray(animationObject) ? animationObject.map(function(o) {
return _this.getAnimationName(o);
}).join(", ") : "string" == typeof animationObject ? animationObject.split(" ")[0] : animationObject.name;
}, Keyframes.playCSS = function(animationOptions) {
function animObjToStr(obj) {
return [ (obj = __assign({
duration: "0s",
timingFunction: "ease",
delay: "0s",
iterationCount: 1,
direction: "normal",
fillMode: "forwards"
}, obj)).name, obj.duration, obj.timingFunction, obj.delay, obj.iterationCount, obj.direction, obj.fillMode ].join(" ");
}
if (Array.isArray(animationOptions)) {
for (var animationOptionsStrings = [], i = 0; i < animationOptions.length; i += 1) {
var option = animationOptions[i];
animationOptionsStrings.push("string" == typeof option ? option : animObjToStr(option));
}
return animationOptionsStrings.join(", ");
}
return "string" == typeof animationOptions ? animationOptions : animObjToStr(animationOptions);
}, Keyframes.generateCSS = function(frameData) {
var key, cssRuleObject, css = "@keyframes ".concat(frameData.name, " {");
for (key in frameData) "name" !== key && "media" !== key && "complete" !== key && (cssRuleObject = objToCss(frameData[key]),
css += "".concat(key, " {").concat(cssRuleObject, "}"));
return css += "}", css = frameData.media ? "@media ".concat(frameData.media, "{").concat(css, "}") : css;
}, Keyframes.generate = function(frameData) {
this.addToRuleCache(frameData);
var css = this.generateCSS(frameData), oldFrameIndex = Keyframes.rules.indexOf(frameData.name), oldFrameIndex = (-1 < oldFrameIndex && (Keyframes.sheet.deleteRule(oldFrameIndex),
Keyframes.rules.splice(oldFrameIndex, 1)), (Keyframes.sheet.cssRules || Keyframes.sheet.rules).length);
Keyframes.sheet.insertRule(css, oldFrameIndex), Keyframes.rules[oldFrameIndex] = frameData.name;
}, Keyframes.define = function(frameOptions) {
if (Array.isArray(frameOptions)) for (var i = 0; i < frameOptions.length; i += 1) this.generate(frameOptions[i]); else this.generate(frameOptions);
}, Keyframes.defineCSS = function(frameOptions) {
if (Array.isArray(frameOptions)) {
for (var css = "", i = 0; i < frameOptions.length; i += 1) css += this.generateCSS(frameOptions[i]);
return css;
}
return this.generateCSS(frameOptions);
}, Keyframes.addToRuleCache = function(frameData) {
var rules;
this.ruleCache[frameData.name] || (rules = Object.values(frameData).filter(function(v) {
return "object" == typeof v;
}).map(function(v) {
return Object.keys(v);
}).flat(), this.ruleCache[frameData.name] = __spreadArray([], __read(new Set(rules)), !1));
}, Keyframes.prototype.log = function(msg) {
for (var _i = 1; _i < arguments.length; _i++) _i - 1, 0;
this.debug;
}, Keyframes.sheet = keyframesSheet, Keyframes.rules = [], Keyframes.ruleCache = {},
Keyframes.clearRules = function() {
for (Keyframes.rules = []; Keyframes.sheet.cssRules.length; ) Keyframes.sheet.deleteRule(0);
}, Keyframes;
})();
exports.isBrowser && (window.Keyframes = Keyframes), __exportStar(require("./pathfinder"), exports),
__exportStar(require("./spritesheet"), exports), exports.default = Keyframes;