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.
150 lines (149 loc) • 5.68 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Options = void 0;
const Interactivity_1 = require("./Interactivity/Interactivity");
const ParticlesOptions_1 = require("./Particles/ParticlesOptions");
const BackgroundMask_1 = require("./BackgroundMask/BackgroundMask");
const Background_1 = require("./Background/Background");
const Utils_1 = require("../../Utils");
const Theme_1 = require("./Theme/Theme");
const Enums_1 = require("../../Enums");
const FullScreen_1 = require("./FullScreen/FullScreen");
const Motion_1 = require("./Motion/Motion");
const ManualParticle_1 = require("./ManualParticle");
const Responsive_1 = require("./Responsive");
class Options {
constructor() {
this.autoPlay = true;
this.background = new Background_1.Background();
this.backgroundMask = new BackgroundMask_1.BackgroundMask();
this.fullScreen = new FullScreen_1.FullScreen();
this.detectRetina = true;
this.duration = 0;
this.fpsLimit = 60;
this.interactivity = new Interactivity_1.Interactivity();
this.manualParticles = [];
this.motion = new Motion_1.Motion();
this.particles = new ParticlesOptions_1.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_1.ManualParticle();
tmp.load(t);
return tmp;
});
}
this.motion.load(data.motion);
this.particles.load(data.particles);
Utils_1.Plugins.loadOptions(this, data);
if (data.responsive !== undefined) {
for (const responsive of data.responsive) {
const optResponsive = new Responsive_1.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_1.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 === Enums_1.ThemeMode.dark && clientDarkMode) ||
(theme.default.mode === Enums_1.ThemeMode.light && !clientDarkMode)));
if (!defaultTheme) {
defaultTheme = this.themes.find((theme) => theme.default.value && theme.default.mode === Enums_1.ThemeMode.any);
}
if (defaultTheme) {
this.load(defaultTheme.options);
}
}
}
importPreset(preset) {
this.load(Utils_1.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);
}
}
exports.Options = Options;