UNPKG

13.6 kBJavaScriptView Raw
1(function (factory) {
2 if (typeof module === "object" && typeof module.exports === "object") {
3 var v = factory(require, exports);
4 if (v !== undefined) module.exports = v;
5 }
6 else if (typeof define === "function" && define.amd) {
7 define(["require", "exports", "./ConfettiOptions", "tsparticles-updater-angle", "tsparticles-move-base", "tsparticles-shape-cards", "tsparticles-shape-circle", "tsparticles-updater-color", "tsparticles-plugin-emitters", "tsparticles-shape-heart", "tsparticles-shape-image", "tsparticles-updater-life", "tsparticles-plugin-motion", "tsparticles-updater-opacity", "tsparticles-updater-out-modes", "tsparticles-shape-polygon", "tsparticles-updater-roll", "tsparticles-updater-size", "tsparticles-shape-square", "tsparticles-shape-star", "tsparticles-shape-text", "tsparticles-updater-tilt", "tsparticles-updater-wobble", "tsparticles-engine"], factory);
8 }
9})(function (require, exports) {
10 "use strict";
11 Object.defineProperty(exports, "__esModule", { value: true });
12 exports.confetti = void 0;
13 const ConfettiOptions_1 = require("./ConfettiOptions");
14 const tsparticles_updater_angle_1 = require("tsparticles-updater-angle");
15 const tsparticles_move_base_1 = require("tsparticles-move-base");
16 const tsparticles_shape_cards_1 = require("tsparticles-shape-cards");
17 const tsparticles_shape_circle_1 = require("tsparticles-shape-circle");
18 const tsparticles_updater_color_1 = require("tsparticles-updater-color");
19 const tsparticles_plugin_emitters_1 = require("tsparticles-plugin-emitters");
20 const tsparticles_shape_heart_1 = require("tsparticles-shape-heart");
21 const tsparticles_shape_image_1 = require("tsparticles-shape-image");
22 const tsparticles_updater_life_1 = require("tsparticles-updater-life");
23 const tsparticles_plugin_motion_1 = require("tsparticles-plugin-motion");
24 const tsparticles_updater_opacity_1 = require("tsparticles-updater-opacity");
25 const tsparticles_updater_out_modes_1 = require("tsparticles-updater-out-modes");
26 const tsparticles_shape_polygon_1 = require("tsparticles-shape-polygon");
27 const tsparticles_updater_roll_1 = require("tsparticles-updater-roll");
28 const tsparticles_updater_size_1 = require("tsparticles-updater-size");
29 const tsparticles_shape_square_1 = require("tsparticles-shape-square");
30 const tsparticles_shape_star_1 = require("tsparticles-shape-star");
31 const tsparticles_shape_text_1 = require("tsparticles-shape-text");
32 const tsparticles_updater_tilt_1 = require("tsparticles-updater-tilt");
33 const tsparticles_updater_wobble_1 = require("tsparticles-updater-wobble");
34 const tsparticles_engine_1 = require("tsparticles-engine");
35 let initialized = false;
36 let initializing = false;
37 const ids = new Map();
38 async function initPlugins() {
39 if (initialized) {
40 return;
41 }
42 if (initializing) {
43 return new Promise((resolve) => {
44 const interval = setInterval(() => {
45 if (initialized) {
46 clearInterval(interval);
47 resolve();
48 }
49 }, 100);
50 });
51 }
52 initializing = true;
53 await (0, tsparticles_move_base_1.loadBaseMover)(tsparticles_engine_1.tsParticles);
54 await (0, tsparticles_plugin_emitters_1.loadEmittersPlugin)(tsparticles_engine_1.tsParticles);
55 await (0, tsparticles_plugin_motion_1.loadMotionPlugin)(tsparticles_engine_1.tsParticles);
56 await (0, tsparticles_shape_cards_1.loadCardsShape)(tsparticles_engine_1.tsParticles);
57 await (0, tsparticles_shape_circle_1.loadCircleShape)(tsparticles_engine_1.tsParticles);
58 await (0, tsparticles_shape_heart_1.loadHeartShape)(tsparticles_engine_1.tsParticles);
59 await (0, tsparticles_shape_image_1.loadImageShape)(tsparticles_engine_1.tsParticles);
60 await (0, tsparticles_shape_polygon_1.loadPolygonShape)(tsparticles_engine_1.tsParticles);
61 await (0, tsparticles_shape_square_1.loadSquareShape)(tsparticles_engine_1.tsParticles);
62 await (0, tsparticles_shape_star_1.loadStarShape)(tsparticles_engine_1.tsParticles);
63 await (0, tsparticles_shape_text_1.loadTextShape)(tsparticles_engine_1.tsParticles);
64 await (0, tsparticles_updater_angle_1.loadAngleUpdater)(tsparticles_engine_1.tsParticles);
65 await (0, tsparticles_updater_color_1.loadColorUpdater)(tsparticles_engine_1.tsParticles);
66 await (0, tsparticles_updater_life_1.loadLifeUpdater)(tsparticles_engine_1.tsParticles);
67 await (0, tsparticles_updater_opacity_1.loadOpacityUpdater)(tsparticles_engine_1.tsParticles);
68 await (0, tsparticles_updater_out_modes_1.loadOutModesUpdater)(tsparticles_engine_1.tsParticles);
69 await (0, tsparticles_updater_roll_1.loadRollUpdater)(tsparticles_engine_1.tsParticles);
70 await (0, tsparticles_updater_size_1.loadSizeUpdater)(tsparticles_engine_1.tsParticles);
71 await (0, tsparticles_updater_tilt_1.loadTiltUpdater)(tsparticles_engine_1.tsParticles);
72 await (0, tsparticles_updater_wobble_1.loadWobbleUpdater)(tsparticles_engine_1.tsParticles);
73 initializing = false;
74 initialized = true;
75 }
76 async function setConfetti(params) {
77 const actualOptions = new ConfettiOptions_1.ConfettiOptions();
78 actualOptions.load(params.options);
79 let container;
80 if (ids.has(params.id)) {
81 container = ids.get(params.id);
82 if (container && !container.destroyed) {
83 const alias = container;
84 if (alias.addEmitter) {
85 alias.addEmitter({
86 startCount: actualOptions.count,
87 position: actualOptions.position,
88 size: {
89 width: 0,
90 height: 0,
91 },
92 rate: {
93 delay: 0,
94 quantity: 0,
95 },
96 life: {
97 duration: 0.1,
98 count: 1,
99 },
100 particles: {
101 color: {
102 value: actualOptions.colors,
103 },
104 shape: {
105 type: actualOptions.shapes,
106 options: actualOptions.shapeOptions,
107 },
108 size: {
109 value: 5 * actualOptions.scalar,
110 },
111 life: {
112 duration: {
113 value: actualOptions.ticks / 60,
114 },
115 },
116 move: {
117 angle: {
118 value: actualOptions.spread,
119 offset: 0,
120 },
121 drift: {
122 min: -actualOptions.drift,
123 max: actualOptions.drift,
124 },
125 gravity: {
126 acceleration: actualOptions.gravity * 9.81,
127 },
128 speed: actualOptions.startVelocity * 3,
129 decay: 1 - actualOptions.decay,
130 direction: -actualOptions.angle,
131 },
132 },
133 });
134 return;
135 }
136 }
137 }
138 const particlesOptions = {
139 fullScreen: {
140 enable: !params.canvas,
141 zIndex: actualOptions.zIndex,
142 },
143 fpsLimit: 120,
144 particles: {
145 number: {
146 value: 0,
147 },
148 color: {
149 value: actualOptions.colors,
150 },
151 shape: {
152 type: actualOptions.shapes,
153 options: actualOptions.shapeOptions,
154 },
155 opacity: {
156 value: { min: 0, max: 1 },
157 animation: {
158 enable: true,
159 speed: 0.5,
160 startValue: "max",
161 destroy: "min",
162 },
163 },
164 size: {
165 value: 5 * actualOptions.scalar,
166 },
167 links: {
168 enable: false,
169 },
170 life: {
171 duration: {
172 sync: true,
173 value: actualOptions.ticks / 60,
174 },
175 count: 1,
176 },
177 move: {
178 angle: {
179 value: actualOptions.spread,
180 offset: 0,
181 },
182 drift: {
183 min: -actualOptions.drift,
184 max: actualOptions.drift,
185 },
186 enable: true,
187 gravity: {
188 enable: true,
189 acceleration: actualOptions.gravity * 9.81,
190 },
191 speed: actualOptions.startVelocity * 3,
192 decay: 1 - actualOptions.decay,
193 direction: -actualOptions.angle,
194 random: true,
195 straight: false,
196 outModes: {
197 default: "none",
198 bottom: "destroy",
199 },
200 },
201 rotate: {
202 value: {
203 min: 0,
204 max: 360,
205 },
206 direction: "random",
207 animation: {
208 enable: true,
209 speed: 60,
210 },
211 },
212 tilt: {
213 direction: "random",
214 enable: true,
215 value: {
216 min: 0,
217 max: 360,
218 },
219 animation: {
220 enable: true,
221 speed: 60,
222 },
223 },
224 roll: {
225 darken: {
226 enable: true,
227 value: 25,
228 },
229 enable: true,
230 speed: {
231 min: 15,
232 max: 25,
233 },
234 },
235 wobble: {
236 distance: 30,
237 enable: true,
238 speed: {
239 min: -15,
240 max: 15,
241 },
242 },
243 },
244 detectRetina: true,
245 motion: {
246 disable: actualOptions.disableForReducedMotion,
247 },
248 emitters: {
249 name: "confetti",
250 startCount: actualOptions.count,
251 position: actualOptions.position,
252 size: {
253 width: 0,
254 height: 0,
255 },
256 rate: {
257 delay: 0,
258 quantity: 0,
259 },
260 life: {
261 duration: 0.1,
262 count: 1,
263 },
264 },
265 };
266 if (params.id) {
267 container = await tsparticles_engine_1.tsParticles.load(params.id, particlesOptions);
268 }
269 else if (params.canvas) {
270 container = await tsparticles_engine_1.tsParticles.set(params.id, params.canvas, particlesOptions);
271 }
272 ids.set(params.id, container);
273 return container;
274 }
275 async function confetti(idOrOptions, confettiOptions) {
276 await initPlugins();
277 let options;
278 let id;
279 if (typeof idOrOptions === "string") {
280 id = idOrOptions;
281 options = confettiOptions !== null && confettiOptions !== void 0 ? confettiOptions : {};
282 }
283 else {
284 id = "confetti";
285 options = idOrOptions;
286 }
287 return setConfetti({
288 id,
289 options,
290 });
291 }
292 exports.confetti = confetti;
293 confetti.create = async (canvas, options) => {
294 if (!canvas) {
295 return confetti;
296 }
297 await initPlugins();
298 const id = canvas.getAttribute("id") || "confetti";
299 canvas.setAttribute("id", id);
300 return async (idOrOptions, confettiOptions) => {
301 let subOptions;
302 let subId;
303 if (typeof idOrOptions === "string") {
304 subId = idOrOptions;
305 subOptions = confettiOptions !== null && confettiOptions !== void 0 ? confettiOptions : options;
306 }
307 else {
308 subId = id;
309 subOptions = idOrOptions;
310 }
311 return setConfetti({
312 id: subId,
313 canvas,
314 options: subOptions,
315 });
316 };
317 };
318});