deblan-mirror/vanilla-tilt.js
deblan-mirror/vanilla-tilt.js
1
0
Fork 0
mirror of https://github.com/micku7zu/vanilla-tilt.js synced 2024-06-09 09:12:13 +02:00
Code Issues Projects Releases Wiki Activity

Support passive event listeners for mouse events

Browse source
This commit is contained in:
arturovt 2022-03-31 09:46:50 +03:00
parent 6315937c6e
commit 04775b4927
2 changed files with 37 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -3,7 +3,7 @@
"version": "1.7.2",
"description": "A smooth 3D tilt javascript library forked from Tilt.js",
"main": "lib/vanilla-tilt.js",
"module_es2015": "lib/vanilla-tilt.es2015.js",
"module": "lib/vanilla-tilt.es2015.js",
"jsnext:main": "lib/vanilla-tilt.es2015.js",
"distrib": "dist/vanilla-tilt.js",
"types": "vanilla-tilt.d.ts",

43
src/vanilla-tilt.js
View file

@ -5,6 +5,11 @@
* Version 1.7.2
*/
/** Options used to bind passive event listeners. */
const passiveEventListenerOptions = supportsPassiveEventListeners()
? { passive: true }
: false;
export default class VanillaTilt {
constructor(element, settings = {}) {
if (!(element instanceof Node)) {
@ -86,7 +91,6 @@ export default class VanillaTilt {
/**
* Method set listen methods for this.elementListener
* @return {Node}
*/
addEventListeners() {
this.onMouseEnterBind = this.onMouseEnter.bind(this);
@ -95,9 +99,9 @@ export default class VanillaTilt {
this.onWindowResizeBind = this.onWindowResize.bind(this);
this.onDeviceOrientationBind = this.onDeviceOrientation.bind(this);
this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind);
this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind, passiveEventListenerOptions);
this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind, passiveEventListenerOptions);
this.elementListener.addEventListener("mousemove", this.onMouseMoveBind, passiveEventListenerOptions);
if (this.glare || this.fullPageListening) {
window.addEventListener("resize", this.onWindowResizeBind);
@ -112,9 +116,9 @@ export default class VanillaTilt {
* Method remove event listeners from current this.elementListener
*/
removeEventListeners() {
this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind);
this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind, passiveEventListenerOptions);
this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind, passiveEventListenerOptions);
this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind, passiveEventListenerOptions);
if (this.gyroscope) {
window.removeEventListener("deviceorientation", this.onDeviceOrientationBind);
@ -493,6 +497,31 @@ export default class VanillaTilt {
}
}
/**
* Checks whether the user's browser supports passive event listeners.
* See: https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
* @returns {boolean}
*/
function supportsPassiveEventListeners() {
let supportsPassiveEvents;
if (typeof window !== "undefined") {
try {
window.addEventListener(
"test",
null,
Object.defineProperty({}, "passive", {
get: () => (supportsPassiveEvents = true),
})
);
} finally {
supportsPassiveEvents = supportsPassiveEvents || false;
}
}
return supportsPassiveEvents;
}
if (typeof document !== "undefined") {
/* expose the class to window */
window.VanillaTilt = VanillaTilt;