86 lines
3.6 KiB
JavaScript
86 lines
3.6 KiB
JavaScript
|
"use strict";
|
||
|
|
var __read = (this && this.__read) || function (o, n) {
|
||
|
|
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
||
|
|
if (!m) return o;
|
||
|
|
var i = m.call(o), r, ar = [], e;
|
||
|
|
try {
|
||
|
|
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
||
|
|
}
|
||
|
|
catch (error) { e = { error: error }; }
|
||
|
|
finally {
|
||
|
|
try {
|
||
|
|
if (r && !r.done && (m = i["return"])) m.call(i);
|
||
|
|
}
|
||
|
|
finally { if (e) throw e.error; }
|
||
|
|
}
|
||
|
|
return ar;
|
||
|
|
};
|
||
|
|
var __spread = (this && this.__spread) || function () {
|
||
|
|
for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
|
||
|
|
return ar;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
exports.convertAniBinaryToCSS = void 0;
|
||
|
|
var parser_1 = require("./parser");
|
||
|
|
var JIFFIES_PER_MS = 1000 / 60;
|
||
|
|
// Generate CSS for an animated cursor.
|
||
|
|
//
|
||
|
|
// This function returns CSS containing a set of keyframes with embedded Data
|
||
|
|
// URIs as well as a CSS rule to the given selector.
|
||
|
|
function convertAniBinaryToCSS(selector, aniBinary) {
|
||
|
|
var ani = readAni(aniBinary);
|
||
|
|
var animationName = "ani-cursor-" + uniqueId();
|
||
|
|
var keyframes = ani.frames.map(function (_a) {
|
||
|
|
var url = _a.url, percents = _a.percents;
|
||
|
|
var percent = percents.map(function (num) { return num + "%"; }).join(", ");
|
||
|
|
return percent + " { cursor: url(" + url + "), auto; }";
|
||
|
|
});
|
||
|
|
// CSS properties with a animation type of "discrete", like `cursor`, actually
|
||
|
|
// switch half-way _between_ each keyframe percentage. Luckily this half-way
|
||
|
|
// measurement is applied _after_ the easing function is applied. So, we can
|
||
|
|
// force the frames to appear at exactly the % that we specify by using
|
||
|
|
// `timing-function` of `step-end`.
|
||
|
|
//
|
||
|
|
// https://drafts.csswg.org/web-animations-1/#discrete
|
||
|
|
var timingFunction = "step-end";
|
||
|
|
// Winamp (re)starts the animation cycle when your mouse enters an element. By
|
||
|
|
// default this approach would cause the animation to run continuously, even
|
||
|
|
// when the cursor is not visible. To match Winamp's behavior we add a
|
||
|
|
// `:hover` pseudo selector so that the animation only runs when the cursor is
|
||
|
|
// visible.
|
||
|
|
var pseudoSelector = ":hover";
|
||
|
|
// prettier-ignore
|
||
|
|
return "\n @keyframes " + animationName + " {\n " + keyframes.join("\n") + "\n }\n " + selector + pseudoSelector + " {\n animation: " + animationName + " " + ani.duration + "ms " + timingFunction + " infinite;\n }\n ";
|
||
|
|
}
|
||
|
|
exports.convertAniBinaryToCSS = convertAniBinaryToCSS;
|
||
|
|
function readAni(contents) {
|
||
|
|
var _a;
|
||
|
|
var ani = parser_1.parseAni(contents);
|
||
|
|
var rate = (_a = ani.rate) !== null && _a !== void 0 ? _a : ani.images.map(function () { return ani.metadata.iDispRate; });
|
||
|
|
var duration = sum(rate);
|
||
|
|
var frames = ani.images.map(function (image) { return ({
|
||
|
|
url: curUrlFromByteArray(image),
|
||
|
|
percents: [],
|
||
|
|
}); });
|
||
|
|
var elapsed = 0;
|
||
|
|
rate.forEach(function (r, i) {
|
||
|
|
var frameIdx = ani.seq ? ani.seq[i] : i;
|
||
|
|
frames[frameIdx].percents.push((elapsed / duration) * 100);
|
||
|
|
elapsed += r;
|
||
|
|
});
|
||
|
|
return { duration: duration * JIFFIES_PER_MS, frames: frames };
|
||
|
|
}
|
||
|
|
/* Utility Functions */
|
||
|
|
var i = 0;
|
||
|
|
var uniqueId = function () { return i++; };
|
||
|
|
function base64FromDataArray(dataArray) {
|
||
|
|
return window.btoa(String.fromCharCode.apply(String, __spread(dataArray)));
|
||
|
|
}
|
||
|
|
function curUrlFromByteArray(arr) {
|
||
|
|
var base64 = base64FromDataArray(arr);
|
||
|
|
return "data:image/x-win-bitmap;base64," + base64;
|
||
|
|
}
|
||
|
|
function sum(values) {
|
||
|
|
return values.reduce(function (total, value) { return total + value; }, 0);
|
||
|
|
}
|
||
|
|
//# sourceMappingURL=index.js.map
|