@tsparticles/pjs 3.0.0-alpha.1 → 3.0.0-beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/README.md +46 -8
  2. package/browser/VincentGarreau/particles.js +271 -0
  3. package/browser/bundle.js +2 -2
  4. package/browser/index.js +7 -20
  5. package/browser/marcbruederlin/Particles.js +83 -0
  6. package/browser/package.json +1 -0
  7. package/cjs/VincentGarreau/particles.js +274 -0
  8. package/cjs/bundle.js +3 -2
  9. package/cjs/index.js +7 -20
  10. package/cjs/marcbruederlin/Particles.js +87 -0
  11. package/cjs/package.json +1 -0
  12. package/esm/VincentGarreau/particles.js +271 -0
  13. package/esm/bundle.js +2 -2
  14. package/esm/index.js +7 -20
  15. package/esm/marcbruederlin/Particles.js +83 -0
  16. package/esm/package.json +1 -0
  17. package/package.json +36 -13
  18. package/report.html +5 -5
  19. package/tsparticles.pjs.bundle.js +2596 -2312
  20. package/tsparticles.pjs.bundle.min.js +1 -1
  21. package/tsparticles.pjs.bundle.min.js.LICENSE.txt +1 -8
  22. package/tsparticles.pjs.js +396 -12
  23. package/tsparticles.pjs.min.js +1 -1
  24. package/tsparticles.pjs.min.js.LICENSE.txt +1 -8
  25. package/types/VincentGarreau/IParticlesJS.d.ts +117 -0
  26. package/types/VincentGarreau/particles.d.ts +7 -0
  27. package/types/bundle.d.ts +2 -2
  28. package/types/index.d.ts +11 -2
  29. package/types/marcbruederlin/Particles.d.ts +23 -0
  30. package/umd/VincentGarreau/particles.js +284 -0
  31. package/umd/bundle.js +3 -2
  32. package/umd/index.js +8 -21
  33. package/umd/marcbruederlin/Particles.js +97 -0
  34. package/types/IParticlesJS.d.ts +0 -6
  35. /package/browser/{IParticlesJS.js → VincentGarreau/IParticlesJS.js} +0 -0
  36. /package/cjs/{IParticlesJS.js → VincentGarreau/IParticlesJS.js} +0 -0
  37. /package/esm/{IParticlesJS.js → VincentGarreau/IParticlesJS.js} +0 -0
  38. /package/umd/{IParticlesJS.js → VincentGarreau/IParticlesJS.js} +0 -0
package/esm/index.js CHANGED
@@ -1,23 +1,10 @@
1
+ import { Particles } from "./marcbruederlin/Particles.js";
2
+ import { initParticlesJS } from "./VincentGarreau/particles.js";
1
3
  const initPjs = (engine) => {
2
- const particlesJS = (tagId, options) => {
3
- return engine.load({ id: tagId, options: options });
4
- };
5
- particlesJS.load = (tagId, pathConfigJson, callback) => {
6
- engine
7
- .load({ id: tagId, url: pathConfigJson })
8
- .then((container) => {
9
- if (container) {
10
- callback(container);
11
- }
12
- })
13
- .catch(() => {
14
- callback(undefined);
15
- });
16
- };
17
- particlesJS.setOnClickHandler = (callback) => {
18
- engine.setOnClickHandler(callback);
19
- };
20
- const pJSDom = engine.dom();
21
- return { particlesJS, pJSDom };
4
+ const { particlesJS, pJSDom } = initParticlesJS(engine);
5
+ window.particlesJS = particlesJS;
6
+ window.pJSDom = pJSDom;
7
+ window.Particles = Particles;
8
+ return { particlesJS, pJSDom, Particles };
22
9
  };
23
10
  export { initPjs };
