Skip to content

Commit 36021ec

Browse files
matteobrunimatteobruni
committed
build: updated vanilla_new demo, now works fine
1 parent cfb004e commit 36021ec

6 files changed

Lines changed: 156 additions & 253 deletions

File tree

‎demo/vanilla_new/404.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
existed.</p>
2323
</div>
2424
<div class="links">
25-
<a href="http://particles.js.org/"></a>
25+
<a href="http://particles.js.org/">OFFICIAL WEBSITE</a>
2626
</div>
2727
</div>
2828
<div class="social">
@@ -34,7 +34,7 @@
3434
</div>
3535
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/js/fontawesome.min.js"
3636
integrity="sha256-NP9NujdEzS5m4ZxvNqkcbxyHB0dTRy9hG13RwTVBGwo=" crossorigin="anonymous"></script>
37-
<script src="js/tsparticles.bundle.min.js"></script>
37+
<script src="js/tsparticles/tsparticles.all.bundle.min.js"></script>
3838
<script src="js/404.min.js">
3939
</script>
4040
</body>

‎demo/vanilla_new/index.html‎

Lines changed: 77 additions & 193 deletions
Original file line numberDiff line numberDiff line change
@@ -2,157 +2,41 @@
22
<html lang="en">
33

44
<head>
5-
<meta charset="utf-8" />
6-
<link rel="shortcut icon" href="https://particles.js.org/tsParticles-64.png" />
7-
<meta name="description"
8-
content="tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno." />
9-
<meta name="author" content="Matteo Bruni" />
10-
<meta name="keywords"
11-
content="HTML, CSS, JavaScript, Particles, Particles.js, Animations, React, Vue, Angular, Vue.js, Svelte" />
12-
<meta name="apple-mobile-web-app-capable" content="yes" />
13-
<meta name="viewport"
14-
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
15-
16-
<meta name="twitter:card" content="summary_large_image" />
17-
<meta name="twitter:creator" content="@HollowMatt_ITA" />
18-
<meta name="twitter:image:src" content="https://particles.js.org/images/demo2.png" />
19-
20-
<meta property="og:title" content="tsParticles - JavaScript Particles animations for your website" />
21-
<meta property="og:site_name" content="tsParticles" />
22-
<meta property="og:url" content="https://particles.js.org/" />
23-
<meta property="og:description"
24-
content="Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno." />
25-
<meta property="og:image" content="https://particles.js.org/images/demo2.png" />
26-
27-
<title>tsParticles | JavaScript Particles animations for your website</title>
28-
29-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
30-
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
31-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css"
32-
integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
33-
34-
<link href="css/main.min.css" rel="stylesheet" type="text/css" />
5+
<meta charset="utf-8"/>
6+
<link rel="shortcut icon" href="https://particles.js.org/tsParticles-64.png"/>
7+
<meta name="description"
8+
content="tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno."/>
9+
<meta name="author" content="Matteo Bruni"/>
10+
<meta name="keywords"
11+
content="HTML, CSS, JavaScript, Particles, Particles.js, Animations, React, Vue, Angular, Vue.js, Svelte"/>
12+
<meta name="apple-mobile-web-app-capable" content="yes"/>
13+
<meta name="viewport"
14+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
15+
16+
<meta name="twitter:card" content="summary_large_image"/>
17+
<meta name="twitter:creator" content="@HollowMatt_ITA"/>
18+
<meta name="twitter:image:src" content="https://particles.js.org/images/demo2.png"/>
19+
20+
<meta property="og:title" content="tsParticles - JavaScript Particles animations for your website"/>
21+
<meta property="og:site_name" content="tsParticles"/>
22+
<meta property="og:url" content="https://particles.js.org/"/>
23+
<meta property="og:description"
24+
content="Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno."/>
25+
<meta property="og:image" content="https://particles.js.org/images/demo2.png"/>
26+
27+
<title>tsParticles | JavaScript Particles animations for your website</title>
28+
29+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
30+
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"/>
31+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css"
32+
integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous"/>
33+
34+
<link href="css/main.min.css" rel="stylesheet" type="text/css"/>
3535
</head>
3636

