@tsparticles/pjs 3.0.0-alpha.0 → 3.0.0-beta.4

package/tsparticles.pjs.min.js.LICENSE.txt

@@ -1,8 +1 @@
-/*!
- * Author : Matteo Bruni
- * MIT license: https://opensource.org/licenses/MIT
- * Demo / Generator : https://particles.js.org/
- * GitHub : https://www.github.com/matteobruni/tsparticles
- * How to use? : Check the GitHub README
- * v3.0.0-alpha.0
- */
+/*! tsParticles Particles.js v3.0.0-beta.4 by Matteo Bruni */

package/types/VincentGarreau/particles.d.ts

@@ -0,0 +1,7 @@
+import { type Container, type Engine } from "@tsparticles/engine";
+import type { IParticlesJS } from "./IParticlesJS.js";
+declare const initParticlesJS: (engine: Engine) => {
+    pJSDom: Container[];
+    particlesJS: IParticlesJS;
+};
+export { initParticlesJS };

package/types/bundle.d.ts

@@ -1,3 +1,3 @@
-declare const particlesJS: import("./IParticlesJS").IParticlesJS, pJSDom: import("@tsparticles/engine").Container[];
+declare const particlesJS: import("./VincentGarreau/IParticlesJS").IParticlesJS, pJSDom: import("@tsparticles/engine").Container[], Particles: typeof import("./marcbruederlin/Particles").Particles;
 export * from "@tsparticles/engine";
-export { particlesJS, pJSDom };
+export { particlesJS, pJSDom, Particles };

package/types/index.d.ts

@@ -1,6 +1,15 @@
-import type { Container, Engine } from "@tsparticles/engine";
-import type { IParticlesJS } from "./IParticlesJS";
+import { type Container, type Engine } from "@tsparticles/engine";
+import type { IParticlesJS } from "./VincentGarreau/IParticlesJS.js";
+import { Particles } from "./marcbruederlin/Particles.js";
+declare global {
+    interface Window {
+        Particles: typeof Particles;
+        pJSDom: Container[];
+        particlesJS: IParticlesJS;
+    }
+}
 declare const initPjs: (engine: Engine) => {
+    Particles: typeof Particles;
     pJSDom: Container[];
     particlesJS: IParticlesJS;
 };

package/types/marcbruederlin/Particles.d.ts

@@ -0,0 +1,23 @@
+import { type RecursivePartial, type SingleOrMultiple } from "@tsparticles/engine";
+interface ResponsiveOptions {
+    breakpoint: number;
+    options: ParticlesOptions;
+}
+interface ParticlesOptions {
+    color: SingleOrMultiple<string>;
+    connectParticles: boolean;
+    maxParticles: number;
+    minDistance: number;
+    responsive: ResponsiveOptions[];
+    selector: string;
+    sizeVariations: number;
+    speed: number;
+}
+export declare class Particles {
+    private _container?;
+    static init(options: RecursivePartial<ParticlesOptions>): Particles;
+    destroy(): void;
+    pauseAnimation(): void;
+    resumeAnimation(): void;
+}
+export {};

package/umd/VincentGarreau/particles.js

@@ -0,0 +1,36 @@
+(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"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.initParticlesJS = void 0;
+    const initParticlesJS = (engine) => {
+        const particlesJS = (tagId, options) => {
+            return engine.load({ id: tagId, options });
+        };
+        particlesJS.load = (tagId, pathConfigJson, callback) => {
+            engine
+                .load({ id: tagId, url: pathConfigJson })
+                .then((container) => {
+                if (container) {
+                    callback(container);
+                }
+            })
+                .catch(() => {
+                callback(undefined);
+            });
+        };
+        particlesJS.setOnClickHandler = (callback) => {
+            engine.setOnClickHandler(callback);
+        };
+        const pJSDom = engine.dom();
+        return { particlesJS, pJSDom };
+    };
+    exports.initParticlesJS = initParticlesJS;
+});

package/umd/bundle.js

@@ -23,11 +23,12 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.pJSDom = exports.particlesJS = void 0;
+    exports.Particles = exports.pJSDom = exports.particlesJS = void 0;
     const _1 = require(".");
     const engine_1 = require("@tsparticles/engine");
