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.
324 lines (323 loc) • 13.4 kB
JavaScript
"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
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) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.confetti = void 0;
const ConfettiOptions_1 = require("./ConfettiOptions");
const tsparticles_updater_angle_1 = require("tsparticles-updater-angle");
const tsparticles_move_base_1 = require("tsparticles-move-base");
const tsparticles_shape_cards_1 = require("tsparticles-shape-cards");
const tsparticles_shape_circle_1 = require("tsparticles-shape-circle");
const tsparticles_updater_color_1 = require("tsparticles-updater-color");
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_updater_opacity_1 = require("tsparticles-updater-opacity");
const tsparticles_updater_out_modes_1 = require("tsparticles-updater-out-modes");
const tsparticles_shape_polygon_1 = require("tsparticles-shape-polygon");
const tsparticles_updater_roll_1 = require("tsparticles-updater-roll");
const tsparticles_updater_size_1 = require("tsparticles-updater-size");
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");
const tsparticles_engine_1 = require("tsparticles-engine");
let initialized = false;
let initializing = false;
const ids = new Map();
function initPlugins() {
return __awaiter(this, void 0, void 0, function* () {
if (initialized) {
return;
}
if (initializing) {
return new Promise((resolve) => {
const interval = setInterval(() => {
if (initialized) {
clearInterval(interval);
resolve();
}
}, 100);
});
}
initializing = true;
yield (0, tsparticles_move_base_1.loadBaseMover)(tsparticles_engine_1.tsParticles);
yield (0, tsparticles_plugin_emitters_1.loadEmittersPlugin)(tsparticles_engine_1.tsParticles);
yield (0, tsparticles_plugin_motion_1.loadMotionPlugin)(tsparticles_engine_1.tsParticles);
yield (0, tsparticles_shape_cards_1.loadCardsShape)(tsparticles_engine_1.tsParticles);
yield (0, tsparticles_shape_circle_1.loadCircleShape)(tsparticles_engine_1.tsParticles);
yield (0, tsparticles_shape_heart_1.loadHeartShape)(tsparticles_engine_1.tsParticles);
yield (0, tsparticles_shape_image_1.loadImageShape)(tsparticles_engine_1.tsParticles);
yield (0, tsparticles_shape_polygon_1.loadPolygonShape)(tsparticles_engine_1.tsParticles);
yield (0, tsparticles_shape_square_1.loadSquareShape)(tsparticles_engine_1.tsParticles);
yield (0, tsparticles_shape_star_1.loadStarShape)(tsparticles_engine_1.tsParticles);
yield (0, tsparticles_shape_text_1.loadTextShape)(tsparticles_engine_1.tsParticles);
yield (0, tsparticles_updater_angle_1.loadAngleUpdater)(tsparticles_engine_1.tsParticles);
yield (0, tsparticles_updater_color_1.loadColorUpdater)(tsparticles_engine_1.tsParticles);
yield (0, tsparticles_updater_life_1.loadLifeUpdater)(tsparticles_engine_1.tsParticles);
yield (0, tsparticles_updater_opacity_1.loadOpacityUpdater)(tsparticles_engine_1.tsParticles);
yield (0, tsparticles_updater_out_modes_1.loadOutModesUpdater)(tsparticles_engine_1.tsParticles);
yield (0, tsparticles_updater_roll_1.loadRollUpdater)(tsparticles_engine_1.tsParticles);
yield (0, tsparticles_updater_size_1.loadSizeUpdater)(tsparticles_engine_1.tsParticles);
yield (0, tsparticles_updater_tilt_1.loadTiltUpdater)(tsparticles_engine_1.tsParticles);
yield (0, tsparticles_updater_wobble_1.loadWobbleUpdater)(tsparticles_engine_1.tsParticles);
initializing = false;
initialized = true;
});
}
function setConfetti(params) {
return __awaiter(this, void 0, void 0, function* () {
const actualOptions = new ConfettiOptions_1.ConfettiOptions();
actualOptions.load(params.options);
let container;
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,
},
size: {
value: 5 * actualOptions.scalar,
},
life: {
duration: {
value: actualOptions.ticks / 60,
},
},
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,
speed: 0.5,
startValue: "max",
destroy: "min",
},
},
size: {
value: 5 * actualOptions.scalar,
},
links: {
enable: false,
},
life: {
duration: {
sync: true,
value: actualOptions.ticks / 60,
},
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,
},
},
};
if (params.id) {
container = yield tsparticles_engine_1.tsParticles.load(params.id, particlesOptions);
}
else if (params.canvas) {
container = yield tsparticles_engine_1.tsParticles.set(params.id, params.canvas, particlesOptions);
}
ids.set(params.id, container);
return container;
});
}
function confetti(idOrOptions, confettiOptions) {
return __awaiter(this, void 0, void 0, function* () {
yield initPlugins();
let options;
let id;
if (typeof idOrOptions === "string") {
id = idOrOptions;
options = confettiOptions !== null && confettiOptions !== void 0 ? confettiOptions : {};
}
else {
id = "confetti";
options = idOrOptions;
}
return setConfetti({
id,
options,
});
});
}
exports.confetti = confetti;
confetti.create = (canvas, options) => __awaiter(void 0, void 0, void 0, function* () {
if (!canvas) {
return confetti;
}
yield initPlugins();
const id = canvas.getAttribute("id") || "confetti";
canvas.setAttribute("id", id);
return (idOrOptions, confettiOptions) => __awaiter(void 0, void 0, void 0, function* () {
let subOptions;
let subId;
if (typeof idOrOptions === "string") {
subId = idOrOptions;
subOptions = confettiOptions !== null && confettiOptions !== void 0 ? confettiOptions : options;
}
else {
subId = id;
subOptions = idOrOptions;
}
return setConfetti({
id: subId,
canvas,
options: subOptions,
});
});
});