feat(passive): Add passive option for listeners

- Improve performance for mobile devices on touchstart and touchmove
- Eliminate the warning of LightHouse
- No need to pass passive option in removeEventListener

Resolve #640

Author: Brayan Martínez Santana

README.md

@@ -136,6 +136,9 @@ var options = {
 	touchBoundingBox: false,
 	// A DOM element to append the bounding box to.
 	boundingBoxContainer: document.body,
+	// If true, the events related to handleTouch use passive listeners in
+	// order to improve performance for touch devices.
+	handleTouch: false,
 };
 
 new Drift(document.querySelector('img'), options);

src/js/Drift.js

@@ -70,6 +70,9 @@ export default class Drift {
     const touchBoundingBox = options["touchBoundingBox"] || false;
     // A DOM element to append the bounding box to.
     const boundingBoxContainer = options["boundingBoxContainer"] || document.body;
+    // If true, the events related to handleTouch use passive listeners in
+    // order to improve performance for touch devices.
+    const passive = options["passive"] || false;
 
     if (inlinePane !== true && !isDOMElement(paneContainer)) {
       throw new TypeError("`paneContainer` must be a DOM element when `inlinePane !== true`");
@@ -98,6 +101,7 @@ export default class Drift {
       hoverBoundingBox,
       touchBoundingBox,
       boundingBoxContainer,
+      passive,
     };
 
     if (this.settings.injectBaseStyles) {
@@ -152,6 +156,7 @@ export default class Drift {
       namespace: this.settings.namespace,
       zoomFactor: this.settings.zoomFactor,
       boundingBoxContainer: this.settings.boundingBoxContainer,
+      passive: this.settings.passive,
     });
   }
 

src/js/Trigger.js

@@ -22,6 +22,7 @@ export default class Trigger {
       namespace = null,
       zoomFactor = throwIfMissing(),
       boundingBoxContainer = throwIfMissing(),
+      passive = false,
     } = options;
 
     this.settings = {
@@ -38,6 +39,7 @@ export default class Trigger {
       namespace,
       zoomFactor,
       boundingBoxContainer,
+      passive,
     };
 
     if (this.settings.hoverBoundingBox || this.settings.touchBoundingBox) {
@@ -76,14 +78,15 @@ export default class Trigger {
     this.settings.el.addEventListener("mouseleave", this._hide, false);
     this.settings.el.addEventListener("mousemove", this._handleMovement, false);
 
+    const isPassive = { passive: this.settings.passive };
     if (this.settings.handleTouch) {
-      this.settings.el.addEventListener("touchstart", this._handleEntry, false);
+      this.settings.el.addEventListener("touchstart", this._handleEntry, isPassive);
       this.settings.el.addEventListener("touchend", this._hide, false);
-      this.settings.el.addEventListener("touchmove", this._handleMovement, false);
+      this.settings.el.addEventListener("touchmove", this._handleMovement, isPassive);
     } else {
-      this.settings.el.addEventListener("touchstart", this._preventDefault, false);
+      this.settings.el.addEventListener("touchstart", this._preventDefault, isPassive);
       this.settings.el.addEventListener("touchend", this._preventDefault, false);
-      this.settings.el.addEventListener("touchmove", this._preventDefault, false);
+      this.settings.el.addEventListener("touchmove", this._preventDefault, isPassive);
     }
   }