@wolsok/thanos 3.0.0 → 3.0.1
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.
- package/README.md +107 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
# @wolsok/thanos
|
|
2
|
+
|
|
3
|
+
An angular directive that vaporizes your DOM Elements like Thanos. This library is generated with [Nx](https://nx.dev).
|
|
4
|
+
|
|
5
|
+
#### Live Demo:
|
|
6
|
+
Click the technology cards on https://angularexamples.wolsok.de
|
|
7
|
+
|
|
8
|
+
## Usage
|
|
9
|
+
|
|
10
|
+
#### Dependencies:
|
|
11
|
+
|
|
12
|
+
To install run
|
|
13
|
+
|
|
14
|
+
```
|
|
15
|
+
npm install @wolsok/thanos --save
|
|
16
|
+
```
|
|
17
|
+
#### Prepare your angular app:
|
|
18
|
+
|
|
19
|
+
Add `WsThanosDirective` to your module/standalone component.
|
|
20
|
+
|
|
21
|
+
```typescript
|
|
22
|
+
@NgModule_or_@Component({
|
|
23
|
+
...,
|
|
24
|
+
imports: [
|
|
25
|
+
...
|
|
26
|
+
WsThanosDirective
|
|
27
|
+
],
|
|
28
|
+
providers: [
|
|
29
|
+
// override the default options
|
|
30
|
+
provideWsThanosOptions({
|
|
31
|
+
animationLength: 2000,
|
|
32
|
+
particleAcceleration: 50,
|
|
33
|
+
maxParticleCount: 10000
|
|
34
|
+
}),
|
|
35
|
+
]
|
|
36
|
+
})
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
You can also add WsThanosDirective to your shared module exports.
|
|
40
|
+
|
|
41
|
+
```typescript
|
|
42
|
+
@NgModule({
|
|
43
|
+
imports: [WsThanosDirective],
|
|
44
|
+
exports: [
|
|
45
|
+
WsThanosDirective
|
|
46
|
+
]
|
|
47
|
+
})
|
|
48
|
+
export class SharedModule {
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
#### `WsThanosOptions` to configure ws-thanos:
|
|
53
|
+
| field | type | default | description |
|
|
54
|
+
| -------------------- | :----: | ------: | ---------------------------------: |
|
|
55
|
+
| animationLength | number | 5000 | the animation length in ms |
|
|
56
|
+
| maxParticleCount | number | 400000 | max amount of particles |
|
|
57
|
+
| particleAcceleration | number | 30 | speed of the particle acceleration |
|
|
58
|
+
|
|
59
|
+
### `WsThanosDirective` usage
|
|
60
|
+
|
|
61
|
+
Use the directive `wsThanos` on your element and reference it using `@ViewChild(WsThanosDirective)` in your component or
|
|
62
|
+
directly in html via template ref:
|
|
63
|
+
|
|
64
|
+
```
|
|
65
|
+
<div wsThanos
|
|
66
|
+
#thanos="thanos"
|
|
67
|
+
(wsThanosComplete)=onComplete()>
|
|
68
|
+
This div will be vaporized on click
|
|
69
|
+
</div>
|
|
70
|
+
<button (click)="thanos.vaporize(removeElement)">
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
### `WsThanosService` usage
|
|
74
|
+
|
|
75
|
+
Inject the 'WsThanosService' into your class. Call 'vaporize()' and subscribe to it.
|
|
76
|
+
|
|
77
|
+
## Collaboration
|
|
78
|
+
|
|
79
|
+
Send issues or PRs to https://github.com/wolsok/wol-sok-mono
|
|
80
|
+
|
|
81
|
+
Run `nx test ws-thanos` to execute unit tests.
|
|
82
|
+
|
|
83
|
+
## Migration
|
|
84
|
+
From `1.0.1` to `2.0.0`
|
|
85
|
+
* Replace `WsThanosModule` in imports and exports with `WsThanosDirective`
|
|
86
|
+
* Replace `WsThanosModule.forRoot(options)`:
|
|
87
|
+
Before:
|
|
88
|
+
```typescript
|
|
89
|
+
@NgModule({
|
|
90
|
+
imports: [WsThanosModule.forRoot(options)]
|
|
91
|
+
})
|
|
92
|
+
```
|
|
93
|
+
After:
|
|
94
|
+
```typescript
|
|
95
|
+
@NgModule({
|
|
96
|
+
imports: [WsThanosDirective],
|
|
97
|
+
providers: [
|
|
98
|
+
provideWsThanosOptions(options)
|
|
99
|
+
]
|
|
100
|
+
})
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
From: `sc-thanos` to `@wolsok/thanos`
|
|
104
|
+
* Remove old version `npm uninstall sc-thanos`
|
|
105
|
+
* Install `npm install @wolsok/thanos --save`
|
|
106
|
+
* The earlier name of this component was `scThanos`. Just switch to `wsThanos`
|
|
107
|
+
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wolsok/thanos",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.1",
|
|
4
4
|
"description": "wolsok's implementation of a cool thanos vaporizing effect for destroying dom elements",
|
|
5
5
|
"bugs": {
|
|
6
6
|
"url": "https://github.com/WolfSoko/wol-sok-mono/issues"
|
|
7
7
|
},
|
|
8
8
|
"homepage": "https://angularexamples.wolsok.de",
|
|
9
|
-
"repository": "https://github.com/WolfSoko/wol-sok-mono/libs/public/ws-thanos",
|
|
9
|
+
"repository": "https://github.com/WolfSoko/wol-sok-mono/tree/main/libs/public/ws-thanos",
|
|
10
10
|
"license": "MIT",
|
|
11
11
|
"keywords": [
|
|
12
12
|
"wolsok",
|