@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.
- package/README.md +15 -11
- package/browser/MotionInstance.js +33 -35
- package/browser/index.js +4 -5
- package/cjs/MotionInstance.js +36 -49
- package/cjs/index.js +4 -16
- package/esm/MotionInstance.js +33 -35
- package/esm/index.js +4 -5
- package/package.json +6 -5
- package/report.html +4 -4
- package/tsparticles.plugin.motion.js +31 -32
- package/tsparticles.plugin.motion.min.js +1 -1
- package/tsparticles.plugin.motion.min.js.LICENSE.txt +1 -8
- package/types/MotionInstance.d.ts +2 -2
- package/types/index.d.ts +1 -1
- package/umd/MotionInstance.js +33 -35
- package/umd/index.js +4 -5
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Demo / Generator : https://particles.js.org/
|
|
5
5
|
* GitHub : https://www.github.com/matteobruni/tsparticles
|
|
6
6
|
* How to use? : Check the GitHub README
|
|
7
|
-
* v3.0.0-
|
|
7
|
+
* v3.0.0-beta.0
|
|
8
8
|
*/
|
|
9
9
|
(function webpackUniversalModuleDefinition(root, factory) {
|
|
10
10
|
if(typeof exports === 'object' && typeof module === 'object')
|
|
@@ -91,7 +91,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
91
91
|
|
|
92
92
|
// EXPORTS
|
|
93
93
|
__webpack_require__.d(__webpack_exports__, {
|
|
94
|
-
|
|
94
|
+
loadMotionPlugin: () => (/* binding */ loadMotionPlugin)
|
|
95
95
|
});
|
|
96
96
|
|
|
97
97
|
;// CONCATENATED MODULE: ./dist/browser/Options/Classes/MotionReduce.js
|
|
@@ -135,41 +135,41 @@ var engine_root_window_ = __webpack_require__(533);
|
|
|
135
135
|
|
|
136
136
|
class MotionInstance {
|
|
137
137
|
constructor(container, engine) {
|
|
138
|
+
this._handleMotionChange = mediaQuery => {
|
|
139
|
+
const container = this._container,
|
|
140
|
+
motion = container.actualOptions.motion;
|
|
141
|
+
if (!motion) {
|
|
142
|
+
return;
|
|
143
|
+
}
|
|
144
|
+
container.retina.reduceFactor = mediaQuery.matches ? motion.disable ? 0 : motion.reduce.value ? 1 / motion.reduce.factor : 1 : 1;
|
|
145
|
+
};
|
|
138
146
|
this._container = container;
|
|
139
147
|
this._engine = engine;
|
|
140
148
|
}
|
|
141
149
|
async init() {
|
|
142
150
|
const container = this._container,
|
|
143
151
|
options = container.actualOptions.motion;
|
|
144
|
-
if (options && (options.disable || options.reduce.value)) {
|
|
145
|
-
const mediaQuery = (0,engine_root_window_.safeMatchMedia)("(prefers-reduced-motion: reduce)");
|
|
146
|
-
if (mediaQuery) {
|
|
147
|
-
this._handleMotionChange(mediaQuery);
|
|
148
|
-
const handleChange = async () => {
|
|
149
|
-
this._handleMotionChange(mediaQuery);
|
|
150
|
-
try {
|
|
151
|
-
await container.refresh();
|
|
152
|
-
} catch (_a) {}
|
|
153
|
-
};
|
|
154
|
-
if (mediaQuery.addEventListener !== undefined) {
|
|
155
|
-
mediaQuery.addEventListener("change", handleChange);
|
|
156
|
-
} else if (mediaQuery.addListener !== undefined) {
|
|
157
|
-
mediaQuery.addListener(handleChange);
|
|
158
|
-
}
|
|
159
|
-
} else {
|
|
160
|
-
container.retina.reduceFactor = 1;
|
|
161
|
-
}
|
|
162
|
-
} else {
|
|
152
|
+
if (!(options && (options.disable || options.reduce.value))) {
|
|
163
153
|
container.retina.reduceFactor = 1;
|
|
154
|
+
return;
|
|
164
155
|
}
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
motion = container.actualOptions.motion;
|
|
169
|
-
if (!motion) {
|
|
156
|
+
const mediaQuery = (0,engine_root_window_.safeMatchMedia)("(prefers-reduced-motion: reduce)");
|
|
157
|
+
if (!mediaQuery) {
|
|
158
|
+
container.retina.reduceFactor = 1;
|
|
170
159
|
return;
|
|
171
160
|
}
|
|
172
|
-
|
|
161
|
+
this._handleMotionChange(mediaQuery);
|
|
162
|
+
const handleChange = async () => {
|
|
163
|
+
this._handleMotionChange(mediaQuery);
|
|
164
|
+
try {
|
|
165
|
+
await container.refresh();
|
|
166
|
+
} catch {}
|
|
167
|
+
};
|
|
168
|
+
if (mediaQuery.addEventListener !== undefined) {
|
|
169
|
+
mediaQuery.addEventListener("change", handleChange);
|
|
170
|
+
} else if (mediaQuery.addListener !== undefined) {
|
|
171
|
+
mediaQuery.addListener(handleChange);
|
|
172
|
+
}
|
|
173
173
|
}
|
|
174
174
|
}
|
|
175
175
|
;// CONCATENATED MODULE: ./dist/browser/index.js
|
|
@@ -188,18 +188,17 @@ class MotionPlugin {
|
|
|
188
188
|
return;
|
|
189
189
|
}
|
|
190
190
|
let motionOptions = options.motion;
|
|
191
|
-
if (
|
|
191
|
+
if (!motionOptions?.load) {
|
|
192
192
|
options.motion = motionOptions = new Motion();
|
|
193
193
|
}
|
|
194
|
-
motionOptions.load(source
|
|
194
|
+
motionOptions.load(source?.motion);
|
|
195
195
|
}
|
|
196
196
|
needsPlugin() {
|
|
197
197
|
return true;
|
|
198
198
|
}
|
|
199
199
|
}
|
|
200
|
-
async function loadMotionPlugin(engine) {
|
|
201
|
-
|
|
202
|
-
await engine.addPlugin(plugin);
|
|
200
|
+
async function loadMotionPlugin(engine, refresh = true) {
|
|
201
|
+
await engine.addPlugin(new MotionPlugin(engine), refresh);
|
|
203
202
|
}
|
|
204
203
|
})();
|
|
205
204
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! For license information please see tsparticles.plugin.motion.min.js.LICENSE.txt */
|
|
2
|
-
!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],t);else{var o="object"==typeof exports?t(require("@tsparticles/engine")):t(e.window);for(var i in o)("object"==typeof exports?exports:e)[i]=o[i]}}(this,(e=>(()=>{"use strict";var t={533:t=>{t.exports=e}},o={};function i(e){var n=o[e];if(void 0!==n)return n.exports;var r=o[e]={exports:{}};return t[e](r,r.exports,i),r.exports}i.d=(e,t)=>{for(var o in t)i.o(t,o)&&!i.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{i.r(n),i.d(n,{loadMotionPlugin:()=>s});class e{constructor(){this.factor=4,this.value=!0}load(e){e&&(void 0!==e.factor&&(this.factor=e.factor),void 0!==e.value&&(this.value=e.value))}}class t{constructor(){this.disable=!1,this.reduce=new e}load(e){e&&(void 0!==e.disable&&(this.disable=e.disable),this.reduce.load(e.reduce))}}var o=i(533);class r{constructor(e,t){this._container=e,this._engine=t}async init(){const e=this._container,t=e.actualOptions.motion;if(t
|
|
2
|
+
!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],t);else{var o="object"==typeof exports?t(require("@tsparticles/engine")):t(e.window);for(var i in o)("object"==typeof exports?exports:e)[i]=o[i]}}(this,(e=>(()=>{"use strict";var t={533:t=>{t.exports=e}},o={};function i(e){var n=o[e];if(void 0!==n)return n.exports;var r=o[e]={exports:{}};return t[e](r,r.exports,i),r.exports}i.d=(e,t)=>{for(var o in t)i.o(t,o)&&!i.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{i.r(n),i.d(n,{loadMotionPlugin:()=>s});class e{constructor(){this.factor=4,this.value=!0}load(e){e&&(void 0!==e.factor&&(this.factor=e.factor),void 0!==e.value&&(this.value=e.value))}}class t{constructor(){this.disable=!1,this.reduce=new e}load(e){e&&(void 0!==e.disable&&(this.disable=e.disable),this.reduce.load(e.reduce))}}var o=i(533);class r{constructor(e,t){this._handleMotionChange=e=>{const t=this._container,o=t.actualOptions.motion;o&&(t.retina.reduceFactor=e.matches?o.disable?0:o.reduce.value?1/o.reduce.factor:1:1)},this._container=e,this._engine=t}async init(){const e=this._container,t=e.actualOptions.motion;if(!t||!t.disable&&!t.reduce.value)return void(e.retina.reduceFactor=1);const i=(0,o.safeMatchMedia)("(prefers-reduced-motion: reduce)");if(!i)return void(e.retina.reduceFactor=1);this._handleMotionChange(i);const n=async()=>{this._handleMotionChange(i);try{await e.refresh()}catch{}};void 0!==i.addEventListener?i.addEventListener("change",n):void 0!==i.addListener&&i.addListener(n)}}class a{constructor(e){this.id="motion",this._engine=e}getPlugin(e){return new r(e,this._engine)}loadOptions(e,o){if(!this.needsPlugin())return;let i=e.motion;i?.load||(e.motion=i=new t),i.load(o?.motion)}needsPlugin(){return!0}}async function s(e,t=!0){await e.addPlugin(new a(e),t)}})(),n})()));
|
|
@@ -1,8 +1 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* Author : Matteo Bruni
|
|
3
|
-
* MIT license: https://opensource.org/licenses/MIT
|
|
4
|
-
* Demo / Generator : https://particles.js.org/
|
|
5
|
-
* GitHub : https://www.github.com/matteobruni/tsparticles
|
|
6
|
-
* How to use? : Check the GitHub README
|
|
7
|
-
* v3.0.0-alpha.1
|
|
8
|
-
*/
|
|
1
|
+
/*! tsParticles Motion Plugin v3.0.0-beta.0 by Matteo Bruni */
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import type
|
|
1
|
+
import { type Engine, type IContainerPlugin } from "@tsparticles/engine";
|
|
2
2
|
import type { MotionContainer } from "./types";
|
|
3
3
|
export declare class MotionInstance implements IContainerPlugin {
|
|
4
4
|
private readonly _container;
|
|
5
5
|
private readonly _engine;
|
|
6
6
|
constructor(container: MotionContainer, engine: Engine);
|
|
7
7
|
init(): Promise<void>;
|
|
8
|
-
private _handleMotionChange;
|
|
8
|
+
private readonly _handleMotionChange;
|
|
9
9
|
}
|
package/types/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import type { Engine } from "@tsparticles/engine";
|
|
2
|
-
export declare function loadMotionPlugin(engine: Engine): Promise<void>;
|
|
2
|
+
export declare function loadMotionPlugin(engine: Engine, refresh?: boolean): Promise<void>;
|
package/umd/MotionInstance.js
CHANGED
|
@@ -13,50 +13,48 @@
|
|
|
13
13
|
const engine_1 = require("@tsparticles/engine");
|
|
14
14
|
class MotionInstance {
|
|
15
15
|
constructor(container, engine) {
|
|
16
|
+
this._handleMotionChange = (mediaQuery) => {
|
|
17
|
+
const container = this._container, motion = container.actualOptions.motion;
|
|
18
|
+
if (!motion) {
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
21
|
+
container.retina.reduceFactor = mediaQuery.matches
|
|
22
|
+
? motion.disable
|
|
23
|
+
? 0
|
|
24
|
+
: motion.reduce.value
|
|
25
|
+
? 1 / motion.reduce.factor
|
|
26
|
+
: 1
|
|
27
|
+
: 1;
|
|
28
|
+
};
|
|
16
29
|
this._container = container;
|
|
17
30
|
this._engine = engine;
|
|
18
31
|
}
|
|
19
32
|
async init() {
|
|
20
33
|
const container = this._container, options = container.actualOptions.motion;
|
|
21
|
-
if (options && (options.disable || options.reduce.value)) {
|
|
22
|
-
const mediaQuery = (0, engine_1.safeMatchMedia)("(prefers-reduced-motion: reduce)");
|
|
23
|
-
if (mediaQuery) {
|
|
24
|
-
this._handleMotionChange(mediaQuery);
|
|
25
|
-
const handleChange = async () => {
|
|
26
|
-
this._handleMotionChange(mediaQuery);
|
|
27
|
-
try {
|
|
28
|
-
await container.refresh();
|
|
29
|
-
}
|
|
30
|
-
catch (_a) {
|
|
31
|
-
}
|
|
32
|
-
};
|
|
33
|
-
if (mediaQuery.addEventListener !== undefined) {
|
|
34
|
-
mediaQuery.addEventListener("change", handleChange);
|
|
35
|
-
}
|
|
36
|
-
else if (mediaQuery.addListener !== undefined) {
|
|
37
|
-
mediaQuery.addListener(handleChange);
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
else {
|
|
41
|
-
container.retina.reduceFactor = 1;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
else {
|
|
34
|
+
if (!(options && (options.disable || options.reduce.value))) {
|
|
45
35
|
container.retina.reduceFactor = 1;
|
|
36
|
+
return;
|
|
46
37
|
}
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
if (!motion) {
|
|
38
|
+
const mediaQuery = (0, engine_1.safeMatchMedia)("(prefers-reduced-motion: reduce)");
|
|
39
|
+
if (!mediaQuery) {
|
|
40
|
+
container.retina.reduceFactor = 1;
|
|
51
41
|
return;
|
|
52
42
|
}
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
43
|
+
this._handleMotionChange(mediaQuery);
|
|
44
|
+
const handleChange = async () => {
|
|
45
|
+
this._handleMotionChange(mediaQuery);
|
|
46
|
+
try {
|
|
47
|
+
await container.refresh();
|
|
48
|
+
}
|
|
49
|
+
catch {
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
if (mediaQuery.addEventListener !== undefined) {
|
|
53
|
+
mediaQuery.addEventListener("change", handleChange);
|
|
54
|
+
}
|
|
55
|
+
else if (mediaQuery.addListener !== undefined) {
|
|
56
|
+
mediaQuery.addListener(handleChange);
|
|
57
|
+
}
|
|
60
58
|
}
|
|
61
59
|
}
|
|
62
60
|
exports.MotionInstance = MotionInstance;
|
package/umd/index.js
CHANGED
|
@@ -25,18 +25,17 @@
|
|
|
25
25
|
return;
|
|
26
26
|
}
|
|
27
27
|
let motionOptions = options.motion;
|
|
28
|
-
if (
|
|
28
|
+
if (!motionOptions?.load) {
|
|
29
29
|
options.motion = motionOptions = new Motion_1.Motion();
|
|
30
30
|
}
|
|
31
|
-
motionOptions.load(source
|
|
31
|
+
motionOptions.load(source?.motion);
|
|
32
32
|
}
|
|
33
33
|
needsPlugin() {
|
|
34
34
|
return true;
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
|
-
async function loadMotionPlugin(engine) {
|
|
38
|
-
|
|
39
|
-
await engine.addPlugin(plugin);
|
|
37
|
+
async function loadMotionPlugin(engine, refresh = true) {
|
|
38
|
+
await engine.addPlugin(new MotionPlugin(engine), refresh);
|
|
40
39
|
}
|
|
41
40
|
exports.loadMotionPlugin = loadMotionPlugin;
|
|
42
41
|
});
|