-    const { particlesJS, pJSDom } = (0, _1.initPjs)(engine_1.tsParticles);
+    const { particlesJS, pJSDom, Particles } = (0, _1.initPjs)(engine_1.tsParticles);
     exports.particlesJS = particlesJS;
     exports.pJSDom = pJSDom;
+    exports.Particles = Particles;
     __exportStar(require("@tsparticles/engine"), exports);
 });

package/umd/index.js

@@ -4,33 +4,20 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports"], factory);
+        define(["require", "exports", "./marcbruederlin/Particles.js", "./VincentGarreau/particles.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.initPjs = void 0;
+    const Particles_js_1 = require("./marcbruederlin/Particles.js");
+    const particles_js_1 = require("./VincentGarreau/particles.js");
     const initPjs = (engine) => {
-        const particlesJS = (tagId, options) => {
-            return engine.load({ id: tagId, options: options });
-        };
-        particlesJS.load = (tagId, pathConfigJson, callback) => {
-            engine
-                .load({ id: tagId, url: pathConfigJson })
-                .then((container) => {
-                if (container) {
-                    callback(container);
-                }
-            })
-                .catch(() => {
-                callback(undefined);
-            });
-        };
-        particlesJS.setOnClickHandler = (callback) => {
-            engine.setOnClickHandler(callback);
-        };
-        const pJSDom = engine.dom();
-        return { particlesJS, pJSDom };
+        const { particlesJS, pJSDom } = (0, particles_js_1.initParticlesJS)(engine);
+        window.particlesJS = particlesJS;
+        window.pJSDom = pJSDom;
+        window.Particles = Particles_js_1.Particles;
+        return { particlesJS, pJSDom, Particles: Particles_js_1.Particles };
     };
     exports.initPjs = initPjs;
 });

package/umd/marcbruederlin/Particles.js

@@ -0,0 +1,97 @@
+(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"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Particles = void 0;
+    const engine_1 = require("@tsparticles/engine");
+    class Particles {
+        static init(options) {
+            const particles = new Particles(), selector = options.selector;
+            if (!selector) {
+                throw new Error("No selector provided");
+            }
+            const el = document.querySelector(selector);
+            if (!el) {
+                throw new Error("No element found for selector");
+            }
+            engine_1.tsParticles
+                .load({
+                id: selector.replace(".", "").replace("!", ""),
+                element: el,
+                options: {
+                    fullScreen: {
+                        enable: false,
+                    },
+                    particles: {
+                        color: {
+                            value: options.color ?? "!000000",
+                        },
+                        links: {
+                            color: "random",
+                            distance: options.minDistance ?? 120,
+                            enable: options.connectParticles ?? false,
+                        },
+                        move: {
+                            enable: true,
+                            speed: options.speed ?? 0.5,
+                        },
+                        number: {
+                            value: options.maxParticles ?? 100,
+                        },
+                        size: {
+                            value: { min: 1, max: options.sizeVariations ?? 3 },
+                        },
+                    },
+                    responsive: options.responsive?.map((responsive) => ({
+                        maxWidth: responsive.breakpoint,
+                        options: {
+                            particles: {
+                                color: {
+                                    value: responsive.options?.color,
+                                },
+                                links: {
+                                    distance: responsive.options?.minDistance,
+                                    enable: responsive.options?.connectParticles,
+                                },
+                                number: {
+                                    value: options.maxParticles,
+                                },
+                                move: {
+                                    enable: true,
+                                    speed: responsive.options?.speed,
+                                },
+                                size: {
+                                    value: responsive.options?.sizeVariations,
+                                },
+                            },
+                        },
+                    })),
+                },
+            })
+                .then((container) => {
+                particles._container = container;
+            });
+            return particles;
+        }
+        destroy() {
+            const container = this._container;
+            container && container.destroy();
+        }
+        pauseAnimation() {
+            const container = this._container;
+            container && container.pause();
+        }
+        resumeAnimation() {
+            const container = this._container;
+            container && container.play();
+        }
+    }
+    exports.Particles = Particles;
+});