Skip to content

Commit

Permalink
feat: upgraded components
Browse files Browse the repository at this point in the history
refactor: renamed backgroundMode to fullScreen
  • Loading branch information
matteobruni committed Feb 26, 2021
1 parent b6c06ee commit 47060c2
Show file tree
Hide file tree
Showing 92 changed files with 517 additions and 496 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/deploy.site.yml
Expand Up @@ -5,7 +5,7 @@ name: Deploy Site

on:
push:
branches: [ master ]
branches: [ main ]

jobs:
build:
Expand Down
4 changes: 2 additions & 2 deletions .github/workflows/nodejs.yml
Expand Up @@ -5,9 +5,9 @@ name: Node.js CI

on:
push:
branches: [ master, staging, dev ]
branches: [ main, staging, dev ]
pull_request:
branches: [ master, staging, dev ]
branches: [ main, staging, dev ]

jobs:
build:
Expand Down
6 changes: 3 additions & 3 deletions CONTRIBUTING.md
Expand Up @@ -34,7 +34,7 @@ A demo folder will be probably created in near future with all the demo apps nee

If you want to contribute to the project please use *dev* as base branch.

Use *master* branch **ONLY** for critical bug fixes.
Use *main* branch **ONLY** for critical bug fixes.

Once done create the **Pull Request** to *dev* branch, if it's a critical bug fix use *staging*.

Expand All @@ -47,9 +47,9 @@ This branch should always build, sometimes can be necessary break this rule, thi
### *staging*
This branch is for testing the product before a new release.

This branch is the one used to make PR to *master* so this branch **MUST** build.
This branch is the one used to make PR to *main* so this branch **MUST** build.

### *master*
### *main*
This branch is the production one.

