tsparticles
Version:
Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.
146 lines (145 loc) • 5.37 kB
JavaScript
import { Interactivity } from "./Interactivity/Interactivity";
import { ParticlesOptions } from "./Particles/ParticlesOptions";
import { BackgroundMask } from "./BackgroundMask/BackgroundMask";
import { Background } from "./Background/Background";
import { Plugins } from "../../Utils";
import { Theme } from "./Theme/Theme";
import { ThemeMode } from "../../Enums";
import { FullScreen } from "./FullScreen/FullScreen";
import { Motion } from "./Motion/Motion";
import { ManualParticle } from "./ManualParticle";
import { Responsive } from "./Responsive";
export class Options {
constructor() {
this.autoPlay = true;
this.background = new Background();
this.backgroundMask = new BackgroundMask();
this.fullScreen = new FullScreen();
this.detectRetina = true;
this.duration = 0;
this.fpsLimit = 60;
this.interactivity = new Interactivity();
this.manualParticles = [];
this.motion = new Motion();
this.particles = new ParticlesOptions();
this.pauseOnBlur = true;
this.pauseOnOutsideViewport = true;
this.responsive = [];
this.themes = [];
this.zLayers = 100;
}
get fps_limit() {
return this.fpsLimit;
}
set fps_limit(value) {
this.fpsLimit = value;
}
get retina_detect() {
return this.detectRetina;
}
set retina_detect(value) {
this.detectRetina = value;
}
get backgroundMode() {
return this.fullScreen;
}
set backgroundMode(value) {
this.fullScreen.load(value);
}
load(data) {
var _a, _b, _c;
if (data === undefined) {
return;
}
if (data.preset !== undefined) {
if (data.preset instanceof Array) {
for (const preset of data.preset) {
this.importPreset(preset);
}
}
else {
this.importPreset(data.preset);
}
}
if (data.autoPlay !== undefined) {
this.autoPlay = data.autoPlay;
}
const detectRetina = (_a = data.detectRetina) !== null && _a !== void 0 ? _a : data.retina_detect;
if (detectRetina !== undefined) {
this.detectRetina = detectRetina;
}
if (data.duration !== undefined) {
this.duration = data.duration;
}
const fpsLimit = (_b = data.fpsLimit) !== null && _b !== void 0 ? _b : data.fps_limit;
if (fpsLimit !== undefined) {
this.fpsLimit = fpsLimit;
}
if (data.pauseOnBlur !== undefined) {
this.pauseOnBlur = data.pauseOnBlur;
}
if (data.pauseOnOutsideViewport !== undefined) {
this.pauseOnOutsideViewport = data.pauseOnOutsideViewport;
}
if (data.zLayers !== undefined) {
this.zLayers = data.zLayers;
}
this.background.load(data.background);
this.fullScreen.load((_c = data.fullScreen) !== null && _c !== void 0 ? _c : data.backgroundMode);
this.backgroundMask.load(data.backgroundMask);
this.interactivity.load(data.interactivity);
if (data.manualParticles !== undefined) {
this.manualParticles = data.manualParticles.map((t) => {
const tmp = new ManualParticle();
tmp.load(t);
return tmp;
});
}
this.motion.load(data.motion);
this.particles.load(data.particles);
Plugins.loadOptions(this, data);
if (data.responsive !== undefined) {
for (const responsive of data.responsive) {
const optResponsive = new Responsive();
optResponsive.load(responsive);
this.responsive.push(optResponsive);
}
}
this.responsive.sort((a, b) => a.maxWidth - b.maxWidth);
if (data.themes !== undefined) {
for (const theme of data.themes) {
const optTheme = new Theme();
optTheme.load(theme);
this.themes.push(optTheme);
}
}
}
setTheme(name) {
if (name) {
const chosenTheme = this.themes.find((theme) => theme.name === name);
if (chosenTheme) {
this.load(chosenTheme.options);
}
}
else {
const clientDarkMode = typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)").matches;
let defaultTheme = this.themes.find((theme) => theme.default.value &&
((theme.default.mode === ThemeMode.dark && clientDarkMode) ||
(theme.default.mode === ThemeMode.light && !clientDarkMode)));
if (!defaultTheme) {
defaultTheme = this.themes.find((theme) => theme.default.value && theme.default.mode === ThemeMode.any);
}
if (defaultTheme) {
this.load(defaultTheme.options);
}
}
}
importPreset(preset) {
this.load(Plugins.getPreset(preset));
}
setResponsive(width, pxRatio, defaultOptions) {
var _a;
this.load(defaultOptions);
this.load((_a = this.responsive.find((t) => t.maxWidth * pxRatio > width)) === null || _a === void 0 ? void 0 : _a.options);
}
}