feat(mobile): add touch delay to allow scroll on mobile (#315)

Author: begner

README.md

@@ -108,8 +108,9 @@ var options = {
 	hoverDelay: 0,
 	// An optional number that determines how long to wait before
 	// showing the ZoomPane because of a `touchstart` event.
-	// It's unlikely that you would want to use this option, since
-	// "tap and hold" is much more intentional than a hover event.
+	// Setting this to a reasonable amount will allow users to execute
+	// scroll-gestures events on touch-enabled devices with the image as
+	// a starting point
 	touchDelay: 0,
 	// If true, a bounding box will show the area currently being previewed
 	// during mouse hover

src/js/Trigger.js

@@ -61,6 +61,16 @@ export default class Trigger {
     event.preventDefault();
   }
 
+  _preventDefaultAllowTouchScroll(event) {
+    if (!this.settings.touchDelay || !this._isTouchEvent(event) || this.isShowing) {
+      event.preventDefault();
+    }
+  }
+
+  _isTouchEvent(event) {
+    return !!event.touches;
+  }
+
   _bindEvents() {
     this.settings.el.addEventListener("mouseenter", this._handleEntry, false);
     this.settings.el.addEventListener("mouseleave", this._hide, false);
@@ -94,7 +104,7 @@ export default class Trigger {
   }
 
   _handleEntry(e) {
-    e.preventDefault();
+    this._preventDefaultAllowTouchScroll(e);
     this._lastMovement = e;
 
     if (e.type == "mouseenter" && this.settings.hoverDelay) {
@@ -134,7 +144,7 @@ export default class Trigger {
 
   _hide(e) {
     if (e) {
-      e.preventDefault();
+      this._preventDefaultAllowTouchScroll(e);
     }
 
     this._lastMovement = null;
@@ -157,7 +167,7 @@ export default class Trigger {
 
   _handleMovement(e) {
     if (e) {
-      e.preventDefault();
+      this._preventDefaultAllowTouchScroll(e);
       this._lastMovement = e;
     } else if (this._lastMovement) {
       e = this._lastMovement;