**This must be used for PR only for critical bug fixes** and always **MUST** build.
Expand Down
18 changes: 9 additions & 9 deletions README.md
Expand Up @@ -12,7 +12,7 @@ _[Particles.js](https://github.com/VincentGarreau/particles.js) converted in Typ

**This library is available on the two most popular CDNs and it's easy and ready to use, if you were using particles.js it's even easier**.

You'll find the instructions [below](https://github.com/matteobruni/tsparticles/blob/master/README.md#library-installation), with all the links you need, and _don't be scared by **TypeScript**, it's just the source language_.
You'll find the instructions [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation), with all the links you need, and _don't be scared by **TypeScript**, it's just the source language_.

**The output files are just JavaScript**. 🤩

Expand Down Expand Up @@ -175,63 +175,63 @@ particles.pause();

[![npm](https://img.shields.io/npm/v/ng-particles)](https://www.npmjs.com/package/ng-particles) [![npm](https://img.shields.io/npm/dm/ng-particles)](https://www.npmjs.com/package/ng-particles)

You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/master/components/angular/README.md)
You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/angular/README.md)

### Inferno

#### `inferno-particles`

[![npm](https://img.shields.io/npm/v/inferno-particles)](https://www.npmjs.com/package/inferno-particles) [![npm](https://img.shields.io/npm/dm/inferno-particles)](https://www.npmjs.com/package/inferno-particles)

You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/master/components/inferno/README.md)
You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/inferno/README.md)

### jQuery

#### `jquery-particles`

[![npm](https://img.shields.io/npm/v/jquery-particles)](https://www.npmjs.com/package/jquery-particles) [![npm](https://img.shields.io/npm/dm/jquery-particles)](https://www.npmjs.com/package/jquery-particles)

You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/master/components/jquery/README.md)
You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/jquery/README.md)

### Preact

#### `preact-particles`

[![npm](https://img.shields.io/npm/v/preact-particles)](https://www.npmjs.com/package/preact-particles) [![npm](https://img.shields.io/npm/dm/preact-particles)](https://www.npmjs.com/package/preact-particles)

You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/master/components/preact/README.md)
You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/preact/README.md)

### ReactJS

#### `react-tsparticles`

[![npm](https://img.shields.io/npm/v/react-tsparticles)](https://www.npmjs.com/package/react-tsparticles) [![npm](https://img.shields.io/npm/dm/react-tsparticles)](https://www.npmjs.com/package/react-tsparticles)

You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/master/components/react/README.md)
You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/react/README.md)

### Svelte

#### `svelte-particles`

[![npm](https://img.shields.io/npm/v/svelte-particles)](https://www.npmjs.com/package/svelte-particles) [![npm downloads](https://img.shields.io/npm/dm/svelte-particles)](https://www.npmjs.com/package/svelte-particles)

You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/master/components/svelte/README.md)
You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/svelte/README.md)

### VueJS 2.x

#### `particles.vue`

[![npm](https://img.shields.io/npm/v/particles.vue)](https://www.npmjs.com/package/particles.vue) [![npm](https://img.shields.io/npm/dm/particles.vue)](https://www.npmjs.com/package/particles.vue)

You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/master/components/vue/README.md)
You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue/README.md)

### VueJS 3.x

#### `particles.vue3`

[![npm](https://img.shields.io/npm/v/particles.vue3)](https://www.npmjs.com/package/particles.vue3) [![npm](https://img.shields.io/npm/dm/particles.vue3)](https://www.npmjs.com/package/particles.vue3)

You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/master/components/vue3/README.md)
You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue3/README.md)

---

Expand Down
@@ -1,22 +1,50 @@
import { AfterViewInit, Component, EventEmitter, Input, Output } from '@angular/core';
import { tsParticles } from 'tsparticles';
import type { Container } from 'tsparticles';
import type { Container, Main } from 'tsparticles';
import { IParticlesProps } from './ng-particles.module';

@Component({
selector: 'Particles',
selector: 'ng-particles',
template: `
<div [id]="id"></div> `,
styles: []
<div [id]="id"></div> `,
styles: [],
})
export class NgParticlesComponent implements AfterViewInit {
@Input() options: IParticlesProps;
@Input() options?: IParticlesProps;
@Input() url?: string;
@Input() id: string;
@Output() particlesLoaded: EventEmitter<Container> = new EventEmitter<Container>();
@Output() particlesInit: EventEmitter<Main> = new EventEmitter<Main>();

public ngAfterViewInit(): void {
tsParticles.load(this.id, this.options).then(container => {
tsParticles.init();

this.particlesInit.emit(tsParticles);

const cb = (container?: Container) => {
this.particlesLoaded.emit(container);
});
};

if (this.url) {
tsParticles.loadJSON(this.id, this.url).then(cb);
} else if (this.options) {
tsParticles.load(this.id, this.options).then(cb);
} else {
console.error('You must specify options or url to load tsParticles');
}
}
}

@Component({
selector: 'Particles',
template: `
<div [id]="id"></div> `,
styles: []
})
export class ParticlesComponent extends NgParticlesComponent {
@Input() options?: IParticlesProps;
@Input() url?: string;
@Input() id: string;
@Output() particlesLoaded: EventEmitter<Container> = new EventEmitter<Container>();
@Output() particlesInit: EventEmitter<Main> = new EventEmitter<Main>();
}
@@ -1,11 +1,11 @@
import { NgModule } from '@angular/core';
import { NgParticlesComponent } from './ng-particles.component';
import { NgParticlesComponent, ParticlesComponent } from './ng-particles.component';
import type { ISourceOptions } from 'tsparticles';

@NgModule({
declarations: [ NgParticlesComponent ],
declarations: [NgParticlesComponent, ParticlesComponent],
imports: [],
exports: [ NgParticlesComponent ]
exports: [NgParticlesComponent, ParticlesComponent]
})
export class NgParticlesModule {
}
Expand Down
2 changes: 1 addition & 1 deletion components/inferno/package.json
Expand Up @@ -56,7 +56,7 @@
"license": "MIT",
"homepage": "https://particles.js.org/",
"dependencies": {
"lodash": "^4.17.20",
"fast-deep-equal": "^3.1.3",
"tsparticles": "^1.18.12"
},
"peerDependencies": {
Expand Down
5 changes: 4 additions & 1 deletion components/inferno/src/IParticlesProps.ts
@@ -1,14 +1,17 @@
import type { RefObject } from "inferno";
import type { Container, ISourceOptions } from "tsparticles";
import type { Container, ISourceOptions, Main } from "tsparticles";

export interface IParticlesProps {
id?: string;
width?: string;
height?: string;
options?: ISourceOptions;
url?: string;
params?: ISourceOptions;
style?: CSSProperties;
className?: string;
canvasClassName?: string;
container?: RefObject<Container>;
init?: (tsParticles: Main) => void;
loaded?: (container: Container) => void;
}
1 change: 0 additions & 1 deletion components/inferno/src/IParticlesState.ts
@@ -1,6 +1,5 @@
import type { Container } from "tsparticles";

export interface IParticlesState {
canvas?: HTMLCanvasElement;
library?: Container;
}

0 comments on commit 47060c2

Please sign in to comment.