@tsparticles/plugin-motion
Advanced tools
Comparing version 3.0.0-alpha.1 to 3.0.0-beta.0
@@ -16,6 +16,6 @@ import { Motion } from "./Options/Classes/Motion"; | ||
let motionOptions = options.motion; | ||
if ((motionOptions === null || motionOptions === void 0 ? void 0 : motionOptions.load) === undefined) { | ||
if (!motionOptions?.load) { | ||
options.motion = motionOptions = new Motion(); | ||
} | ||
motionOptions.load(source === null || source === void 0 ? void 0 : source.motion); | ||
motionOptions.load(source?.motion); | ||
} | ||
@@ -26,5 +26,4 @@ needsPlugin() { | ||
} | ||
export async function loadMotionPlugin(engine) { | ||
const plugin = new MotionPlugin(engine); | ||
await engine.addPlugin(plugin); | ||
export async function loadMotionPlugin(engine, refresh = true) { | ||
await engine.addPlugin(new MotionPlugin(engine), refresh); | ||
} |
import { safeMatchMedia } from "@tsparticles/engine"; | ||
export class MotionInstance { | ||
constructor(container, engine) { | ||
this._handleMotionChange = (mediaQuery) => { | ||
const container = this._container, motion = container.actualOptions.motion; | ||
if (!motion) { | ||
return; | ||
} | ||
container.retina.reduceFactor = mediaQuery.matches | ||
? motion.disable | ||
? 0 | ||
: motion.reduce.value | ||
? 1 / motion.reduce.factor | ||
: 1 | ||
: 1; | ||
}; | ||
this._container = container; | ||
@@ -9,42 +22,27 @@ this._engine = engine; | ||
const container = this._container, options = container.actualOptions.motion; | ||
if (options && (options.disable || options.reduce.value)) { | ||
const mediaQuery = safeMatchMedia("(prefers-reduced-motion: reduce)"); | ||
if (mediaQuery) { | ||
this._handleMotionChange(mediaQuery); | ||
const handleChange = async () => { | ||
this._handleMotionChange(mediaQuery); | ||
try { | ||
await container.refresh(); | ||
} | ||
catch (_a) { | ||
} | ||
}; | ||
if (mediaQuery.addEventListener !== undefined) { | ||
mediaQuery.addEventListener("change", handleChange); | ||
} | ||
else if (mediaQuery.addListener !== undefined) { | ||
mediaQuery.addListener(handleChange); | ||
} | ||
if (!(options && (options.disable || options.reduce.value))) { | ||
container.retina.reduceFactor = 1; | ||
return; | ||
} | ||
const mediaQuery = safeMatchMedia("(prefers-reduced-motion: reduce)"); | ||
if (!mediaQuery) { | ||
container.retina.reduceFactor = 1; | ||
return; | ||
} | ||
this._handleMotionChange(mediaQuery); | ||
const handleChange = async () => { | ||
this._handleMotionChange(mediaQuery); | ||
try { | ||
await container.refresh(); | ||
} | ||
else { | ||
container.retina.reduceFactor = 1; | ||
catch { | ||
} | ||
}; | ||
if (mediaQuery.addEventListener !== undefined) { | ||
mediaQuery.addEventListener("change", handleChange); | ||
} | ||
else { | ||
container.retina.reduceFactor = 1; | ||
else if (mediaQuery.addListener !== undefined) { | ||
mediaQuery.addListener(handleChange); | ||
} | ||
} | ||
_handleMotionChange(mediaQuery) { | ||
const container = this._container, motion = container.actualOptions.motion; | ||
if (!motion) { | ||
return; | ||
} | ||
container.retina.reduceFactor = mediaQuery.matches | ||
? motion.disable | ||
? 0 | ||
: motion.reduce.value | ||
? 1 / motion.reduce.factor | ||
: 1 | ||
: 1; | ||
} | ||
} |
"use strict"; | ||
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { | ||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } | ||
return new (P || (P = Promise))(function (resolve, reject) { | ||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } | ||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } | ||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } | ||
step((generator = generator.apply(thisArg, _arguments || [])).next()); | ||
}); | ||
}; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
@@ -28,6 +19,6 @@ exports.loadMotionPlugin = void 0; | ||
let motionOptions = options.motion; | ||
if ((motionOptions === null || motionOptions === void 0 ? void 0 : motionOptions.load) === undefined) { | ||
if (!motionOptions?.load) { | ||
options.motion = motionOptions = new Motion_1.Motion(); | ||
} | ||
motionOptions.load(source === null || source === void 0 ? void 0 : source.motion); | ||
motionOptions.load(source?.motion); | ||
} | ||
@@ -38,8 +29,5 @@ needsPlugin() { | ||
} | ||
function loadMotionPlugin(engine) { | ||
return __awaiter(this, void 0, void 0, function* () { | ||
const plugin = new MotionPlugin(engine); | ||
yield engine.addPlugin(plugin); | ||
}); | ||
async function loadMotionPlugin(engine, refresh = true) { | ||
await engine.addPlugin(new MotionPlugin(engine), refresh); | ||
} | ||
exports.loadMotionPlugin = loadMotionPlugin; |
"use strict"; | ||
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { | ||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } | ||
return new (P || (P = Promise))(function (resolve, reject) { | ||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } | ||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } | ||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } | ||
step((generator = generator.apply(thisArg, _arguments || [])).next()); | ||
}); | ||
}; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
@@ -16,50 +7,46 @@ exports.MotionInstance = void 0; | ||
constructor(container, engine) { | ||
this._handleMotionChange = (mediaQuery) => { | ||
const container = this._container, motion = container.actualOptions.motion; | ||
if (!motion) { | ||
return; | ||
} | ||
container.retina.reduceFactor = mediaQuery.matches | ||
? motion.disable | ||
? 0 | ||
: motion.reduce.value | ||
? 1 / motion.reduce.factor | ||
: 1 | ||
: 1; | ||
}; | ||
this._container = container; | ||
this._engine = engine; | ||
} | ||
init() { | ||
return __awaiter(this, void 0, void 0, function* () { | ||
const container = this._container, options = container.actualOptions.motion; | ||
if (options && (options.disable || options.reduce.value)) { | ||
const mediaQuery = (0, engine_1.safeMatchMedia)("(prefers-reduced-motion: reduce)"); | ||
if (mediaQuery) { | ||
this._handleMotionChange(mediaQuery); | ||
const handleChange = () => __awaiter(this, void 0, void 0, function* () { | ||
this._handleMotionChange(mediaQuery); | ||
try { | ||
yield container.refresh(); | ||
} | ||
catch (_a) { | ||
} | ||
}); | ||
if (mediaQuery.addEventListener !== undefined) { | ||
mediaQuery.addEventListener("change", handleChange); | ||
} | ||
else if (mediaQuery.addListener !== undefined) { | ||
mediaQuery.addListener(handleChange); | ||
} | ||
} | ||
else { | ||
container.retina.reduceFactor = 1; | ||
} | ||
async init() { | ||
const container = this._container, options = container.actualOptions.motion; | ||
if (!(options && (options.disable || options.reduce.value))) { | ||
container.retina.reduceFactor = 1; | ||
return; | ||
} | ||
const mediaQuery = (0, engine_1.safeMatchMedia)("(prefers-reduced-motion: reduce)"); | ||
if (!mediaQuery) { | ||
container.retina.reduceFactor = 1; | ||
return; | ||
} | ||
this._handleMotionChange(mediaQuery); | ||
const handleChange = async () => { | ||
this._handleMotionChange(mediaQuery); | ||
try { | ||
await container.refresh(); | ||
} | ||
else { | ||
container.retina.reduceFactor = 1; | ||
catch { | ||
} | ||
}); | ||
} | ||
_handleMotionChange(mediaQuery) { | ||
const container = this._container, motion = container.actualOptions.motion; | ||
if (!motion) { | ||
return; | ||
}; | ||
if (mediaQuery.addEventListener !== undefined) { | ||
mediaQuery.addEventListener("change", handleChange); | ||
} | ||
container.retina.reduceFactor = mediaQuery.matches | ||
? motion.disable | ||
? 0 | ||
: motion.reduce.value | ||
? 1 / motion.reduce.factor | ||
: 1 | ||
: 1; | ||
else if (mediaQuery.addListener !== undefined) { | ||
mediaQuery.addListener(handleChange); | ||
} | ||
} | ||
} | ||
exports.MotionInstance = MotionInstance; |
@@ -16,6 +16,6 @@ import { Motion } from "./Options/Classes/Motion"; | ||
let motionOptions = options.motion; | ||
if ((motionOptions === null || motionOptions === void 0 ? void 0 : motionOptions.load) === undefined) { | ||
if (!motionOptions?.load) { | ||
options.motion = motionOptions = new Motion(); | ||
} | ||
motionOptions.load(source === null || source === void 0 ? void 0 : source.motion); | ||
motionOptions.load(source?.motion); | ||
} | ||
@@ -26,5 +26,4 @@ needsPlugin() { | ||
} | ||
export async function loadMotionPlugin(engine) { | ||
const plugin = new MotionPlugin(engine); | ||
await engine.addPlugin(plugin); | ||
export async function loadMotionPlugin(engine, refresh = true) { | ||
await engine.addPlugin(new MotionPlugin(engine), refresh); | ||
} |
import { safeMatchMedia } from "@tsparticles/engine"; | ||
export class MotionInstance { | ||
constructor(container, engine) { | ||
this._handleMotionChange = (mediaQuery) => { | ||
const container = this._container, motion = container.actualOptions.motion; | ||
if (!motion) { | ||
return; | ||
} | ||
container.retina.reduceFactor = mediaQuery.matches | ||
? motion.disable | ||
? 0 | ||
: motion.reduce.value | ||
? 1 / motion.reduce.factor | ||
: 1 | ||
: 1; | ||
}; | ||
this._container = container; | ||
@@ -9,42 +22,27 @@ this._engine = engine; | ||
const container = this._container, options = container.actualOptions.motion; | ||
if (options && (options.disable || options.reduce.value)) { | ||
const mediaQuery = safeMatchMedia("(prefers-reduced-motion: reduce)"); | ||
if (mediaQuery) { | ||
this._handleMotionChange(mediaQuery); | ||
const handleChange = async () => { | ||
this._handleMotionChange(mediaQuery); | ||
try { | ||
await container.refresh(); | ||
} | ||
catch (_a) { | ||
} | ||
}; | ||
if (mediaQuery.addEventListener !== undefined) { | ||
mediaQuery.addEventListener("change", handleChange); | ||
} | ||
else if (mediaQuery.addListener !== undefined) { | ||
mediaQuery.addListener(handleChange); | ||
} | ||
if (!(options && (options.disable || options.reduce.value))) { | ||
container.retina.reduceFactor = 1; | ||
return; | ||
} | ||
const mediaQuery = safeMatchMedia("(prefers-reduced-motion: reduce)"); | ||
if (!mediaQuery) { | ||
container.retina.reduceFactor = 1; | ||
return; | ||
} | ||
this._handleMotionChange(mediaQuery); | ||
const handleChange = async () => { | ||
this._handleMotionChange(mediaQuery); | ||
try { | ||
await container.refresh(); | ||
} | ||
else { | ||
container.retina.reduceFactor = 1; | ||
catch { | ||
} | ||
}; | ||
if (mediaQuery.addEventListener !== undefined) { | ||
mediaQuery.addEventListener("change", handleChange); | ||
} | ||
else { | ||
container.retina.reduceFactor = 1; | ||
else if (mediaQuery.addListener !== undefined) { | ||
mediaQuery.addListener(handleChange); | ||
} | ||
} | ||
_handleMotionChange(mediaQuery) { | ||
const container = this._container, motion = container.actualOptions.motion; | ||
if (!motion) { | ||
return; | ||
} | ||
container.retina.reduceFactor = mediaQuery.matches | ||
? motion.disable | ||
? 0 | ||
: motion.reduce.value | ||
? 1 / motion.reduce.factor | ||
: 1 | ||
: 1; | ||
} | ||
} |
{ | ||
"name": "@tsparticles/plugin-motion", | ||
"version": "3.0.0-alpha.1", | ||
"version": "3.0.0-beta.0", | ||
"description": "tsParticles motion sickness plugin", | ||
@@ -75,8 +75,9 @@ "homepage": "https://particles.js.org", | ||
"types": "types/index.d.ts", | ||
"sideEffects": false, | ||
"dependencies": { | ||
"@tsparticles/engine": "^3.0.0-beta.0" | ||
}, | ||
"publishConfig": { | ||
"access": "public" | ||
}, | ||
"dependencies": { | ||
"@tsparticles/engine": "^3.0.0-alpha.1" | ||
} | ||
} | ||
} |
@@ -5,5 +5,5 @@ [![banner](https://particles.js.org/images/banner2.png)](https://particles.js.org) | ||
[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-plugin-motion/badge)](https://www.jsdelivr.com/package/npm/tsparticles-plugin-motion) | ||
[![npmjs](https://badge.fury.io/js/tsparticles-plugin-motion.svg)](https://www.npmjs.com/package/tsparticles-plugin-motion) | ||
[![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) | ||
[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/plugin-motion/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/plugin-motion) | ||
[![npmjs](https://badge.fury.io/js/@tsparticles/plugin-motion.svg)](https://www.npmjs.com/package/@tsparticles/plugin-motion) | ||
[![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) | ||
@@ -46,3 +46,3 @@ [tsParticles](https://github.com/matteobruni/tsparticles) plugin for handling motion sickness CSS value. | ||
```shell | ||
$ npm install tsparticles-plugin-motion | ||
$ npm install @tsparticles/plugin-motion | ||
``` | ||
@@ -53,3 +53,3 @@ | ||
```shell | ||
$ yarn add tsparticles-plugin-motion | ||
$ yarn add @tsparticles/plugin-motion | ||
``` | ||
@@ -60,6 +60,8 @@ | ||
```javascript | ||
const { tsParticles } = require("tsparticles-engine"); | ||
const { loadMotionPlugin } = require("tsparticles-plugin-motion"); | ||
const { tsParticles } = require("@tsparticles/engine"); | ||
const { loadMotionPlugin } = require("@tsparticles/plugin-motion"); | ||
loadMotionPlugin(tsParticles); // awaitable | ||
(async () => { | ||
await loadMotionPlugin(tsParticles); | ||
})(); | ||
``` | ||
@@ -70,6 +72,8 @@ | ||
```javascript | ||
import { tsParticles } from "tsparticles-engine"; | ||
import { loadMotionPlugin } from "tsparticles-plugin-motion"; | ||
import { tsParticles } from "@tsparticles/engine"; | ||
import { loadMotionPlugin } from "@tsparticles/plugin-motion"; | ||
loadMotionPlugin(tsParticles); // awaitable | ||
(async () => { | ||
await loadMotionPlugin(tsParticles); | ||
})(); | ||
``` |
@@ -7,3 +7,3 @@ /*! | ||
* How to use? : Check the GitHub README | ||
* v3.0.0-alpha.1 | ||
* v3.0.0-beta.0 | ||
*/ | ||
@@ -95,3 +95,3 @@ (function webpackUniversalModuleDefinition(root, factory) { | ||
__webpack_require__.d(__webpack_exports__, { | ||
"loadMotionPlugin": () => (/* binding */ loadMotionPlugin) | ||
loadMotionPlugin: () => (/* binding */ loadMotionPlugin) | ||
}); | ||
@@ -140,2 +140,10 @@ | ||
constructor(container, engine) { | ||
this._handleMotionChange = mediaQuery => { | ||
const container = this._container, | ||
motion = container.actualOptions.motion; | ||
if (!motion) { | ||
return; | ||
} | ||
container.retina.reduceFactor = mediaQuery.matches ? motion.disable ? 0 : motion.reduce.value ? 1 / motion.reduce.factor : 1 : 1; | ||
}; | ||
this._container = container; | ||
@@ -147,31 +155,23 @@ this._engine = engine; | ||
options = container.actualOptions.motion; | ||
if (options && (options.disable || options.reduce.value)) { | ||
const mediaQuery = (0,engine_root_window_.safeMatchMedia)("(prefers-reduced-motion: reduce)"); | ||
if (mediaQuery) { | ||
this._handleMotionChange(mediaQuery); | ||
const handleChange = async () => { | ||
this._handleMotionChange(mediaQuery); | ||
try { | ||
await container.refresh(); | ||
} catch (_a) {} | ||
}; | ||
if (mediaQuery.addEventListener !== undefined) { | ||
mediaQuery.addEventListener("change", handleChange); | ||
} else if (mediaQuery.addListener !== undefined) { | ||
mediaQuery.addListener(handleChange); | ||
} | ||
} else { | ||
container.retina.reduceFactor = 1; | ||
} | ||
} else { | ||
if (!(options && (options.disable || options.reduce.value))) { | ||
container.retina.reduceFactor = 1; | ||
return; | ||
} | ||
} | ||
_handleMotionChange(mediaQuery) { | ||
const container = this._container, | ||
motion = container.actualOptions.motion; | ||
if (!motion) { | ||
const mediaQuery = (0,engine_root_window_.safeMatchMedia)("(prefers-reduced-motion: reduce)"); | ||
if (!mediaQuery) { | ||
container.retina.reduceFactor = 1; | ||
return; | ||
} | ||
container.retina.reduceFactor = mediaQuery.matches ? motion.disable ? 0 : motion.reduce.value ? 1 / motion.reduce.factor : 1 : 1; | ||
this._handleMotionChange(mediaQuery); | ||
const handleChange = async () => { | ||
this._handleMotionChange(mediaQuery); | ||
try { | ||
await container.refresh(); | ||
} catch {} | ||
}; | ||
if (mediaQuery.addEventListener !== undefined) { | ||
mediaQuery.addEventListener("change", handleChange); | ||
} else if (mediaQuery.addListener !== undefined) { | ||
mediaQuery.addListener(handleChange); | ||
} | ||
} | ||
@@ -195,6 +195,6 @@ } | ||
let motionOptions = options.motion; | ||
if ((motionOptions === null || motionOptions === void 0 ? void 0 : motionOptions.load) === undefined) { | ||
if (!motionOptions?.load) { | ||
options.motion = motionOptions = new Motion(); | ||
} | ||
motionOptions.load(source === null || source === void 0 ? void 0 : source.motion); | ||
motionOptions.load(source?.motion); | ||
} | ||
@@ -205,5 +205,4 @@ needsPlugin() { | ||
} | ||
async function loadMotionPlugin(engine) { | ||
const plugin = new MotionPlugin(engine); | ||
await engine.addPlugin(plugin); | ||
async function loadMotionPlugin(engine, refresh = true) { | ||
await engine.addPlugin(new MotionPlugin(engine), refresh); | ||
} | ||
@@ -210,0 +209,0 @@ })(); |
/*! For license information please see tsparticles.plugin.motion.min.js.LICENSE.txt */ | ||
!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&&(t.disable||t.reduce.value)){const t=(0,o.safeMatchMedia)("(prefers-reduced-motion: reduce)");if(t){this._handleMotionChange(t);const o=async()=>{this._handleMotionChange(t);try{await e.refresh()}catch(e){}};void 0!==t.addEventListener?t.addEventListener("change",o):void 0!==t.addListener&&t.addListener(o)}else e.retina.reduceFactor=1}else e.retina.reduceFactor=1}_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)}}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;void 0===(null==i?void 0:i.load)&&(e.motion=i=new t),i.load(null==o?void 0:o.motion)}needsPlugin(){return!0}}async function s(e){const t=new a(e);await e.addPlugin(t)}})(),n})())); | ||
!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 +0,1 @@ | ||
/*! | ||
* Author : Matteo Bruni | ||
* MIT license: https://opensource.org/licenses/MIT | ||
* Demo / Generator : https://particles.js.org/ | ||
* GitHub : https://www.github.com/matteobruni/tsparticles | ||
* How to use? : Check the GitHub README | ||
* v3.0.0-alpha.1 | ||
*/ | ||
/*! tsParticles Motion Plugin v3.0.0-beta.0 by Matteo Bruni */ |
import type { Engine } from "@tsparticles/engine"; | ||
export declare function loadMotionPlugin(engine: Engine): Promise<void>; | ||
export declare function loadMotionPlugin(engine: Engine, refresh?: boolean): Promise<void>; |
@@ -1,2 +0,2 @@ | ||
import type { Engine, IContainerPlugin } from "@tsparticles/engine"; | ||
import { type Engine, type IContainerPlugin } from "@tsparticles/engine"; | ||
import type { MotionContainer } from "./types"; | ||
@@ -8,3 +8,3 @@ export declare class MotionInstance implements IContainerPlugin { | ||
init(): Promise<void>; | ||
private _handleMotionChange; | ||
private readonly _handleMotionChange; | ||
} |
@@ -28,6 +28,6 @@ (function (factory) { | ||
let motionOptions = options.motion; | ||
if ((motionOptions === null || motionOptions === void 0 ? void 0 : motionOptions.load) === undefined) { | ||
if (!motionOptions?.load) { | ||
options.motion = motionOptions = new Motion_1.Motion(); | ||
} | ||
motionOptions.load(source === null || source === void 0 ? void 0 : source.motion); | ||
motionOptions.load(source?.motion); | ||
} | ||
@@ -38,7 +38,6 @@ needsPlugin() { | ||
} | ||
async function loadMotionPlugin(engine) { | ||
const plugin = new MotionPlugin(engine); | ||
await engine.addPlugin(plugin); | ||
async function loadMotionPlugin(engine, refresh = true) { | ||
await engine.addPlugin(new MotionPlugin(engine), refresh); | ||
} | ||
exports.loadMotionPlugin = loadMotionPlugin; | ||
}); |
@@ -16,2 +16,15 @@ (function (factory) { | ||
constructor(container, engine) { | ||
this._handleMotionChange = (mediaQuery) => { | ||
const container = this._container, motion = container.actualOptions.motion; | ||
if (!motion) { | ||
return; | ||
} | ||
container.retina.reduceFactor = mediaQuery.matches | ||
? motion.disable | ||
? 0 | ||
: motion.reduce.value | ||
? 1 / motion.reduce.factor | ||
: 1 | ||
: 1; | ||
}; | ||
this._container = container; | ||
@@ -22,44 +35,29 @@ this._engine = engine; | ||
const container = this._container, options = container.actualOptions.motion; | ||
if (options && (options.disable || options.reduce.value)) { | ||
const mediaQuery = (0, engine_1.safeMatchMedia)("(prefers-reduced-motion: reduce)"); | ||
if (mediaQuery) { | ||
this._handleMotionChange(mediaQuery); | ||
const handleChange = async () => { | ||
this._handleMotionChange(mediaQuery); | ||
try { | ||
await container.refresh(); | ||
} | ||
catch (_a) { | ||
} | ||
}; | ||
if (mediaQuery.addEventListener !== undefined) { | ||
mediaQuery.addEventListener("change", handleChange); | ||
} | ||
else if (mediaQuery.addListener !== undefined) { | ||
mediaQuery.addListener(handleChange); | ||
} | ||
if (!(options && (options.disable || options.reduce.value))) { | ||
container.retina.reduceFactor = 1; | ||
return; | ||
} | ||
const mediaQuery = (0, engine_1.safeMatchMedia)("(prefers-reduced-motion: reduce)"); | ||
if (!mediaQuery) { | ||
container.retina.reduceFactor = 1; | ||
return; | ||
} | ||
this._handleMotionChange(mediaQuery); | ||
const handleChange = async () => { | ||
this._handleMotionChange(mediaQuery); | ||
try { | ||
await container.refresh(); | ||
} | ||
else { | ||
container.retina.reduceFactor = 1; | ||
catch { | ||
} | ||
}; | ||
if (mediaQuery.addEventListener !== undefined) { | ||
mediaQuery.addEventListener("change", handleChange); | ||
} | ||
else { | ||
container.retina.reduceFactor = 1; | ||
else if (mediaQuery.addListener !== undefined) { | ||
mediaQuery.addListener(handleChange); | ||
} | ||
} | ||
_handleMotionChange(mediaQuery) { | ||
const container = this._container, motion = container.actualOptions.motion; | ||
if (!motion) { | ||
return; | ||
} | ||
container.retina.reduceFactor = mediaQuery.matches | ||
? motion.disable | ||
? 0 | ||
: motion.reduce.value | ||
? 1 / motion.reduce.factor | ||
: 1 | ||
: 1; | ||
} | ||
} | ||
exports.MotionInstance = MotionInstance; | ||
}); |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
75
312813
794
0