Skip to content

Commit f97f17c

Browse files
matteobrunimatteobruni
committed
feat: added init and loaded properties, this will fix issues #2 and #5 
1 parent 11fe81e commit f97f17c

File tree

9 files changed

+3401
-3660
lines changed

9 files changed

+3401
-3660
lines changed

‎README.md‎

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,9 @@ const options: ISourceOptions = {
3737
zIndex: -1
3838
},
3939
particles: {
40+
number: {
41+
value: 100
42+
},
4043
move: {
4144
enable: true
4245
}
@@ -45,30 +48,44 @@ const options: ISourceOptions = {
4548
---
4649
4750
<script>
48-
import { tsParticles } from "tsparticles-engine";
51+
import { type Container, type Engine, tsParticles } from "tsparticles-engine";
4952
import { loadFull } from "tsparticles";
5053
51-
(async () => {
52-
await loadFull(tsParticles);
53-
})();
54+
// the function name is the parameter passed to the init attribute
55+
// required
56+
// add the function to window is mandatory, it will be searched there
57+
window.particlesInit = async function (engine: Engine) {
58+
await loadFull(engine);
59+
}
60+
61+
// the function name is the parameter passed to the loaded attribute
62+
// optional
63+
// add the function to window is mandatory, it will be searched there
64+
window.particlesLoaded = function (container: Container) {
65+
console.log("particlesLoaded callback");
66+
}
5467
</script>
5568
56-
<Particles id="tsparticles" options={options} />
69+
<Particles id="tsparticles" options={options} init="particlesInit" />
5770
```
5871

5972
### Props
6073

61-
| Prop | Type | Definition |
62-
|-----------------| -------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
63-
| id | string | The id of the element. |
64-
| options | object | The options of the particles instance. |
65-
| url | string | The remote options url, called using an AJAX request |
74+
| Prop | Type | Definition |
75+
|---------|--------|------------------------------------------------------------------------|
76+
| id | string | The id of the element. |
77+
| init | string | The name of the function to call when the particles instance is ready. |
78+
| loaded | string | The name of the function to call when the particles are loaded. |
79+
| options | object | The options of the particles instance. |
80+
| url | string | The remote options url, called using an AJAX request |
6681

6782
#### particles.json
6883

69-
Find all configuration options [here](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html).
84+
Find all configuration
85+
options [here](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html).
7086

71-
You can find sample json configurations [here](https://github.com/matteobruni/tsparticles/tree/main/websites/particles.js.org/presets) 📖
87+
You can find sample json
88+
configurations [here](https://github.com/matteobruni/tsparticles/tree/main/websites/particles.js.org/presets) 📖
7289

7390
## Demos
7491

‎apps/astro/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@
1212
"astro": "astro"
1313
},
1414
"dependencies": {
15-
"astro-particles": "^2.9.3",
16-
"tsparticles-engine": "^2.9.3",
17-
"astro": "^2.0.1",
18-
"tsparticles": "^2.9.3"
15+
"astro": "^2.6.4",
16+
"astro-particles": "workspace:^",
17+
"tsparticles": "^2.10.1",
18+
"tsparticles-engine": "^2.10.1"
1919
}
2020
}

‎apps/astro/src/pages/index.astro‎

Lines changed: 97 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,27 @@
11
---
2-
import Particles from "astro-particles"
3-
import Layout from '../layouts/Layout.astro';
4-
import Card from '../components/Card.astro';
2+
import Particles from "astro-particles";
3+
import Layout from "../layouts/Layout.astro";
4+
import Card from "../components/Card.astro";
55
import type { ISourceOptions } from "tsparticles-engine";
66
7-
const options: ISourceOptions = {
7+
const options = {
88
background: {
9-
color: "#000"
9+
color: "#fff"
1010
},
1111
fullScreen: {
1212
zIndex: -1
1313
},
1414
particles: {
15-
number: {
16-
value: 100
17-
},
15+
color: {
16+
value: "#000"
17+
},
18+
links: {
19+
color: "#000",
20+
enable: true
21+
},
22+
number: {
23+
value: 100
24+
},
1825
move: {
1926
enable: true
2027
}
@@ -23,88 +30,94 @@ const options: ISourceOptions = {
2330
---
2431

2532
<script>
26-
import { tsParticles } from "tsparticles-engine";
33+
import { type Engine, tsParticles } from "tsparticles-engine";
2734
import { loadFull } from "tsparticles";
2835

29-
(async () => {
30-
await loadFull(tsParticles);
31-
})();
36+
window.particlesInit = async (engine: Engine) => {
37+
await loadFull(engine);
38+
};
3239
</script>
3340

3441
<Layout title="Welcome to Astro.">
35-
<main>
36-
<Particles id="tsparticles" options={options} />
37-
<h1>Welcome to <span class="text-gradient">Astro</span></h1>
38-
<p class="instructions">
39-
To get started, open the directory <code>src/pages</code> in your project.<br />
40-
<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
41-
</p>
42-
<ul role="list" class="link-card-grid">
43-
<Card
44-
href="https://docs.astro.build/"
45-
title="Documentation"
46-
body="Learn how Astro works and explore the official API docs."
47-
/>
48-
<Card
49-
href="https://astro.build/integrations/"
50-
title="Integrations"
51-
body="Supercharge your project with new frameworks and libraries."
52-
/>
53-
<Card
54-
href="https://astro.build/themes/"
55-
title="Themes"
56-
body="Explore a galaxy of community-built starter themes."
57-
/>
58-
<Card
59-
href="https://astro.build/chat/"
60-
title="Community"
61-
body="Come say hi to our amazing Discord community. ❤️"
62-
/>
63-
</ul>
64-
</main>
42+
<main>
43+
<Particles id="tsparticles" options={options} init="particlesInit" />
44+
<h1>Welcome to <span class="text-gradient">Astro</span></h1>
45+
<p class="instructions">
46+
To get started, open the directory <code>src/pages</code> in your project.<br />
47+
<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
48+
</p>
49+
<ul role="list" class="link-card-grid">
50+
<Card
51+
href="https://docs.astro.build/"
52+
title="Documentation"
53+
body="Learn how Astro works and explore the official API docs."
54+
/>
55+
<Card
56+
href="https://astro.build/integrations/"
57+
title="Integrations"
58+
body="Supercharge your project with new frameworks and libraries."
59+
/>
60+
<Card
61+
href="https://astro.build/themes/"
62+
title="Themes"
63+
body="Explore a galaxy of community-built starter themes."
64+
/>
65+
<Card
66+
href="https://astro.build/chat/"
67+
title="Community"
68+
body="Come say hi to our amazing Discord community. ❤️"
69+
/>
70+
</ul>
71+
</main>
6572
</Layout>
6673

6774
<style>
68-
main {
69-
margin: auto;
70-
padding: 1.5rem;
71-
max-width: 60ch;
72-
}
73-
h1 {
74-
font-size: 3rem;
75-
font-weight: 800;
76-
margin: 0;
77-
}
78-
.text-gradient {
79-
background-image: var(--accent-gradient);
80-
-webkit-background-clip: text;
81-
-webkit-text-fill-color: transparent;
82-
background-size: 400%;
83-
background-position: 0%;
84-
}
85-
.instructions {
86-
line-height: 1.6;
87-
margin: 1rem 0;
88-
border: 1px solid rgba(var(--accent), 25%);
89-
background-color: white;
90-
padding: 1rem;
91-
border-radius: 0.4rem;
92-
}
93-
.instructions code {
94-
font-size: 0.875em;
95-
font-weight: bold;
96-
background: rgba(var(--accent), 12%);
97-
color: rgb(var(--accent));
98-
border-radius: 4px;
99-
padding: 0.3em 0.45em;
100-
}
101-
.instructions strong {
102-
color: rgb(var(--accent));
103-
}
104-
.link-card-grid {
105-
display: grid;
106-
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
107-
gap: 1rem;
108-
padding: 0;
109-
}
75+
main {
76+
margin: auto;
77+
padding: 1.5rem;
78+
max-width: 60ch;
79+
}
80+
81+
h1 {
82+
font-size: 3rem;
83+
font-weight: 800;
84+
margin: 0;
85+
}
86+
87+
.text-gradient {
88+
background-image: var(--accent-gradient);
89+
-webkit-background-clip: text;
90+
-webkit-text-fill-color: transparent;
91+
background-size: 400%;
92+
background-position: 0%;
93+
}
94+
95+
.instructions {
96+
line-height: 1.6;
97+
margin: 1rem 0;
98+
border: 1px solid rgba(var(--accent), 25%);
99+
background-color: white;
100+
padding: 1rem;
101+
border-radius: 0.4rem;
102+
}
103+
104+
.instructions code {
105+
font-size: 0.875em;
106+
font-weight: bold;
107+
background: rgba(var(--accent), 12%);
108+
color: rgb(var(--accent));
109+
border-radius: 4px;
110+
padding: 0.3em 0.45em;
111+
}
112+
113+
.instructions strong {
114+
color: rgb(var(--accent));
115+
}
116+
117+
.link-card-grid {
118+
display: grid;
119+
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
120+
gap: 1rem;
121+
padding: 0;
122+
}
110123
</style>

‎components/astro/README.md‎

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -48,30 +48,42 @@ const options: ISourceOptions = {
4848
---
4949
5050
<script>
51-
import { tsParticles } from "tsparticles-engine";
51+
import { type Container, type Engine, tsParticles } from "tsparticles-engine";
5252
import { loadFull } from "tsparticles";
5353
54-
(async () => {
55-
await loadFull(tsParticles);
56-
})();
54+
// the function name is the parameter passed to the init attribute
55+
// required
56+
window.particlesInit = async function (engine: Engine) {
57+
await loadFull(engine);
58+
}
59+
60+
// the function name is the parameter passed to the loaded attribute
61+
// optional
62+
window.particlesLoaded = function (container: Container) {
63+
console.log("particlesLoaded callback");
64+
}
5765
</script>
5866
59-
<Particles id="tsparticles" options={options} />
67+
<Particles id="tsparticles" options={options} init="particlesInit" />
6068
```
6169

6270
### Props
6371

64-
| Prop | Type | Definition |
65-
|-----------------| -------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
66-
| id | string | The id of the element. |
67-
| options | object | The options of the particles instance. |
68-
| url | string | The remote options url, called using an AJAX request |
72+
| Prop | Type | Definition |
73+
|---------|--------|------------------------------------------------------------------------|
74+
| id | string | The id of the element. |
75+
| init | string | The name of the function to call when the particles instance is ready. |
76+
| loaded | string | The name of the function to call when the particles are loaded. |
77+
| options | object | The options of the particles instance. |
78+
| url | string | The remote options url, called using an AJAX request |
6979

7080
#### particles.json
7181

72-
Find all configuration options [here](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html).
82+
Find all configuration
83+
options [here](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html).
7384

74-
You can find sample json configurations [here](https://github.com/matteobruni/tsparticles/tree/main/websites/particles.js.org/presets) 📖
85+
You can find sample json
86+
configurations [here](https://github.com/matteobruni/tsparticles/tree/main/websites/particles.js.org/presets) 📖
7587

7688
## Demos
7789

‎components/astro/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,6 @@
9191
".": "./index.ts"
9292
},
9393
"dependencies": {
94-
"tsparticles-engine": "^2.9.3"
94+
"tsparticles-engine": "^2.10.1"
9595
}
9696
}

0 commit comments

Comments
 (0)