Halfway implementing hammerjs2 for Timeline

lib/timeline/Core.js

@@ -113,16 +113,17 @@ Core.prototype._create = function (container) {
 
   // create event listeners for all interesting events, these events will be
   // emitted via emitter
-  this.hammer = Hammer(this.dom.root, {
-    preventDefault: true
-  });
+  this.hammer = new Hammer(this.dom.root);
   this.listeners = {};
 
   var events = [
-    'touch', 'pinch',
-    'tap', 'doubletap', 'hold',
-    'dragstart', 'drag', 'dragend',
-    'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
+    'tap', 'pinch', 'press',
+    'panstart', 'panmove', 'panend'
+      // TODO: mouse wheel
+    //'touch', 'pinch',
+    //'tap', 'doubletap', 'hold',
+    //'dragstart', 'drag', 'dragend',
+    //'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
   ];
   events.forEach(function (event) {
     var listener = function () {
@@ -810,7 +811,7 @@ Core.prototype._onDrag = function (event) {
   // when releasing the fingers in opposite order from the touch screen
   if (!this.touch.allowDragging) return;
 
-  var delta = event.gesture.deltaY;
+  var delta = event.deltaY;
 
   var oldScrollTop = this._getScrollTop();
   var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);

lib/timeline/Range.js

@@ -43,12 +43,12 @@ function Range(body, options) {
   this.animateTimer = null;
 
   // drag listeners for dragging
-  this.body.emitter.on('dragstart', this._onDragStart.bind(this));
-  this.body.emitter.on('drag',      this._onDrag.bind(this));
-  this.body.emitter.on('dragend',   this._onDragEnd.bind(this));
+  this.body.emitter.on('panstart', this._onDragStart.bind(this));
+  this.body.emitter.on('panmove',  this._onDrag.bind(this));
+  this.body.emitter.on('panend',   this._onDragEnd.bind(this));
 
   // ignore dragging when holding
-  this.body.emitter.on('hold', this._onHold.bind(this));
+  this.body.emitter.on('press', this._onHold.bind(this));
 
   // mouse wheel for zooming
   this.body.emitter.on('mousewheel',      this._onMouseWheel.bind(this));

lib/timeline/component/CustomTime.js

@@ -68,12 +68,10 @@ CustomTime.prototype._create = function() {
   bar.appendChild(drag);
 
   // attach event listeners
-  this.hammer = Hammer(bar, {
-    prevent_default: true
-  });
-  this.hammer.on('dragstart', this._onDragStart.bind(this));
-  this.hammer.on('drag',      this._onDrag.bind(this));
-  this.hammer.on('dragend',   this._onDragEnd.bind(this));
+  this.hammer = new Hammer(drag);
+  this.hammer.on('panstart', this._onDragStart.bind(this));
+  this.hammer.on('panmove',      this._onDrag.bind(this));
+  this.hammer.on('panend',   this._onDragEnd.bind(this));
 };
 
 /**
@@ -149,7 +147,7 @@ CustomTime.prototype._onDragStart = function(event) {
   this.eventParams.dragging = true;
   this.eventParams.customTime = this.customTime;
 
-  event.stopPropagation();
+  //event.stopPropagation();
   event.preventDefault();
 };
 
@@ -161,9 +159,8 @@ CustomTime.prototype._onDragStart = function(event) {
 CustomTime.prototype._onDrag = function (event) {
   if (!this.eventParams.dragging) return;
 
-  var deltaX = event.gesture.deltaX,
-      x = this.body.util.toScreen(this.eventParams.customTime) + deltaX,
-      time = this.body.util.toTime(x);
+  var x = this.body.util.toScreen(this.eventParams.customTime) + event.deltaX;
+  var time = this.body.util.toTime(x);
 
   this.setCustomTime(time);
 
@@ -172,13 +169,13 @@ CustomTime.prototype._onDrag = function (event) {
     time: new Date(this.customTime.valueOf())
   });
 
-  event.stopPropagation();
+  //event.stopPropagation();
   event.preventDefault();
 };
 
 /**
  * Stop moving operating.
- * @param {event} event
+ * @param {Event} event
  * @private
  */
 CustomTime.prototype._onDragEnd = function (event) {
@@ -189,7 +186,7 @@ CustomTime.prototype._onDragEnd = function (event) {
     time: new Date(this.customTime.valueOf())
   });
 
-  event.stopPropagation();
+  //event.stopPropagation();
   event.preventDefault();
 };
 

lib/timeline/component/ItemSet.js

@@ -181,21 +181,19 @@ ItemSet.prototype._create = function(){
   // Note: we bind to the centerContainer for the case where the height
   //       of the center container is larger than of the ItemSet, so we
   //       can click in the empty area to create a new item or deselect an item.
-  this.hammer = Hammer(this.body.dom.centerContainer, {
-    preventDefault: true
-  });
+  this.hammer = new Hammer(this.body.dom.centerContainer);
 
   // drag items when selected
-  this.hammer.on('touch',     this._onTouch.bind(this));
-  this.hammer.on('dragstart', this._onDragStart.bind(this));
-  this.hammer.on('drag',      this._onDrag.bind(this));
-  this.hammer.on('dragend',   this._onDragEnd.bind(this));
+  this.hammer.on('pandown',  this._onTouch.bind(this));
+  this.hammer.on('panstart', this._onDragStart.bind(this));
+  this.hammer.on('panmove',  this._onDrag.bind(this));
+  this.hammer.on('panend',   this._onDragEnd.bind(this));
 
   // single select (or unselect) when tapping an item
   this.hammer.on('tap',  this._onSelectItem.bind(this));
 
   // multi select when holding mouse/touch, or on ctrl+click
-  this.hammer.on('hold', this._onMultiSelectItem.bind(this));
+  this.hammer.on('press', this._onMultiSelectItem.bind(this));
 
   // add item on doubletap
   this.hammer.on('doubletap', this._onAddItem.bind(this));
@@ -1063,7 +1061,7 @@ ItemSet.prototype._constructByEndArray = function(array) {
  * Register the clicked item on touch, before dragStart is initiated.
  *
  * dragStart is initiated from a mousemove event, which can have left the item
- * already resulting in an item == null
+ * already, resulting in an item == null
  *
  * @param {Event} event
  * @private
@@ -1071,6 +1069,7 @@ ItemSet.prototype._constructByEndArray = function(array) {
 ItemSet.prototype._onTouch = function (event) {
   // store the touched item, used in _onDragStart
   this.touchParams.item = ItemSet.itemFromTarget(event);
+  console.log('pandown')
 };
 
 /**
@@ -1083,6 +1082,11 @@ ItemSet.prototype._onDragStart = function (event) {
     return;
   }
 
+  // TODO: test if this works ok
+  this.touchParams.item = ItemSet.itemFromTarget(event);
+
+  console.log('item', this.touchParams.item)
+
   var item = this.touchParams.item || null;
   var me = this;
   var props;
@@ -1094,7 +1098,7 @@ ItemSet.prototype._onDragStart = function (event) {
     if (dragLeftItem) {
       props = {
         item: dragLeftItem,
-        initialX: event.gesture.center.clientX
+        initialX: event.center.x
       };
 
       if (me.options.editable.updateTime) {
@@ -1109,7 +1113,7 @@ ItemSet.prototype._onDragStart = function (event) {
     else if (dragRightItem) {
       props = {
         item: dragRightItem,
-        initialX: event.gesture.center.clientX
+        initialX: event.center.x
       };
 
       if (me.options.editable.updateTime) {
@@ -1126,7 +1130,7 @@ ItemSet.prototype._onDragStart = function (event) {
         var item = me.items[id];
         var props = {
           item: item,
-          initialX: event.gesture.center.clientX
+          initialX: event.center.x
         };
 
         if (me.options.editable.updateTime) {
@@ -1141,7 +1145,7 @@ ItemSet.prototype._onDragStart = function (event) {
       });
     }
 
-    event.stopPropagation();
+    //event.stopPropagation();
   }
 };
 
@@ -1161,7 +1165,7 @@ ItemSet.prototype._onDrag = function (event) {
     // move
     this.touchParams.itemProps.forEach(function (props) {
       var newProps = {};
-      var current = me.body.util.toTime(event.gesture.center.clientX - xOffset);
+      var current = me.body.util.toTime(event.center.x - xOffset);
       var initial = me.body.util.toTime(props.initialX - xOffset);
       var offset = current - initial;
 
@@ -1193,7 +1197,7 @@ ItemSet.prototype._onDrag = function (event) {
     this.stackDirty = true; // force re-stacking of all items next redraw
     this.body.emitter.emit('change');
 
-    event.stopPropagation();
+    //event.stopPropagation();
   }
 };
 
@@ -1291,7 +1295,7 @@ ItemSet.prototype._onDragEnd = function (event) {
       dataset.update(changes);
     }
 
-    event.stopPropagation();
+    //event.stopPropagation();
   }
 };
 
@@ -1303,8 +1307,8 @@ ItemSet.prototype._onDragEnd = function (event) {
 ItemSet.prototype._onSelectItem = function (event) {
   if (!this.options.selectable) return;
 
-  var ctrlKey  = event.gesture.srcEvent && event.gesture.srcEvent.ctrlKey;
-  var shiftKey = event.gesture.srcEvent && event.gesture.srcEvent.shiftKey;
+  var ctrlKey  = event.srcEvent && event.srcEvent.ctrlKey;
+  var shiftKey = event.srcEvent && event.srcEvent.shiftKey;
   if (ctrlKey || shiftKey) {
     this._onMultiSelectItem(event);
     return;
@@ -1354,7 +1358,7 @@ ItemSet.prototype._onAddItem = function (event) {
   else {
     // add item
     var xAbs = util.getAbsoluteLeft(this.dom.frame);
-    var x = event.gesture.center.pageX - xAbs;
+    var x = event.center.x - xAbs;
     var start = this.body.util.toTime(x);
     var newItem = {
       start: snap ? snap(start) : start,
@@ -1399,7 +1403,7 @@ ItemSet.prototype._onMultiSelectItem = function (event) {
     // multi select items
     selection = this.getSelection(); // current selection
 
-    var shiftKey = event.gesture.touches[0] && event.gesture.touches[0].shiftKey || false;
+    var shiftKey = event.srcEvent && event.srcEvent.shiftKey || false;
     if (shiftKey) {
       // select all items between the old selection and the tapped item
 

lib/timeline/component/item/Item.js

@@ -137,11 +137,10 @@ Item.prototype._repaintDeleteButton = function (anchor) {
     deleteButton.className = 'delete';
     deleteButton.title = 'Delete this item';
 
-    Hammer(deleteButton, {
-      preventDefault: true
-    }).on('tap', function (event) {
+    // TODO: neatly handle button click
+    new Hammer(deleteButton).on('tap', function (event) {
       me.parent.removeFromDataSet(me);
-      event.stopPropagation();
+      event.srcEvent.stopPropagation();
     });
 
     anchor.appendChild(deleteButton);

package.json

@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "emitter-component": "^1.1.1",
-    "hammerjs": "^1.1.0",
+    "hammerjs": "^2.0.4",
     "moment": "^2.7.0",
     "keycharm": "^0.1.6"
   },