@@ -0,0 +1,83 @@
1
+ import { tsParticles } from "@tsparticles/engine";
2
+ export class Particles {
3
+ static init(options) {
4
+ const particles = new Particles(), selector = options.selector;
5
+ if (!selector) {
6
+ throw new Error("No selector provided");
7
+ }
8
+ const el = document.querySelector(selector);
9
+ if (!el) {
10
+ throw new Error("No element found for selector");
11
+ }
12
+ tsParticles
13
+ .load({
14
+ id: selector.replace(".", "").replace("!", ""),
15
+ element: el,
16
+ options: {
17
+ fullScreen: {
18
+ enable: false,
19
+ },
20
+ particles: {
21
+ color: {
22
+ value: options.color ?? "!000000",
23
+ },
24
+ links: {
25
+ color: "random",
26
+ distance: options.minDistance ?? 120,
27
+ enable: options.connectParticles ?? false,
28
+ },
29
+ move: {
30
+ enable: true,
31
+ speed: options.speed ?? 0.5,
32
+ },
33
+ number: {
34
+ value: options.maxParticles ?? 100,
35
+ },
36
+ size: {
37
+ value: { min: 1, max: options.sizeVariations ?? 3 },
38
+ },
39
+ },
40
+ responsive: options.responsive?.map((responsive) => ({
41
+ maxWidth: responsive.breakpoint,
42
+ options: {
43
+ particles: {
44
+ color: {
45
+ value: responsive.options?.color,
46
+ },
47
+ links: {
48
+ distance: responsive.options?.minDistance,
49
+ enable: responsive.options?.connectParticles,
50
+ },
51
+ number: {
52
+ value: options.maxParticles,
53
+ },
54
+ move: {
55
+ enable: true,
56
+ speed: responsive.options?.speed,
57
+ },
58
+ size: {
59
+ value: responsive.options?.sizeVariations,
60
+ },
61
+ },
62
+ },
63
+ })),
64
+ },
65
+ })
66
+ .then((container) => {
67
+ particles._container = container;
68
+ });
69
+ return particles;
70
+ }
71
+ destroy() {
72
+ const container = this._container;
73
+ container && container.destroy();
74
+ }
75
+ pauseAnimation() {
76
+ const container = this._container;
77
+ container && container.pause();
78
+ }
79
+ resumeAnimation() {
80
+ const container = this._container;
81
+ container && container.play();
82
+ }
83
+ }
@@ -0,0 +1 @@
1
+ { "type": "module" }
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@tsparticles/pjs",
3
- "version": "3.0.0-alpha.1",
3
+ "version": "3.0.0-beta.5",
4
4
  "description": "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.",
5
5
  "homepage": "https://particles.js.org",
6
6
  "repository": {
7
7
  "type": "git",
8
- "url": "git+https://github.com/matteobruni/tsparticles.git",
8
+ "url": "git+https://github.com/tsparticles/tsparticles.git",
9
9
  "directory": "bundles/pjs"
10
10
  },
11
11
  "keywords": [
@@ -64,21 +64,44 @@
64
64
  "author": "Matteo Bruni <matteo.bruni@me.com>",
65
65
  "license": "MIT",
66
66
  "bugs": {
67
- "url": "https://github.com/matteobruni/tsparticles/issues"
67
+ "url": "https://github.com/tsparticles/tsparticles/issues"
68
68
  },
69
- "funding": {
70
- "type": "github",
71
- "url": "https://github.com/sponsors/matteobruni"
72
- },
73
- "main": "cjs/index.js",
74
- "module": "esm/index.js",
69
+ "funding": [
70
+ {
71
+ "type": "github",
72
+ "url": "https://github.com/sponsors/matteobruni"
73
+ },
74
+ {
75
+ "type": "github",
76
+ "url": "https://github.com/sponsors/tsparticles"
77
+ },
78
+ {
79
+ "type": "buymeacoffee",
80
+ "url": "https://www.buymeacoffee.com/matteobruni"
81
+ }
82
+ ],
83
+ "sideEffects": false,
75
84
  "jsdelivr": "tsparticles.pjs.min.js",
76
85
  "unpkg": "tsparticles.pjs.min.js",
86
+ "browser": "browser/index.js",
87
+ "main": "cjs/index.js",
88
+ "module": "esm/index.js",
77
89
  "types": "types/index.d.ts",
78
- "publishConfig": {
79
- "access": "public"
90
+ "exports": {
91
+ ".": {
92
+ "types": "./types/index.d.ts",
93
+ "browser": "./browser/index.js",
94
+ "import": "./esm/index.js",
95
+ "require": "./cjs/index.js",
96
+ "umd": "./umd/index.js",
97
+ "default": "./cjs/index.js"
98
+ },
99
+ "./package.json": "./package.json"
80
100
  },
81
101
  "dependencies": {
82
- "@tsparticles/engine": "^3.0.0-alpha.1"
102
+ "@tsparticles/engine": "^3.0.0-beta.5"
103
+ },
104
+ "publishConfig": {
105
+ "access": "public"
83
106
  }
84
- }
107
+ }