From 3b08676a5724f981a1aa84260f26ec17a3331c6a Mon Sep 17 00:00:00 2001 From: jos Date: Thu, 11 Dec 2014 09:45:09 +0100 Subject: [PATCH] Halfway implementing hammerjs2 for Timeline --- lib/timeline/Core.js | 17 ++++++----- lib/timeline/Range.js | 8 ++--- lib/timeline/component/CustomTime.js | 23 +++++++-------- lib/timeline/component/ItemSet.js | 44 +++++++++++++++------------- lib/timeline/component/item/Item.js | 7 ++--- package.json | 2 +- 6 files changed, 51 insertions(+), 50 deletions(-) diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js index 73e40509..8fc5c340 100644 --- a/lib/timeline/Core.js +++ b/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); diff --git a/lib/timeline/Range.js b/lib/timeline/Range.js index 4fa67857..15bd6993 100644 --- a/lib/timeline/Range.js +++ b/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)); diff --git a/lib/timeline/component/CustomTime.js b/lib/timeline/component/CustomTime.js index 44c2a4da..a42e1edf 100644 --- a/lib/timeline/component/CustomTime.js +++ b/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(); }; diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js index 801f38a2..16f7fa56 100644 --- a/lib/timeline/component/ItemSet.js +++ b/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 diff --git a/lib/timeline/component/item/Item.js b/lib/timeline/component/item/Item.js index 9b004970..01e854a0 100644 --- a/lib/timeline/component/item/Item.js +++ b/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); diff --git a/package.json b/package.json index 4a91d9e1..a174e24b 100644 --- a/package.json +++ b/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" },