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.
315 lines (314 loc) • 12.5 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", "./ConfettiOptions", "tsparticles-basic", "tsparticles-shape-cards", "tsparticles-plugin-emitters", "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-shape-text", "tsparticles-updater-tilt", "tsparticles-updater-wobble"], factory);
}
})(function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.confetti = void 0;
const tsparticles_engine_1 = require("tsparticles-engine");
const ConfettiOptions_1 = require("./ConfettiOptions");
const tsparticles_basic_1 = require("tsparticles-basic");
const tsparticles_shape_cards_1 = require("tsparticles-shape-cards");
const tsparticles_plugin_emitters_1 = require("tsparticles-plugin-emitters");
const tsparticles_shape_heart_1 = require("tsparticles-shape-heart");
const tsparticles_shape_image_1 = require("tsparticles-shape-image");
const tsparticles_updater_life_1 = require("tsparticles-updater-life");
const tsparticles_plugin_motion_1 = require("tsparticles-plugin-motion");
const tsparticles_shape_polygon_1 = require("tsparticles-shape-polygon");
const tsparticles_updater_roll_1 = require("tsparticles-updater-roll");
const tsparticles_updater_rotate_1 = require("tsparticles-updater-rotate");
const tsparticles_shape_square_1 = require("tsparticles-shape-square");
const tsparticles_shape_star_1 = require("tsparticles-shape-star");
const tsparticles_shape_text_1 = require("tsparticles-shape-text");
const tsparticles_updater_tilt_1 = require("tsparticles-updater-tilt");
const tsparticles_updater_wobble_1 = require("tsparticles-updater-wobble");
let initialized = false;
let initializing = false;
const ids = new Map();
async function initPlugins(engine) {
if (initialized) {
return;
}
if (initializing) {
return new Promise((resolve) => {
const interval = setInterval(() => {
if (!initialized) {
return;
}
clearInterval(interval);
resolve();
}, 100);
});
}
initializing = true;
await (0, tsparticles_basic_1.loadBasic)(engine);
await (0, tsparticles_plugin_emitters_1.loadEmittersPlugin)(engine);
await (0, tsparticles_plugin_motion_1.loadMotionPlugin)(engine);
await (0, tsparticles_shape_cards_1.loadCardsShape)(engine);
await (0, tsparticles_shape_heart_1.loadHeartShape)(engine);
await (0, tsparticles_shape_image_1.loadImageShape)(engine);
await (0, tsparticles_shape_polygon_1.loadPolygonShape)(engine);
await (0, tsparticles_shape_square_1.loadSquareShape)(engine);
await (0, tsparticles_shape_star_1.loadStarShape)(engine);
await (0, tsparticles_shape_text_1.loadTextShape)(engine);
await (0, tsparticles_updater_rotate_1.loadRotateUpdater)(engine);
await (0, tsparticles_updater_life_1.loadLifeUpdater)(engine);
await (0, tsparticles_updater_roll_1.loadRollUpdater)(engine);
await (0, tsparticles_updater_tilt_1.loadTiltUpdater)(engine);
await (0, tsparticles_updater_wobble_1.loadWobbleUpdater)(engine);
initializing = false;
initialized = true;
}
async function setConfetti(params) {
const actualOptions = new ConfettiOptions_1.ConfettiOptions();
actualOptions.load(params.options);
let container;
const fpsLimit = 120, opacitySpeed = (actualOptions.ticks * 1000) / (3600 * fpsLimit);
if (ids.has(params.id)) {
container = ids.get(params.id);
if (container && !container.destroyed) {
const alias = container;
if (alias.addEmitter) {
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: 5 * actualOptions.scalar,
},
move: {
angle: {
value: actualOptions.spread,
offset: 0,
},
drift: {
min: -actualOptions.drift,
max: actualOptions.drift,
},
gravity: {
acceleration: actualOptions.gravity * 9.81,
},
speed: actualOptions.startVelocity * 3,
decay: 1 - actualOptions.decay,
direction: -actualOptions.angle,
},
},
});
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: 5 * 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 * 9.81,
},
speed: actualOptions.startVelocity * 3,
decay: 1 - actualOptions.decay,
direction: -actualOptions.angle,
random: true,
straight: false,
outModes: {
default: "none",
bottom: "destroy",
},
},
rotate: {
value: {
min: 0,
max: 360,
},
direction: "random",
animation: {
enable: true,
speed: 60,
},
},
tilt: {
direction: "random",
enable: true,
value: {
min: 0,
max: 360,
},
animation: {
enable: true,
speed: 60,
},
},
roll: {
darken: {
enable: true,
value: 25,
},
enable: true,
speed: {
min: 15,
max: 25,
},
},
wobble: {
distance: 30,
enable: true,
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 tsparticles_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(tsparticles_engine_1.tsParticles);
let options;
let id;
if ((0, tsparticles_engine_1.isString)(idOrOptions)) {
id = idOrOptions;
options = confettiOptions ?? {};
}
else {
id = "confetti";
options = idOrOptions;
}
return setConfetti({
id,
options,
});
}
exports.confetti = confetti;
confetti.create = async (canvas, options) => {
if (!canvas) {
return confetti;
}
await initPlugins(tsparticles_engine_1.tsParticles);
const id = canvas.getAttribute("id") || "confetti";
canvas.setAttribute("id", id);
return async (idOrOptions, confettiOptions) => {
let subOptions;
let subId;
if ((0, tsparticles_engine_1.isString)(idOrOptions)) {
subId = idOrOptions;
subOptions = confettiOptions ?? options;
}
else {
subId = id;
subOptions = idOrOptions;
}
return setConfetti({
id: subId,
canvas,
options: subOptions,
});
};
};
confetti.version = tsparticles_engine_1.tsParticles.version;
if (!(0, tsparticles_engine_1.isSsr)()) {
window.confetti = confetti;
}
});