tsparticles 1.37.3 → 1.37.4
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/Utils/EventListeners.d.ts +1 -0
- package/Utils/EventListeners.js +13 -2
- package/browser/Utils/EventListeners.d.ts +1 -0
- package/browser/Utils/EventListeners.js +14 -3
- package/esm/Utils/EventListeners.d.ts +1 -0
- package/esm/Utils/EventListeners.js +14 -3
- package/package.json +1 -1
- package/report.html +2 -2
- package/report.slim.html +2 -2
- package/tsparticles.js +11 -2
- package/tsparticles.min.js +2 -2
- package/tsparticles.slim.js +11 -2
- package/tsparticles.slim.min.js +2 -2
|
@@ -12,6 +12,7 @@ export declare class EventListeners {
|
|
|
12
12
|
private readonly mouseUpHandler;
|
|
13
13
|
private readonly visibilityChangeHandler;
|
|
14
14
|
private readonly themeChangeHandler;
|
|
15
|
+
private readonly oldThemeChangeHandler;
|
|
15
16
|
private readonly resizeHandler;
|
|
16
17
|
private canPush;
|
|
17
18
|
private resizeTimeout?;
|
package/Utils/EventListeners.js
CHANGED
|
@@ -35,6 +35,7 @@ class EventListeners {
|
|
|
35
35
|
this.mouseDownHandler = () => this.mouseDown();
|
|
36
36
|
this.visibilityChangeHandler = () => this.handleVisibilityChange();
|
|
37
37
|
this.themeChangeHandler = (e) => this.handleThemeChange(e);
|
|
38
|
+
this.oldThemeChangeHandler = (e) => this.handleThemeChange(e);
|
|
38
39
|
this.resizeHandler = () => this.handleWindowResize();
|
|
39
40
|
}
|
|
40
41
|
addListeners() {
|
|
@@ -60,9 +61,19 @@ class EventListeners {
|
|
|
60
61
|
else {
|
|
61
62
|
container.interactivity.element = container.canvas.element;
|
|
62
63
|
}
|
|
63
|
-
const mediaMatch = typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)");
|
|
64
|
+
const mediaMatch = !(0, Utils_1.isSsr)() && typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)");
|
|
64
65
|
if (mediaMatch) {
|
|
65
|
-
|
|
66
|
+
if (mediaMatch.addEventListener !== undefined) {
|
|
67
|
+
manageListener(mediaMatch, "change", this.themeChangeHandler, add);
|
|
68
|
+
}
|
|
69
|
+
else if (mediaMatch.addListener !== undefined) {
|
|
70
|
+
if (add) {
|
|
71
|
+
mediaMatch.addListener(this.oldThemeChangeHandler);
|
|
72
|
+
}
|
|
73
|
+
else {
|
|
74
|
+
mediaMatch.removeListener(this.oldThemeChangeHandler);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
66
77
|
}
|
|
67
78
|
const interactivityEl = container.interactivity.element;
|
|
68
79
|
if (!interactivityEl) {
|
|
@@ -16,6 +16,7 @@ export declare class EventListeners {
|
|
|
16
16
|
private readonly mouseUpHandler;
|
|
17
17
|
private readonly visibilityChangeHandler;
|
|
18
18
|
private readonly themeChangeHandler;
|
|
19
|
+
private readonly oldThemeChangeHandler;
|
|
19
20
|
private readonly resizeHandler;
|
|
20
21
|
private canPush;
|
|
21
22
|
private resizeTimeout?;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ClickMode, InteractivityDetect } from "../Enums";
|
|
2
2
|
import { Constants } from "./Constants";
|
|
3
|
-
import { itemFromArray } from "./Utils";
|
|
3
|
+
import { isSsr, itemFromArray } from "./Utils";
|
|
4
4
|
function manageListener(element, event, handler, add, options) {
|
|
5
5
|
if (add) {
|
|
6
6
|
let addOptions = { passive: true };
|
|
@@ -40,6 +40,7 @@ export class EventListeners {
|
|
|
40
40
|
this.mouseDownHandler = () => this.mouseDown();
|
|
41
41
|
this.visibilityChangeHandler = () => this.handleVisibilityChange();
|
|
42
42
|
this.themeChangeHandler = (e) => this.handleThemeChange(e);
|
|
43
|
+
this.oldThemeChangeHandler = (e) => this.handleThemeChange(e);
|
|
43
44
|
this.resizeHandler = () => this.handleWindowResize();
|
|
44
45
|
}
|
|
45
46
|
/**
|
|
@@ -75,9 +76,19 @@ export class EventListeners {
|
|
|
75
76
|
else {
|
|
76
77
|
container.interactivity.element = container.canvas.element;
|
|
77
78
|
}
|
|
78
|
-
const mediaMatch = typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)");
|
|
79
|
+
const mediaMatch = !isSsr() && typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)");
|
|
79
80
|
if (mediaMatch) {
|
|
80
|
-
|
|
81
|
+
if (mediaMatch.addEventListener !== undefined) {
|
|
82
|
+
manageListener(mediaMatch, "change", this.themeChangeHandler, add);
|
|
83
|
+
}
|
|
84
|
+
else if (mediaMatch.addListener !== undefined) {
|
|
85
|
+
if (add) {
|
|
86
|
+
mediaMatch.addListener(this.oldThemeChangeHandler);
|
|
87
|
+
}
|
|
88
|
+
else {
|
|
89
|
+
mediaMatch.removeListener(this.oldThemeChangeHandler);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
81
92
|
}
|
|
82
93
|
const interactivityEl = container.interactivity.element;
|
|
83
94
|
/* detect mouse pos - on hover / click event */
|
|
@@ -12,6 +12,7 @@ export declare class EventListeners {
|
|
|
12
12
|
private readonly mouseUpHandler;
|
|
13
13
|
private readonly visibilityChangeHandler;
|
|
14
14
|
private readonly themeChangeHandler;
|
|
15
|
+
private readonly oldThemeChangeHandler;
|
|
15
16
|
private readonly resizeHandler;
|
|
16
17
|
private canPush;
|
|
17
18
|
private resizeTimeout?;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ClickMode, InteractivityDetect } from "../Enums";
|
|
2
2
|
import { Constants } from "./Constants";
|
|
3
|
-
import { itemFromArray } from "./Utils";
|
|
3
|
+
import { isSsr, itemFromArray } from "./Utils";
|
|
4
4
|
function manageListener(element, event, handler, add, options) {
|
|
5
5
|
if (add) {
|
|
6
6
|
let addOptions = { passive: true };
|
|
@@ -32,6 +32,7 @@ export class EventListeners {
|
|
|
32
32
|
this.mouseDownHandler = () => this.mouseDown();
|
|
33
33
|
this.visibilityChangeHandler = () => this.handleVisibilityChange();
|
|
34
34
|
this.themeChangeHandler = (e) => this.handleThemeChange(e);
|
|
35
|
+
this.oldThemeChangeHandler = (e) => this.handleThemeChange(e);
|
|
35
36
|
this.resizeHandler = () => this.handleWindowResize();
|
|
36
37
|
}
|
|
37
38
|
addListeners() {
|
|
@@ -57,9 +58,19 @@ export class EventListeners {
|
|
|
57
58
|
else {
|
|
58
59
|
container.interactivity.element = container.canvas.element;
|
|
59
60
|
}
|
|
60
|
-
const mediaMatch = typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)");
|
|
61
|
+
const mediaMatch = !isSsr() && typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)");
|
|
61
62
|
if (mediaMatch) {
|
|
62
|
-
|
|
63
|
+
if (mediaMatch.addEventListener !== undefined) {
|
|
64
|
+
manageListener(mediaMatch, "change", this.themeChangeHandler, add);
|
|
65
|
+
}
|
|
66
|
+
else if (mediaMatch.addListener !== undefined) {
|
|
67
|
+
if (add) {
|
|
68
|
+
mediaMatch.addListener(this.oldThemeChangeHandler);
|
|
69
|
+
}
|
|
70
|
+
else {
|
|
71
|
+
mediaMatch.removeListener(this.oldThemeChangeHandler);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
63
74
|
}
|
|
64
75
|
const interactivityEl = container.interactivity.element;
|
|
65
76
|
if (!interactivityEl) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tsparticles",
|
|
3
|
-
"version": "1.37.
|
|
3
|
+
"version": "1.37.4",
|
|
4
4
|
"description": "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.",
|
|
5
5
|
"homepage": "https://particles.js.org/",
|
|
6
6
|
"scripts": {
|