3737
<body>
38-
<div id="tsparticles"></div>
3938
<div id="floating-container">
40-
<select id="preset">
41-
<option value="absorbers">Absorbers</option>
42-
<option value="amongUs">Among Us</option>
43-
<option value="background">Background Mask</option>
44-
<option value="big">Big Particles</option>
45-
<option value="blackHole">Black Hole</option>
46-
<option value="bubble">Bubble</option>
47-
<option value="chars">Chars</option>
48-
<option value="clickPause">Click Pause</option>
49-
<option value="collisionsAbsorb">Collisions Absorb</option>
50-
<option value="collisionsBounce">Collisions Bounce</option>
51-
<option value="collisionsDestroy">Collisions Destroy</option>
52-
<option value="connect">Connect</option>
53-
<option value="customPreset">Custom Preset</option>
54-
<option value="customShape">Custom Shape</option>
55-
<option value="dataImages">Data URI Images</option>
56-
<option value="basic">Default</option>
57-
<option value="delay">Delay</option>
58-
<option value="destroy">Destroy</option>
59-
<option value="disappearing">Disappearing</option>
60-
<option value="divEvents">Div Events</option>
61-
<option value="emitter">Emitter</option>
62-
<option value="emitterAngled">Emitter Angled</option>
63-
<option value="emitterAbsorber">Emitter and Absorber</option>
64-
<option value="emitterImages">Emitter Images</option>
65-
<option value="emitterPaths">Emitter Paths</option>
66-
<option value="emitterShapes">Emitter Shapes</option>
67-
<option value="fireworks">Fireworks</option>
68-
<option value="forward">Forward</option>
69-
<option value="grabRandomColor">Grab Random Color</option>
70-
<option value="gradients">Gradients</option>
71-
<option value="gravity">Gravity</option>
72-
<option value="growing">Growing</option>
73-
<option value="fontawesome">Font Awesome</option>
74-
<option value="hexagonPath">Hexagon Path</option>
75-
<option value="hollowknight">Hollow Knight</option>
76-
<option value="hyperspace">Hyperspace</option>
77-
<option value="imageMask">Image Mask</option>
78-
<option value="images">Images</option>
79-
<option value="imagesDirections">Images with Custom Directions</option>
80-
<option value="infection">Infection</option>
81-
<option value="life">Life</option>
82-
<option value="lightHover">Light Hover</option>
83-
<option value="linkTriangles">Link Triangles</option>
84-
<option value="localPolygonMask">Local Polygon Mask</option>
85-
<option value="manual">Manual</option>
86-
<option value="motionDisable">Motion Disable</option>
87-
<option value="motionReduce">Motion Reduce</option>
88-
<option value="mouseAttract">Mouse Attract</option>
89-
<option value="mouseBounce">Mouse Bounce</option>
90-
<option value="mouseFollow">Mouse Follow</option>
91-
<option value="mouseTrail">Mouse Trail</option>
92-
<option value="moveAngle">Move Angle</option>
93-
<option value="moveDistance">Move Distance</option>
94-
<option value="moveInside">Move Inside</option>
95-
<option value="moveOutside">Move Outside</option>
96-
<option value="multipleClickEmitters">Multiple Click Emitters</option>
97-
<option value="multiplePolygonMasks">Multiple Polygon Masks</option>
98-
<option value="nasa">NASA</option>
99-
<option value="noconfig">No Config</option>
100-
<option value="noisePlanes">Noise Planes</option>
101-
<option value="nyancat">Nyan Cat</option>
102-
<option value="nyancat2">Nyan Cat 2</option>
103-
<option value="orbit">Orbit</option>
104-
<option value="parallax">Parallax</option>
105-
<option value="pathPolygonMask">Path Polygon Mask</option>
106-
<option value="planes">Planes</option>
107-
<option value="plasma">Plasma</option>
108-
<option value="polygonMask">Polygon Mask</option>
109-
<option value="polygons">Polygon Shape</option>
110-
<option value="random">Random Colors</option>
111-
<option value="reactBubbles">React Bubbles</option>
112-
<option value="reactDefaults">React Defaults</option>
113-
<option value="reactMultipleImages">React Multiple Images</option>
114-
<option value="reactNightSky">React Night Sky</option>
115-
<option value="reactPolygonMask">React Polygon Mask</option>
116-
<option value="reactSimple">React Simple</option>
117-
<option value="reactSnow">React Snow</option>
118-
<option value="reduceDuplicates">Reduce Duplicates</option>
119-
<option value="repulse">Repulse</option>
120-
<option value="repulseBack">Repulse Back</option>
121-
<option value="repulseCirc">Repulse Circ</option>
122-
<option value="repulseCubic">Repulse Cubic</option>
123-
<option value="repulseExpo">Repulse Expo</option>
124-
<option value="repulseQuart">Repulse Quart</option>
125-
<option value="repulseQuint">Repulse Quint</option>
126-
<option value="repulseSine">Repulse Sine</option>
127-
<option value="responsive">Responsive</option>
128-
<option value="ring">Ring</option>
129-
<option value="seaAnemone">Sea Anemone</option>
130-
<option value="shadow">Shadow</option>
131-
<option value="shapeBubble">Shape Bubble</option>
132-
<option value="shapeHeart">Shape Heart</option>
133-
<option value="shapeMultilineText">Shape Multiline Text</option>
134-
<option value="shapeOptions">Shape Options</option>
135-
<option value="shapeRoundedRect">Shape Rounded Rect</option>
136-
<option value="shapeSpiral">Shape Spiral</option>
137-
<option value="slow">Slow on Hover</option>
138-
<option value="snow">Snow</option>
139-
<option value="speedDecay">Speed Decay</option>
140-
<option value="spin">Spin</option>
141-
<option value="star">Star</option>
142-
<option value="strokeAnimation">Stroke Animation</option>
143-
<option value="style">Style</option>
144-
<option value="svgReplace">Svg Replace</option>
145-
<option value="test">Test</option>
146-
<option value="textMask">Text Mask</option>
147-
<option value="textMaskMultiline">Text Mask Multiline</option>
148-
<option value="trail">Trails</option>
149-
<option value="twinkle">Twinkle</option>
150-
<option value="vibrate">Vibrate</option>
151-
<option value="virus">Virus</option>
152-
<option value="warp">Warp</option>
153-
<option value="wobble">Wobble</option>
154-
<option value="zIndex">Z Index</option>
155-
</select>
39+
<select id="preset"></select>
15640
</div>
15741

