svelte-confetti-explosion 0.1.1 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- package/ConfettiExplosion.svelte +39 -11
- package/ConfettiExplosion.svelte.d.ts +22 -0
- package/LICENSE +21 -0
- package/README.md +18 -0
- package/package.json +1 -1
package/ConfettiExplosion.svelte
CHANGED
@@ -57,7 +57,7 @@ const isUndefined = (value) => typeof value === 'undefined';
|
|
57
57
|
const error = (message) => {
|
58
58
|
console.error(message);
|
59
59
|
};
|
60
|
-
function validate(particleCount, duration, colors, particleSize, force,
|
60
|
+
function validate(particleCount, duration, colors, particleSize, force, stageHeight, stageWidth, particlesShape) {
|
61
61
|
const isSafeInteger = Number.isSafeInteger;
|
62
62
|
if (!isUndefined(particleCount) && isSafeInteger(particleCount) && particleCount < 0) {
|
63
63
|
error('particleCount must be a positive integer');
|
@@ -67,6 +67,11 @@ function validate(particleCount, duration, colors, particleSize, force, floorHei
|
|
67
67
|
error('duration must be a positive integer');
|
68
68
|
return false;
|
69
69
|
}
|
70
|
+
if (!isUndefined(particlesShape) &&
|
71
|
+
!['mix', 'circles', 'rectangles'].includes(particlesShape)) {
|
72
|
+
error('particlesShape should be either "mix" or "circles" or "rectangle"');
|
73
|
+
return false;
|
74
|
+
}
|
70
75
|
if (!isUndefined(colors) && !Array.isArray(colors)) {
|
71
76
|
error('colors must be an array of strings');
|
72
77
|
return false;
|
@@ -79,17 +84,17 @@ function validate(particleCount, duration, colors, particleSize, force, floorHei
|
|
79
84
|
error('force must be a positive integer and should be within 0 and 1');
|
80
85
|
return false;
|
81
86
|
}
|
82
|
-
if (!isUndefined(
|
83
|
-
typeof
|
84
|
-
isSafeInteger(
|
85
|
-
|
87
|
+
if (!isUndefined(stageHeight) &&
|
88
|
+
typeof stageHeight === 'number' &&
|
89
|
+
isSafeInteger(stageHeight) &&
|
90
|
+
stageHeight < 0) {
|
86
91
|
error('floorHeight must be a positive integer');
|
87
92
|
return false;
|
88
93
|
}
|
89
|
-
if (!isUndefined(
|
90
|
-
typeof
|
91
|
-
isSafeInteger(
|
92
|
-
|
94
|
+
if (!isUndefined(stageWidth) &&
|
95
|
+
typeof stageWidth === 'number' &&
|
96
|
+
isSafeInteger(stageWidth) &&
|
97
|
+
stageWidth < 0) {
|
93
98
|
error('floorWidth must be a positive integer');
|
94
99
|
return false;
|
95
100
|
}
|
@@ -134,6 +139,28 @@ export let particleSize = SIZE;
|
|
134
139
|
* ```
|
135
140
|
*/
|
136
141
|
export let duration = DURATION;
|
142
|
+
/**
|
143
|
+
* Shape of particles to use. Can be `mix`, `circles` or `rectangles`
|
144
|
+
*
|
145
|
+
* `mix` will use both circles and rectangles
|
146
|
+
* `circles` will use only circles
|
147
|
+
* `rectangles` will use only rectangles
|
148
|
+
*
|
149
|
+
* @default 'mix'
|
150
|
+
*
|
151
|
+
* @example
|
152
|
+
*
|
153
|
+
* ```svelte
|
154
|
+
* <ConfettiExplosion particlesShape='circles' />
|
155
|
+
* ```
|
156
|
+
*
|
157
|
+
* @example
|
158
|
+
*
|
159
|
+
* ```svelte
|
160
|
+
* <ConfettiExplosion particlesShape='rectangles' />
|
161
|
+
* ```
|
162
|
+
*/
|
163
|
+
export let particlesShape = 'mix';
|
137
164
|
/**
|
138
165
|
* Colors to use for the confetti particles. Pass string array of colors. Can use hex colors, named colors,
|
139
166
|
* CSS Variables, literally anything valid in plain CSS.
|
@@ -201,7 +228,7 @@ $: particles = createParticles(particleCount, colors);
|
|
201
228
|
$: particleCount > 300 &&
|
202
229
|
console.log("[SVELTE-CONFETTI-EXPLOSION] That's a lot of confetti, you sure about that? A lesser number" +
|
203
230
|
' like 200 will still give off the party vibes while still not bricking the device 😉');
|
204
|
-
$: isValid = validate(particleCount, duration, colors, particleSize, force, stageHeight, stageWidth);
|
231
|
+
$: isValid = validate(particleCount, duration, colors, particleSize, force, stageHeight, stageWidth, particlesShape);
|
205
232
|
onMount(async () => {
|
206
233
|
await waitFor(duration);
|
207
234
|
if (shouldDestroyAfterDone) {
|
@@ -216,7 +243,8 @@ function confettiStyles(node, { degree }) {
|
|
216
243
|
const rotationIndex = Math.round(Math.random() * (rotationTransforms.length - 1));
|
217
244
|
const durationChaos = duration - Math.round(Math.random() * 1000);
|
218
245
|
const shouldBeCrazy = Math.random() < CRAZY_PARTICLES_FREQUENCY;
|
219
|
-
const isCircle =
|
246
|
+
const isCircle = particlesShape !== 'rectangles' &&
|
247
|
+
(particlesShape === 'circles' || shouldBeCircle(rotationIndex));
|
220
248
|
// x-axis disturbance, roughly the distance the particle will initially deviate from its target
|
221
249
|
const x1 = shouldBeCrazy ? round(Math.random() * CRAZY_PARTICLE_CRAZINESS, 2) : 0;
|
222
250
|
const x2 = x1 * -1;
|
@@ -1,4 +1,5 @@
|
|
1
1
|
import { SvelteComponentTyped } from "svelte";
|
2
|
+
declare type ParticleShape = 'mix' | 'circles' | 'rectangles';
|
2
3
|
declare const __propDef: {
|
3
4
|
props: {
|
4
5
|
/**
|
@@ -34,6 +35,27 @@ declare const __propDef: {
|
|
34
35
|
* <ConfettiExplosion duration={5000} />
|
35
36
|
* ```
|
36
37
|
*/ duration?: number;
|
38
|
+
/**
|
39
|
+
* Shape of particles to use. Can be `mix`, `circles` or `rectangles`
|
40
|
+
*
|
41
|
+
* `mix` will use both circles and rectangles
|
42
|
+
* `circles` will use only circles
|
43
|
+
* `rectangles` will use only rectangles
|
44
|
+
*
|
45
|
+
* @default 'mix'
|
46
|
+
*
|
47
|
+
* @example
|
48
|
+
*
|
49
|
+
* ```svelte
|
50
|
+
* <ConfettiExplosion particlesShape='circles' />
|
51
|
+
* ```
|
52
|
+
*
|
53
|
+
* @example
|
54
|
+
*
|
55
|
+
* ```svelte
|
56
|
+
* <ConfettiExplosion particlesShape='rectangles' />
|
57
|
+
* ```
|
58
|
+
*/ particlesShape?: ParticleShape;
|
37
59
|
/**
|
38
60
|
* Colors to use for the confetti particles. Pass string array of colors. Can use hex colors, named colors,
|
39
61
|
* CSS Variables, literally anything valid in plain CSS.
|
package/LICENSE
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
MIT License
|
2
|
+
|
3
|
+
Copyright (c) 2021 Puru Vijay
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
13
|
+
copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
@@ -105,6 +105,24 @@ Colors to use for the confetti particles. Pass string array of colors. Can use h
|
|
105
105
|
<ConfettiExplosion colors={['var(--yellow)', 'var(--red)', '#2E3191', '#41BBC7']} />
|
106
106
|
```
|
107
107
|
|
108
|
+
### particlesShape
|
109
|
+
|
110
|
+
Shape of particles to use. Can be `mix`, `circles` or `rectangles`
|
111
|
+
|
112
|
+
`mix` will use both circles and rectangles
|
113
|
+
`circles` will use only circles
|
114
|
+
`rectangles` will use only rectangles
|
115
|
+
|
116
|
+
**type:** `'mix' | 'circles' | 'rectangles'`
|
117
|
+
|
118
|
+
**Default value:** `'mix'`
|
119
|
+
|
120
|
+
**Example:**
|
121
|
+
|
122
|
+
```svelte
|
123
|
+
<ConfettiExplosion particlesShape="circles" />
|
124
|
+
```
|
125
|
+
|
108
126
|
### force
|
109
127
|
|
110
128
|
Force of the confetti particles. Between 0 and 1. 0 is no force, 1 is maximum force. Will error out if you pass a value outside of this range.
|