@tsparticles/plugin-motion 3.0.0-alpha.1 → 3.0.0-beta.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.
Files changed (27) hide show
  1. package/README.md +15 -11
  2. package/browser/MotionInstance.js +33 -35
  3. package/browser/Options/Classes/Motion.js +1 -1
  4. package/browser/index.js +6 -7
  5. package/browser/package.json +1 -0
  6. package/cjs/MotionInstance.js +36 -49
  7. package/cjs/Options/Classes/Motion.js +2 -2
  8. package/cjs/index.js +8 -20
  9. package/cjs/package.json +1 -0
  10. package/esm/MotionInstance.js +33 -35
  11. package/esm/Options/Classes/Motion.js +1 -1
  12. package/esm/index.js +6 -7
  13. package/esm/package.json +1 -0
  14. package/package.json +19 -6
  15. package/report.html +4 -4
  16. package/tsparticles.plugin.motion.js +31 -32
  17. package/tsparticles.plugin.motion.min.js +1 -1
  18. package/tsparticles.plugin.motion.min.js.LICENSE.txt +1 -8
  19. package/types/MotionInstance.d.ts +3 -3
  20. package/types/Options/Classes/Motion.d.ts +2 -2
  21. package/types/Options/Classes/MotionReduce.d.ts +1 -1
  22. package/types/Options/Interfaces/IMotion.d.ts +1 -1
  23. package/types/index.d.ts +1 -1
  24. package/types/types.d.ts +2 -2
  25. package/umd/MotionInstance.js +33 -35
  26. package/umd/Options/Classes/Motion.js +3 -3
  27. package/umd/index.js +9 -10
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/Options/Classes/Motion.js CHANGED
@@ -1,4 +1,4 @@
1
- import { MotionReduce } from "./MotionReduce";
1
+ import { MotionReduce } from "./MotionReduce.js";
2
2
  export class Motion {
3
3
  constructor() {
4
4
  this.disable = false;
package/browser/index.js CHANGED
@@ -1,5 +1,5 @@
1
- import { Motion } from "./Options/Classes/Motion";
2
- import { MotionInstance } from "./MotionInstance";
1
+ import { Motion } from "./Options/Classes/Motion.js";
2
+ import { MotionInstance } from "./MotionInstance.js";
3
3
  class MotionPlugin {
4
4
  constructor(engine) {
5
5
  this.id = "motion";
@@ -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/browser/package.json ADDED
@@ -0,0 +1 @@
1
+ { "type": "module" }
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/Options/Classes/Motion.js CHANGED
@@ -1,11 +1,11 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.Motion = void 0;
4
- const MotionReduce_1 = require("./MotionReduce");
4
+ const MotionReduce_js_1 = require("./MotionReduce.js");
5
5
  class Motion {
6
6
  constructor() {
7
7
  this.disable = false;
8
- this.reduce = new MotionReduce_1.MotionReduce();
8
+ this.reduce = new MotionReduce_js_1.MotionReduce();
9
9
  }
10
10
  load(data) {
11
11
  if (!data) {
package/cjs/index.js CHANGED
@@ -1,43 +1,31 @@
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
- const Motion_1 = require("./Options/Classes/Motion");
14
- const MotionInstance_1 = require("./MotionInstance");
4
+ const Motion_js_1 = require("./Options/Classes/Motion.js");
5
+ const MotionInstance_js_1 = require("./MotionInstance.js");
15
6
  class MotionPlugin {
16
7
  constructor(engine) {
17
8
  this.id = "motion";
18
9
  this._engine = engine;
19
10
  }
20
11
  getPlugin(container) {
21
- return new MotionInstance_1.MotionInstance(container, this._engine);
12
+ return new MotionInstance_js_1.MotionInstance(container, this._engine);
22
13
  }
23
14
  loadOptions(options, source) {
24
15
  if (!this.needsPlugin()) {
25
16
  return;
26
17
  }
27
18
  let motionOptions = options.motion;
28
- if ((motionOptions === null || motionOptions === void 0 ? void 0 : motionOptions.load) === undefined) {
29
- options.motion = motionOptions = new Motion_1.Motion();
19
+ if (!motionOptions?.load) {
20
+ options.motion = motionOptions = new Motion_js_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/cjs/package.json ADDED
@@ -0,0 +1 @@
1
+ { "type": "commonjs" }
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/Options/Classes/Motion.js CHANGED
@@ -1,4 +1,4 @@
1
- import { MotionReduce } from "./MotionReduce";
1
+ import { MotionReduce } from "./MotionReduce.js";
2
2
  export class Motion {
3
3
  constructor() {
4
4
  this.disable = false;
package/esm/index.js CHANGED
@@ -1,5 +1,5 @@
1
- import { Motion } from "./Options/Classes/Motion";
2
- import { MotionInstance } from "./MotionInstance";
1
+ import { Motion } from "./Options/Classes/Motion.js";
2
+ import { MotionInstance } from "./MotionInstance.js";
3
3
  class MotionPlugin {
4
4
  constructor(engine) {
5
5
  this.id = "motion";
@@ -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/esm/package.json ADDED
@@ -0,0 +1 @@
1
+ { "type": "module" }
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.1",
4
4
  "description": "tsParticles motion sickness plugin",
5
5
  "homepage": "https://particles.js.org",
6
6
  "repository": {
@@ -67,15 +67,28 @@
67
67
  "bugs": {
68
68
  "url": "https://github.com/matteobruni/tsparticles/issues"
69
69
  },
70
- "main": "cjs/index.js",
70
+ "sideEffects": false,
71
71
  "jsdelivr": "tsparticles.plugin.motion.min.js",
72
72
  "unpkg": "tsparticles.plugin.motion.min.js",
73
+ "browser": "browser/index.js",
74
+ "main": "cjs/index.js",
73
75
  "module": "esm/index.js",
74
76
  "types": "types/index.d.ts",
75
- "publishConfig": {
76
- "access": "public"
77
+ "exports": {
78
+ ".": {
79
+ "types": "./types/index.d.ts",
80
+ "browser": "./browser/index.js",
81
+ "import": "./esm/index.js",
82
+ "require": "./cjs/index.js",
83
+ "umd": "./umd/index.js",
84
+ "default": "./cjs/index.js"
85
+ },
86
+ "./package.json": "./package.json"
77
87
  },
78
88
  "dependencies": {
79
- "@tsparticles/engine": "^3.0.0-alpha.1"
89
+ "@tsparticles/engine": "^3.0.0-beta.1"
90
+ },
91
+ "publishConfig": {
92
+ "access": "public"
80
93
  }
81
- }
94
+ }