@tsparticles/plugin-motion 3.0.0-alpha.1 → 3.0.0-beta.0

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.
Files changed (16) hide show
  1. package/README.md +15 -11
  2. package/browser/MotionInstance.js +33 -35
  3. package/browser/index.js +4 -5
  4. package/cjs/MotionInstance.js +36 -49
  5. package/cjs/index.js +4 -16
  6. package/esm/MotionInstance.js +33 -35
  7. package/esm/index.js +4 -5
  8. package/package.json +6 -5
  9. package/report.html +4 -4
  10. package/tsparticles.plugin.motion.js +31 -32
  11. package/tsparticles.plugin.motion.min.js +1 -1
  12. package/tsparticles.plugin.motion.min.js.LICENSE.txt +1 -8
  13. package/types/MotionInstance.d.ts +2 -2
  14. package/types/index.d.ts +1 -1
  15. package/umd/MotionInstance.js +33 -35
  16. package/umd/index.js +4 -5
package/README.md CHANGED
@@ -2,9 +2,9 @@
2
2
 
3
3
  # tsParticles Motion Plugin
4
4
 
5
- [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-plugin-motion/badge)](https://www.jsdelivr.com/package/npm/tsparticles-plugin-motion)
6
- [![npmjs](https://badge.fury.io/js/tsparticles-plugin-motion.svg)](https://www.npmjs.com/package/tsparticles-plugin-motion)
7
- [![npmjs](https://img.shields.io/npm/dt/tsparticles-plugin-motion)](https://www.npmjs.com/package/tsparticles-plugin-motion) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
5
+ [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/plugin-motion/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/plugin-motion)
6
+ [![npmjs](https://badge.fury.io/js/@tsparticles/plugin-motion.svg)](https://www.npmjs.com/package/@tsparticles/plugin-motion)
7
+ [![npmjs](https://img.shields.io/npm/dt/@tsparticles/plugin-motion)](https://www.npmjs.com/package/@tsparticles/plugin-motion) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
8
8
 
9
9
  [tsParticles](https://github.com/matteobruni/tsparticles) plugin for handling motion sickness CSS value.
10
10
 
@@ -42,29 +42,33 @@ Once the scripts are loaded you can set up `tsParticles` and the plugin like thi
42
42
  This package is compatible also with ES or CommonJS modules, firstly this needs to be installed, like this:
43
43
 
44
44
  ```shell
45
- $ npm install tsparticles-plugin-motion
45
+ $ npm install @tsparticles/plugin-motion
46
46
  ```
47
47
 
48
48
  or
49
49
 
50
50
  ```shell
51
- $ yarn add tsparticles-plugin-motion
51
+ $ yarn add @tsparticles/plugin-motion
52
52
  ```
53
53
 
54
54
  Then you need to import it in the app, like this:
55
55
 
56
56
  ```javascript
57
- const { tsParticles } = require("tsparticles-engine");
58
- const { loadMotionPlugin } = require("tsparticles-plugin-motion");
57
+ const { tsParticles } = require("@tsparticles/engine");
58
+ const { loadMotionPlugin } = require("@tsparticles/plugin-motion");
59
59
 
60
- loadMotionPlugin(tsParticles); // awaitable
60
+ (async () => {
61
+ await loadMotionPlugin(tsParticles);
62
+ })();
61
63
  ```
62
64
 
63
65
  or
64
66
 
65
67
  ```javascript
66
- import { tsParticles } from "tsparticles-engine";
67
- import { loadMotionPlugin } from "tsparticles-plugin-motion";
68
+ import { tsParticles } from "@tsparticles/engine";
69
+ import { loadMotionPlugin } from "@tsparticles/plugin-motion";
68
70
 
69
- loadMotionPlugin(tsParticles); // awaitable
71
+ (async () => {
72
+ await loadMotionPlugin(tsParticles);
73
+ })();
70
74
  ```
package/browser/MotionInstance.js CHANGED
@@ -1,49 +1,47 @@
1
1
  import { safeMatchMedia } from "@tsparticles/engine";
2
2
  export class MotionInstance {
3
3
  constructor(container, engine) {
4
+ this._handleMotionChange = (mediaQuery) => {
5
+ const container = this._container, motion = container.actualOptions.motion;
6
+ if (!motion) {
7
+ return;
8
+ }
9
+ container.retina.reduceFactor = mediaQuery.matches
10
+ ? motion.disable
11
+ ? 0
12
+ : motion.reduce.value
13
+ ? 1 / motion.reduce.factor
14
+ : 1
15
+ : 1;
16
+ };
4
17
  this._container = container;
5
18
  this._engine = engine;
6
19
  }
7
20
  async init() {
8
21
  const container = this._container, options = container.actualOptions.motion;
9
- if (options && (options.disable || options.reduce.value)) {
10
- const mediaQuery = safeMatchMedia("(prefers-reduced-motion: reduce)");
11
- if (mediaQuery) {
12
- this._handleMotionChange(mediaQuery);
13
- const handleChange = async () => {
14
- this._handleMotionChange(mediaQuery);
15
- try {
16
- await container.refresh();
17
- }
18
- catch (_a) {
19
- }
20
- };
21
- if (mediaQuery.addEventListener !== undefined) {
22
- mediaQuery.addEventListener("change", handleChange);
23
- }
24
- else if (mediaQuery.addListener !== undefined) {
25
- mediaQuery.addListener(handleChange);
26
- }
27
- }
28
- else {
29
- container.retina.reduceFactor = 1;
30
- }
31
- }
32
- else {
22
+ if (!(options && (options.disable || options.reduce.value))) {
33
23
  container.retina.reduceFactor = 1;
24
+ return;
34
25
  }
35
- }
36
- _handleMotionChange(mediaQuery) {
37
- const container = this._container, motion = container.actualOptions.motion;
38
- if (!motion) {
26
+ const mediaQuery = safeMatchMedia("(prefers-reduced-motion: reduce)");
27
+ if (!mediaQuery) {
28
+ container.retina.reduceFactor = 1;
39
29
  return;
40
30
  }
41
- container.retina.reduceFactor = mediaQuery.matches
42
- ? motion.disable
43
- ? 0
44
- : motion.reduce.value
45
- ? 1 / motion.reduce.factor
46
- : 1
47
- : 1;
31
+ this._handleMotionChange(mediaQuery);
32
+ const handleChange = async () => {
33
+ this._handleMotionChange(mediaQuery);
34
+ try {
35
+ await container.refresh();
36
+ }
37
+ catch {
38
+ }
39
+ };
40
+ if (mediaQuery.addEventListener !== undefined) {
41
+ mediaQuery.addEventListener("change", handleChange);
42
+ }
43
+ else if (mediaQuery.addListener !== undefined) {
44
+ mediaQuery.addListener(handleChange);
45
+ }
48
46
  }
49
47
  }
package/browser/index.js CHANGED
@@ -13,16 +13,15 @@ class MotionPlugin {
13
13
  return;
14
14
  }
15
15
  let motionOptions = options.motion;
16
- if ((motionOptions === null || motionOptions === void 0 ? void 0 : motionOptions.load) === undefined) {
16
+ if (!motionOptions?.load) {
17
17
  options.motion = motionOptions = new Motion();
18
18
  }
19
- motionOptions.load(source === null || source === void 0 ? void 0 : source.motion);
19
+ motionOptions.load(source?.motion);
20
20
  }
21
21
  needsPlugin() {
22
22
  return true;
23
23
  }
24
24
  }
25
- export async function loadMotionPlugin(engine) {
26
- const plugin = new MotionPlugin(engine);
27
- await engine.addPlugin(plugin);
25
+ export async function loadMotionPlugin(engine, refresh = true) {
26
+ await engine.addPlugin(new MotionPlugin(engine), refresh);
28
27
  }
package/cjs/MotionInstance.js CHANGED
@@ -1,64 +1,51 @@
1
1
  "use strict";
2
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4
- return new (P || (P = Promise))(function (resolve, reject) {
5
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
7
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
8
- step((generator = generator.apply(thisArg, _arguments || [])).next());
9
- });
10
- };
11
2
  Object.defineProperty(exports, "__esModule", { value: true });
12
3
  exports.MotionInstance = void 0;
13
4
  const engine_1 = require("@tsparticles/engine");
14
5
  class MotionInstance {
15
6
  constructor(container, engine) {
7
+ this._handleMotionChange = (mediaQuery) => {
8
+ const container = this._container, motion = container.actualOptions.motion;
9
+ if (!motion) {
10
+ return;
11
+ }
12
+ container.retina.reduceFactor = mediaQuery.matches
13
+ ? motion.disable
14
+ ? 0
15
+ : motion.reduce.value
16
+ ? 1 / motion.reduce.factor
17
+ : 1
18
+ : 1;
19
+ };
16
20
  this._container = container;
17
21
  this._engine = engine;
18
22
  }
19
- init() {
20
- return __awaiter(this, void 0, void 0, function* () {
21
- const container = this._container, options = container.actualOptions.motion;
22
- if (options && (options.disable || options.reduce.value)) {
23
- const mediaQuery = (0, engine_1.safeMatchMedia)("(prefers-reduced-motion: reduce)");
24
- if (mediaQuery) {
25
- this._handleMotionChange(mediaQuery);
26
- const handleChange = () => __awaiter(this, void 0, void 0, function* () {
27
- this._handleMotionChange(mediaQuery);
28
- try {
29
- yield container.refresh();
30
- }
31
- catch (_a) {
32
- }
33
- });
34
- if (mediaQuery.addEventListener !== undefined) {
35
- mediaQuery.addEventListener("change", handleChange);
36
- }
37
- else if (mediaQuery.addListener !== undefined) {
38
- mediaQuery.addListener(handleChange);
39
- }
40
- }
41
- else {
42
- container.retina.reduceFactor = 1;
43
- }
23
+ async init() {
24
+ const container = this._container, options = container.actualOptions.motion;
25
+ if (!(options && (options.disable || options.reduce.value))) {
26
+ container.retina.reduceFactor = 1;
27
+ return;
28
+ }
29
+ const mediaQuery = (0, engine_1.safeMatchMedia)("(prefers-reduced-motion: reduce)");
30
+ if (!mediaQuery) {
31
+ container.retina.reduceFactor = 1;
32
+ return;
33
+ }
34
+ this._handleMotionChange(mediaQuery);
35
+ const handleChange = async () => {
36
+ this._handleMotionChange(mediaQuery);
37
+ try {
38
+ await container.refresh();
44
39
  }
45
- else {
46
- container.retina.reduceFactor = 1;
40
+ catch {
47
41
  }
48
- });
49
- }
50
- _handleMotionChange(mediaQuery) {
51
- const container = this._container, motion = container.actualOptions.motion;
52
- if (!motion) {
53
- return;
42
+ };
43
+ if (mediaQuery.addEventListener !== undefined) {
44
+ mediaQuery.addEventListener("change", handleChange);
45
+ }
46
+ else if (mediaQuery.addListener !== undefined) {
47
+ mediaQuery.addListener(handleChange);
54
48
  }
55
- container.retina.reduceFactor = mediaQuery.matches
56
- ? motion.disable
57
- ? 0
58
- : motion.reduce.value
59
- ? 1 / motion.reduce.factor
60
- : 1
61
- : 1;
62
49
  }
63
50
  }
64
51
  exports.MotionInstance = MotionInstance;
package/cjs/index.js CHANGED
@@ -1,13 +1,4 @@
1
1
  "use strict";
2
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4
- return new (P || (P = Promise))(function (resolve, reject) {
5
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
7
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
8
- step((generator = generator.apply(thisArg, _arguments || [])).next());
9
- });
10
- };
11
2
  Object.defineProperty(exports, "__esModule", { value: true });
12
3
  exports.loadMotionPlugin = void 0;
13
4
  const Motion_1 = require("./Options/Classes/Motion");
@@ -25,19 +16,16 @@ class MotionPlugin {
25
16
  return;
26
17
  }
27
18
  let motionOptions = options.motion;
28
- if ((motionOptions === null || motionOptions === void 0 ? void 0 : motionOptions.load) === undefined) {
19
+ if (!motionOptions?.load) {
29
20
  options.motion = motionOptions = new Motion_1.Motion();
30
21
  }
31
- motionOptions.load(source === null || source === void 0 ? void 0 : source.motion);
22
+ motionOptions.load(source?.motion);
32
23
  }
33
24
  needsPlugin() {
34
25
  return true;
35
26
  }
36
27
  }
37
- function loadMotionPlugin(engine) {
38
- return __awaiter(this, void 0, void 0, function* () {
39
- const plugin = new MotionPlugin(engine);
40
- yield engine.addPlugin(plugin);
41
- });
28
+ async function loadMotionPlugin(engine, refresh = true) {
29
+ await engine.addPlugin(new MotionPlugin(engine), refresh);
42
30
  }
43
31
  exports.loadMotionPlugin = loadMotionPlugin;
package/esm/MotionInstance.js CHANGED
@@ -1,49 +1,47 @@
1
1
  import { safeMatchMedia } from "@tsparticles/engine";
2
2
  export class MotionInstance {
3
3
  constructor(container, engine) {
4
+ this._handleMotionChange = (mediaQuery) => {
5
+ const container = this._container, motion = container.actualOptions.motion;
6
+ if (!motion) {
7
+ return;
8
+ }
9
+ container.retina.reduceFactor = mediaQuery.matches
10
+ ? motion.disable
11
+ ? 0
12
+ : motion.reduce.value
13
+ ? 1 / motion.reduce.factor
14
+ : 1
15
+ : 1;
16
+ };
4
17
  this._container = container;
5
18
  this._engine = engine;
6
19
  }
7
20
  async init() {
8
21
  const container = this._container, options = container.actualOptions.motion;
9
- if (options && (options.disable || options.reduce.value)) {
10
- const mediaQuery = safeMatchMedia("(prefers-reduced-motion: reduce)");
11
- if (mediaQuery) {
12
- this._handleMotionChange(mediaQuery);
13
- const handleChange = async () => {
14
- this._handleMotionChange(mediaQuery);
15
- try {
16
- await container.refresh();
17
- }
18
- catch (_a) {
19
- }
20
- };
21
- if (mediaQuery.addEventListener !== undefined) {
22
- mediaQuery.addEventListener("change", handleChange);
23
- }
24
- else if (mediaQuery.addListener !== undefined) {
25
- mediaQuery.addListener(handleChange);
26
- }
27
- }
28
- else {
29
- container.retina.reduceFactor = 1;
30
- }
31
- }
32
- else {
22
+ if (!(options && (options.disable || options.reduce.value))) {
33
23
  container.retina.reduceFactor = 1;
24
+ return;
34
25
  }
35
- }
36
- _handleMotionChange(mediaQuery) {
37
- const container = this._container, motion = container.actualOptions.motion;
38
- if (!motion) {
26
+ const mediaQuery = safeMatchMedia("(prefers-reduced-motion: reduce)");
27
+ if (!mediaQuery) {
28
+ container.retina.reduceFactor = 1;
39
29
  return;
40
30
  }
41
- container.retina.reduceFactor = mediaQuery.matches
42
- ? motion.disable
43
- ? 0
44
- : motion.reduce.value
45
- ? 1 / motion.reduce.factor
46
- : 1
47
- : 1;
31
+ this._handleMotionChange(mediaQuery);
32
+ const handleChange = async () => {
33
+ this._handleMotionChange(mediaQuery);
34
+ try {
35
+ await container.refresh();
36
+ }
37
+ catch {
38
+ }
39
+ };
40
+ if (mediaQuery.addEventListener !== undefined) {
41
+ mediaQuery.addEventListener("change", handleChange);
42
+ }
43
+ else if (mediaQuery.addListener !== undefined) {
44
+ mediaQuery.addListener(handleChange);
45
+ }
48
46
  }
49
47
  }
package/esm/index.js CHANGED
@@ -13,16 +13,15 @@ class MotionPlugin {
13
13
  return;
14
14
  }
15
15
  let motionOptions = options.motion;
16
- if ((motionOptions === null || motionOptions === void 0 ? void 0 : motionOptions.load) === undefined) {
16
+ if (!motionOptions?.load) {
17
17
  options.motion = motionOptions = new Motion();
18
18
  }
19
- motionOptions.load(source === null || source === void 0 ? void 0 : source.motion);
19
+ motionOptions.load(source?.motion);
20
20
  }
21
21
  needsPlugin() {
22
22
  return true;
23
23
  }
24
24
  }
25
- export async function loadMotionPlugin(engine) {
26
- const plugin = new MotionPlugin(engine);
27
- await engine.addPlugin(plugin);
25
+ export async function loadMotionPlugin(engine, refresh = true) {
26
+ await engine.addPlugin(new MotionPlugin(engine), refresh);
28
27
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tsparticles/plugin-motion",
3
- "version": "3.0.0-alpha.1",
3
+ "version": "3.0.0-beta.0",
4
4
  "description": "tsParticles motion sickness plugin",
5
5
  "homepage": "https://particles.js.org",
6
6
  "repository": {
@@ -72,10 +72,11 @@
72
72
  "unpkg": "tsparticles.plugin.motion.min.js",
73
73
  "module": "esm/index.js",
74
74
  "types": "types/index.d.ts",
75
+ "sideEffects": false,
76
+ "dependencies": {
77
+ "@tsparticles/engine": "^3.0.0-beta.0"
78
+ },
75
79
  "publishConfig": {
76
80
  "access": "public"
77
- },
78
- "dependencies": {
79
- "@tsparticles/engine": "^3.0.0-alpha.1"
80
81
  }
81
- }
82
+ }