15842
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
@@ -164,55 +48,55 @@
16448
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
16549
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
16650
crossorigin="anonymous"></script>
167-
<script src="https://cdn.jsdelivr.net/npm/pathseg@1.2.0/pathseg.min.js"></script>
168-
169-
<script src="js/tsparticles.bundle.min.js"></script>
170-
<script src="js/tsparticles.configs.min.js"></script>
171-
<script src="js/tsparticles.interaction.light.min.js"></script>
172-
<script src="js/tsparticles.interaction.particles.repulse.min.js"></script>
173-
<script src="js/tsparticles.path.curves.min.js"></script>
174-
<script src="js/tsparticles.path.polygon.min.js"></script>
175-
<script src="js/tsparticles.path.perlin.noise.min.js"></script>
176-
<script src="js/tsparticles.path.simplex.noise.min.js"></script>
177-
<script src="js/tsparticles.plugin.infection.min.js"></script>
178-
<script src="js/tsparticles.updater.gradient.min.js"></script>
179-
<script src="js/tsparticles.updater.orbit.min.js"></script>
51+
52+
<script src="js/tsparticles/tsparticles.all.bundle.js"></script>
53+
<script src="js/configs/tsparticles.configs.js"></script>
18054

18155
<script type="text/javascript">
182-
document.addEventListener("DOMContentLoaded", () => {
183-
(async () => {
184-
await loadInfectionPlugin(tsParticles);
185-
await loadLightInteraction(tsParticles);
186-
await loadParticlesRepulseInteraction(tsParticles);
187-
await loadGradientUpdater(tsParticles);
188-
await loadOrbitUpdater(tsParticles);
189-
await loadCurvesPath(tsParticles);
190-
await loadPolygonPath(tsParticles);
191-
await loadPerlinNoisePath(tsParticles);
192-
await loadSimplexNoisePath(tsParticles);
193-
})();
194-
195-
const loadPreset = async (preset) => {
196-
await tsParticles.load({
197-
id: "tsparticles",
198-
options: tsParticles.configs[preset]
199-
});
200-
};
201-
202-
let preset = sessionStorage.preset || "basic";
203-
204-
loadPreset(preset);
205-
206-
const cmbPreset = document.getElementById("preset");
207-
208-
cmbPreset.value = preset;
209-
210-
cmbPreset.addEventListener("change", () => {
211-
sessionStorage.preset = cmbPreset.value;
212-
213-
loadPreset(cmbPreset.value);
214-
});
56+
document.addEventListener("DOMContentLoaded", () => {
57+
(async (engine) => {
58+
await loadAll(engine);
59+
})(tsParticles);
60+
61+
const loadPreset = async (preset) => {
62+
await tsParticles.load({
63+
options: tsParticles.pluginManager.configs[preset]
64+
});
65+
};
66+
67+
const cmbPreset = document.getElementById("preset"),
68+
configEntries = Object.entries(tsParticles.pluginManager.configs ?? {}).filter(([, config]) => !!config);
69+
70+
for (const [key, config] of configEntries) {
71+
const option = document.createElement("option");
72+
73+
option.value = key;
74+
option.text = config.name ?? key;
75+
76+
cmbPreset.append(option);
77+
}
78+
79+
if (!configEntries.length) {
80+
cmbPreset.disabled = true;
81+
82+
return;
83+
}
84+
85+
const hasStoredPreset = !!sessionStorage.preset && configEntries.some(([key]) => key === sessionStorage.preset),
86+
hasBasicPreset = configEntries.some(([key]) => key === "basic"),
87+
preset = hasStoredPreset ? sessionStorage.preset : hasBasicPreset ? "basic" : configEntries[0][0];
88+
89+
sessionStorage.preset = preset;
90+
cmbPreset.value = preset;
91+
92+
loadPreset(preset);
93+
94+
cmbPreset.addEventListener("change", () => {
95+
sessionStorage.preset = cmbPreset.value;
96+
97+
loadPreset(cmbPreset.value);
21598
});
99+
});
216100
</script>
217101
</body>
218102
</html>

‎demo/vanilla_new/js/.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
configs/
2+
tsparticles/
3+

‎demo/vanilla_new/package.json‎

Lines changed: 4 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,8 @@
66
"main": "index.html",
77
"scripts": {
88
"clear:cache": "rimraf ./node_modules/.cache",
9-
"build:js": "minify ./js/404.js > ./js/404.min.js && pnpm run copy:engine && pnpm run copy:light && pnpm run copy:p-repulse && pnpm run copy:curves && pnpm run copy:polygon && pnpm run copy:perlin && pnpm run copy:simplex && pnpm run copy:infection && pnpm run copy:gradient && pnpm run copy:orbit && pnpm run copy:configs",
10-
"copy:configs": "copyfiles -u 2 ./node_modules/@tsparticles/configs/*.json ./configs && rimraf ./configs/package.json && copyfiles -u 2 ./node_modules/@tsparticles/configs/tsparticles.configs.min.js ./js",
11-
"copy:engine": "copyfiles -u 2 ./node_modules/tsparticles/tsparticles.bundle.min.js ./js",
12-
"copy:light": "copyfiles -u 2 ./node_modules/@tsparticles/interaction-light/tsparticles.interaction.light.min.js ./js",
13-
"copy:p-repulse": "copyfiles -u 2 ./node_modules/@tsparticles/interaction-particles-repulse/tsparticles.interaction.particles.repulse.min.js ./js",
14-
"copy:curves": "copyfiles -u 2 ./node_modules/@tsparticles/path-curves/tsparticles.path.curves.min.js ./js",
15-
"copy:polygon": "copyfiles -u 2 ./node_modules/@tsparticles/path-polygon/tsparticles.path.polygon.min.js ./js",
16-
"copy:perlin": "copyfiles -u 2 ./node_modules/@tsparticles/path-perlin-noise/tsparticles.path.perlin.noise.min.js ./js",
17-
"copy:simplex": "copyfiles -u 2 ./node_modules/@tsparticles/path-simplex-noise/tsparticles.path.simplex.noise.min.js ./js",
18-
"copy:infection": "copyfiles -u 2 ./node_modules/@tsparticles/plugin-infection/tsparticles.plugin.infection.min.js ./js",
19-
"copy:gradient": "copyfiles -u 2 ./node_modules/@tsparticles/updater-gradient/tsparticles.updater.gradient.min.js ./js",
20-
"copy:orbit": "copyfiles -u 2 ./node_modules/@tsparticles/updater-orbit/tsparticles.updater.orbit.min.js ./js",
9+
"build:js": "minify ./js/404.js > ./js/404.min.js && pnpm run copy:browser-assets",
10+
"copy:browser-assets": "node ./scripts/copy-browser-assets.mjs",
2111
"build:css": "sass ./css/main.scss ./css/main.css && minify ./css/main.css > ./css/main.min.css && sass ./css/404.scss ./css/404.css && minify ./css/404.css > ./css/404.min.css",
2212
"build": " pnpm run clear:cache && pnpm run build:css && pnpm run build:js",
2313
"build:ci": " pnpm run clear:cache && pnpm run build:css && pnpm run build:js",
@@ -35,23 +25,12 @@
3525
"homepage": "https://particles.js.org",
3626
"devDependencies": {
3727
"@swc/core": "^1.15.21",
38-
"fs-extra": "^11.3.4",
3928
"minify": "^15.2.0",
4029
"sass": "^1.98.0"
4130
},
4231
"dependencies": {
43-
"@tsparticles/configs": "workspace:*",
44-
"@tsparticles/engine": "workspace:*",
45-
"@tsparticles/interaction-light": "workspace:*",
46-
"@tsparticles/interaction-particles-repulse": "workspace:*",
47-
"@tsparticles/path-curves": "workspace:*",
48-
"@tsparticles/path-perlin-noise": "workspace:*",
49-
"@tsparticles/path-polygon": "workspace:*",
50-
"@tsparticles/path-simplex-noise": "workspace:*",
51-
"@tsparticles/plugin-infection": "workspace:*",
52-
"@tsparticles/updater-gradient": "workspace:*",
53-
"@tsparticles/updater-orbit": "workspace:*",
54-
"tsparticles": "workspace:*"
32+
"@tsparticles/all": "workspace:*",
33+
"@tsparticles/configs": "workspace:*"
5534
},
5635
"type": "module"
5736
}

0 commit comments

Comments
 (0)