Fixed #1455: allow vertical panning of the web page on touch devices

HISTORY.md

@@ -20,6 +20,7 @@ http://visjs.org
 
 - Implemented `currentTimeTick` event (see #1683).
 - Fixed #1630: method `getItemRange` missing in docs.
+- Fixed #1455: allow vertical panning of the web page on touch devices.
 
 ### Graph2d
 

lib/hammerUtil.js

@@ -46,3 +46,20 @@ exports.offTouch = function (hammer, callback) {
  * @param {function} callback   Callback, called as callback(event)
  */
 exports.offRelease = exports.offTouch;
+
+/**
+ * Hack the PinchRecognizer such that it doesn't prevent default behavior
+ * for vertical panning.
+ * @param {Hammer.Pinch} pinchRecognizer
+ * @return {Hammer.Pinch} returns the pinchRecognizer
+ */
+exports.disablePreventDefaultVertically = function (pinchRecognizer) {
+  var TOUCH_ACTION_PAN_Y = 'pan-y';
+
+  pinchRecognizer.getTouchAction = function() {
+    // default method returns [TOUCH_ACTION_NONE]
+    return [TOUCH_ACTION_PAN_Y];
+  };
+
+  return pinchRecognizer;
+};

lib/network/modules/Canvas.js

@@ -222,7 +222,7 @@ class Canvas {
     this.hammer = new Hammer(this.frame.canvas);
     this.hammer.get('pinch').set({enable: true});
     // enable to get better response, todo: test on mobile.
-    this.hammer.get('pan').set({threshold:5, direction:30}); // 30 is ALL_DIRECTIONS in hammer.
+    this.hammer.get('pan').set({threshold:5, direction: Hammer.DIRECTION_ALL});
 
     hammerUtil.onTouch(this.hammer, (event) => {this.body.eventListeners.onTouch(event)});
     this.hammer.on('tap',       (event) => {this.body.eventListeners.onTap(event)});

lib/timeline/Core.js

@@ -118,8 +118,9 @@ Core.prototype._create = function (container) {
   // create event listeners for all interesting events, these events will be
   // emitted via emitter
   this.hammer = new Hammer(this.dom.root);
-  this.hammer.get('pinch').set({enable: true});
-  this.hammer.get('pan').set({threshold:5, direction:30}); // 30 is ALL_DIRECTIONS in hammer.
+  var pinchRecognizer = this.hammer.get('pinch').set({enable: true});
+  hammerUtil.disablePreventDefaultVertically(pinchRecognizer);
+  this.hammer.get('pan').set({threshold:5, direction: Hammer.DIRECTION_HORIZONTAL});
   this.listeners = {};
 
   var events = [
@@ -768,6 +769,12 @@ Core.prototype._redraw = function() {
   dom.shadowTopRight.style.visibility     = visibilityTop;
   dom.shadowBottomRight.style.visibility  = visibilityBottom;
 
+  // enable/disable vertical panning
+  var contentsOverflow = this.props.center.height > this.props.centerContainer.height;
+  this.hammer.get('pan').set({
+    direction: contentsOverflow ? Hammer.DIRECTION_ALL : Hammer.DIRECTION_HORIZONTAL
+  });
+
   // redraw all components
   this.components.forEach(function (component) {
     resized = component.redraw() || resized;

lib/timeline/component/CustomTime.js

@@ -84,7 +84,7 @@ CustomTime.prototype._create = function() {
   this.hammer.on('panstart', this._onDragStart.bind(this));
   this.hammer.on('panmove',  this._onDrag.bind(this));
   this.hammer.on('panend',   this._onDragEnd.bind(this));
-  this.hammer.get('pan').set({threshold:5, direction:30}); // 30 is ALL_DIRECTIONS in hammer.
+  this.hammer.get('pan').set({threshold:5, direction: Hammer.DIRECTION_HORIZONTAL});
 };
 
 /**

lib/timeline/component/ItemSet.js

@@ -220,7 +220,7 @@ ItemSet.prototype._create = function(){
   this.hammer.on('panstart', this._onDragStart.bind(this));
   this.hammer.on('panmove',  this._onDrag.bind(this));
   this.hammer.on('panend',   this._onDragEnd.bind(this));
-  this.hammer.get('pan').set({threshold:5, direction:30}); // 30 is ALL_DIRECTIONS in hammer.
+  this.hammer.get('pan').set({threshold:5, direction: Hammer.DIRECTION_HORIZONTAL});
 
   // single select (or unselect) when tapping an item
   this.hammer.on('tap',  this._onSelectItem.bind(this));
@@ -235,7 +235,7 @@ ItemSet.prototype._create = function(){
   this.groupHammer.on('panstart', this._onGroupDragStart.bind(this));
   this.groupHammer.on('panmove',  this._onGroupDrag.bind(this));
   this.groupHammer.on('panend',   this._onGroupDragEnd.bind(this));
-  this.groupHammer.get('pan').set({threshold:5, direction:30});
+  this.groupHammer.get('pan').set({threshold:5, direction: Hammer.DIRECTION_HORIZONTAL});
   
   // attach to the DOM
   this.show();