@tsparticles/confetti
Version:
Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.
369 lines (368 loc) • 14.9 kB
JavaScript
(function (factory) {
if (typeof module === "object" && typeof module.exports === "object") {
var v = factory(require, exports);
if (v !== undefined) module.exports = v;
}
else if (typeof define === "function" && define.amd) {
define(["require", "exports", "@tsparticles/engine", "@tsparticles/plugin-emitters", "./ConfettiOptions.js", "@tsparticles/basic", "@tsparticles/shape-cards", "@tsparticles/shape-emoji", "@tsparticles/shape-heart", "@tsparticles/shape-image", "@tsparticles/updater-life", "@tsparticles/plugin-motion", "@tsparticles/shape-polygon", "@tsparticles/updater-roll", "@tsparticles/updater-rotate", "@tsparticles/shape-square", "@tsparticles/shape-star", "@tsparticles/updater-tilt", "@tsparticles/updater-wobble"], factory);
}
})(function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.confetti = confetti;
const engine_1 = require("@tsparticles/engine");
const plugin_emitters_1 = require("@tsparticles/plugin-emitters");
const ConfettiOptions_js_1 = require("./ConfettiOptions.js");
const basic_1 = require("@tsparticles/basic");
const shape_cards_1 = require("@tsparticles/shape-cards");
const shape_emoji_1 = require("@tsparticles/shape-emoji");
const shape_heart_1 = require("@tsparticles/shape-heart");
const shape_image_1 = require("@tsparticles/shape-image");
const updater_life_1 = require("@tsparticles/updater-life");
const plugin_motion_1 = require("@tsparticles/plugin-motion");
const shape_polygon_1 = require("@tsparticles/shape-polygon");
const updater_roll_1 = require("@tsparticles/updater-roll");
const updater_rotate_1 = require("@tsparticles/updater-rotate");
const shape_square_1 = require("@tsparticles/shape-square");
const shape_star_1 = require("@tsparticles/shape-star");
const updater_tilt_1 = require("@tsparticles/updater-tilt");
const updater_wobble_1 = require("@tsparticles/updater-wobble");
const defaultGravity = 9.81, sizeFactor = 5, speedFactor = 3, decayOffset = 1, disableRotate = 0, disableTilt = 0;
let initialized = false;
let initializing = false;
const ids = new Map();
async function initPlugins(engine) {
if (initialized) {
return;
}
if (initializing) {
return new Promise(resolve => {
const timeout = 100, interval = setInterval(() => {
if (!initialized) {
return;
}
clearInterval(interval);
resolve();
}, timeout);
});
}
initializing = true;
engine.checkVersion("3.9.1");
await (0, plugin_emitters_1.loadEmittersPlugin)(engine, false);
await (0, plugin_motion_1.loadMotionPlugin)(engine, false);
await (0, shape_cards_1.loadCardsShape)(engine, false);
await (0, shape_heart_1.loadHeartShape)(engine, false);
await (0, shape_image_1.loadImageShape)(engine, false);
await (0, shape_polygon_1.loadPolygonShape)(engine, false);
await (0, shape_square_1.loadSquareShape)(engine, false);
await (0, shape_star_1.loadStarShape)(engine, false);
await (0, shape_emoji_1.loadEmojiShape)(engine, false);
await (0, updater_rotate_1.loadRotateUpdater)(engine, false);
await (0, updater_life_1.loadLifeUpdater)(engine, false);
await (0, updater_roll_1.loadRollUpdater)(engine, false);
await (0, updater_tilt_1.loadTiltUpdater)(engine, false);
await (0, updater_wobble_1.loadWobbleUpdater)(engine, false);
await (0, basic_1.loadBasic)(engine);
initializing = false;
initialized = true;
}
async function setConfetti(params) {
const actualOptions = new ConfettiOptions_js_1.ConfettiOptions();
actualOptions.load(params.options);
let container;
const fpsLimit = 120, fpsLimitFactor = 3.6, opacitySpeed = (actualOptions.ticks * engine_1.millisecondsToSeconds) / (fpsLimitFactor * engine_1.millisecondsToSeconds * fpsLimit);
if (ids.has(params.id)) {
container = ids.get(params.id);
if (container && !container.destroyed) {
const alias = container;
if (alias.addEmitter) {
await alias.addEmitter({
startCount: actualOptions.count,
position: actualOptions.position,
size: {
width: 0,
height: 0,
},
rate: {
delay: 0,
quantity: 0,
},
life: {
duration: 0.1,
count: 1,
},
particles: {
color: {
value: actualOptions.colors,
},
shape: {
type: actualOptions.shapes,
options: actualOptions.shapeOptions,
},
life: {
count: 1,
},
opacity: {
value: { min: 0, max: 1 },
animation: {
enable: true,
sync: true,
speed: opacitySpeed,
startValue: "max",
destroy: "min",
},
},
size: {
value: sizeFactor * actualOptions.scalar,
},
move: {
angle: {
value: actualOptions.spread,
offset: 0,
},
drift: {
min: -actualOptions.drift,
max: actualOptions.drift,
},
gravity: {
acceleration: actualOptions.gravity * defaultGravity,
},
speed: actualOptions.startVelocity * speedFactor,
decay: decayOffset - actualOptions.decay,
direction: -actualOptions.angle,
},
rotate: {
value: actualOptions.flat
? disableRotate
: {
min: 0,
max: 360,
},
direction: "random",
animation: {
enable: !actualOptions.flat,
speed: 60,
},
},
tilt: {
direction: "random",
enable: !actualOptions.flat,
value: actualOptions.flat
? disableTilt
: {
min: 0,
max: 360,
},
animation: {
enable: true,
speed: 60,
},
},
roll: {
darken: {
enable: true,
value: 25,
},
enable: !actualOptions.flat,
speed: {
min: 15,
max: 25,
},
},
wobble: {
distance: 30,
enable: !actualOptions.flat,
speed: {
min: -15,
max: 15,
},
},
},
});
return;
}
}
}
const particlesOptions = {
fullScreen: {
enable: !params.canvas,
zIndex: actualOptions.zIndex,
},
fpsLimit: 120,
particles: {
number: {
value: 0,
},
color: {
value: actualOptions.colors,
},
shape: {
type: actualOptions.shapes,
options: actualOptions.shapeOptions,
},
opacity: {
value: { min: 0, max: 1 },
animation: {
enable: true,
sync: true,
speed: opacitySpeed,
startValue: "max",
destroy: "min",
},
},
size: {
value: sizeFactor * actualOptions.scalar,
},
links: {
enable: false,
},
life: {
count: 1,
},
move: {
angle: {
value: actualOptions.spread,
offset: 0,
},
drift: {
min: -actualOptions.drift,
max: actualOptions.drift,
},
enable: true,
gravity: {
enable: true,
acceleration: actualOptions.gravity * defaultGravity,
},
speed: actualOptions.startVelocity * speedFactor,
decay: decayOffset - actualOptions.decay,
direction: -actualOptions.angle,
random: true,
straight: false,
outModes: {
default: "none",
bottom: "destroy",
},
},
rotate: {
value: actualOptions.flat
? disableRotate
: {
min: 0,
max: 360,
},
direction: "random",
animation: {
enable: !actualOptions.flat,
speed: 60,
},
},
tilt: {
direction: "random",
enable: !actualOptions.flat,
value: actualOptions.flat
? disableTilt
: {
min: 0,
max: 360,
},
animation: {
enable: true,
speed: 60,
},
},
roll: {
darken: {
enable: true,
value: 25,
},
enable: !actualOptions.flat,
speed: {
min: 15,
max: 25,
},
},
wobble: {
distance: 30,
enable: !actualOptions.flat,
speed: {
min: -15,
max: 15,
},
},
},
detectRetina: true,
motion: {
disable: actualOptions.disableForReducedMotion,
},
emitters: {
name: "confetti",
startCount: actualOptions.count,
position: actualOptions.position,
size: {
width: 0,
height: 0,
},
rate: {
delay: 0,
quantity: 0,
},
life: {
duration: 0.1,
count: 1,
},
},
};
container = await engine_1.tsParticles.load({ id: params.id, element: params.canvas, options: particlesOptions });
ids.set(params.id, container);
return container;
}
async function confetti(idOrOptions, confettiOptions) {
await initPlugins(engine_1.tsParticles);
let options;
let id;
if ((0, engine_1.isString)(idOrOptions)) {
id = idOrOptions;
options = confettiOptions ?? {};
}
else {
id = "confetti";
options = idOrOptions;
}
return setConfetti({
id,
options,
});
}
confetti.create = async (canvas, options) => {
if (!canvas) {
return confetti;
}
await initPlugins(engine_1.tsParticles);
const id = canvas.getAttribute("id") ?? "confetti";
canvas.setAttribute("id", id);
return async (idOrOptions, confettiOptions) => {
let subOptions;
let subId;
if ((0, engine_1.isString)(idOrOptions)) {
subId = idOrOptions;
subOptions = confettiOptions ?? options;
}
else {
subId = id;
subOptions = idOrOptions;
}
return setConfetti({
id: subId,
canvas,
options: subOptions,
});
};
};
confetti.init = async () => {
await initPlugins(engine_1.tsParticles);
};
confetti.version = "3.9.1";
if (!(0, engine_1.isSsr)()) {
window.confetti = confetti;
}
});