Browse Source

Replaced mouse events with touch events for CustomTime

css_transitions
josdejong 10 years ago
parent
commit
ca54afe295
3 changed files with 28 additions and 102 deletions
  1. +1
    -1
      src/timeline/Range.js
  2. +27
    -70
      src/timeline/component/CustomTime.js
  3. +0
    -31
      src/util.js

+ 1
- 1
src/timeline/Range.js View File

@ -394,7 +394,7 @@ Range.prototype._onMouseWheel = function(event, component, direction) {
// Prevent default actions caused by mouse wheel // Prevent default actions caused by mouse wheel
// (else the page and timeline both zoom and scroll) // (else the page and timeline both zoom and scroll)
util.preventDefault(event);
event.preventDefault();
}; };
/** /**

+ 27
- 70
src/timeline/component/CustomTime.js View File

@ -44,13 +44,13 @@ CustomTime.prototype.getContainer = function () {
*/ */
CustomTime.prototype.repaint = function () { CustomTime.prototype.repaint = function () {
var bar = this.frame, var bar = this.frame,
parent = this.parent,
parentContainer = parent.parent.getContainer();
parent = this.parent;
if (!parent) { if (!parent) {
throw new Error('Cannot repaint bar: no parent attached'); throw new Error('Cannot repaint bar: no parent attached');
} }
var parentContainer = parent.parent.getContainer();
if (!parentContainer) { if (!parentContainer) {
throw new Error('Cannot repaint bar: parent has no container element'); throw new Error('Cannot repaint bar: parent has no container element');
} }
@ -83,8 +83,13 @@ CustomTime.prototype.repaint = function () {
this.frame = bar; this.frame = bar;
var me = this;
util.addEventListener(bar, 'mousedown', me._onMouseDown.bind(me));
// 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));
} }
if (!parent.conversion) { if (!parent.conversion) {
@ -121,63 +126,24 @@ CustomTime.prototype.getCustomTime = function() {
* @param {Event} event * @param {Event} event
* @private * @private
*/ */
CustomTime.prototype._onMouseDown = function(event) {
event = event || window.event;
// only react on left mouse button down
var leftButtonDown = event.which ? (event.which == 1) : (event.button == 1);
if (!leftButtonDown) {
return;
}
// get mouse position
this.eventParams.mouseX = util.getPageX(event);
this.eventParams.moved = false;
CustomTime.prototype._onDragStart = function(event) {
this.eventParams.customTime = this.customTime; this.eventParams.customTime = this.customTime;
// add event listeners to handle moving the custom time bar
var me = this;
if (!this.eventParams.onMouseMove) {
this.eventParams.onMouseMove = me._onMouseMove.bind(me);
util.addEventListener(document, 'mousemove', this.eventParams.onMouseMove);
}
if (!this.eventParams.onMouseUp) {
this.eventParams.onMouseUp = me._onMouseUp.bind(me);
util.addEventListener(document, 'mouseup', this.eventParams.onMouseUp);
}
util.stopPropagation(event);
util.preventDefault(event);
event.stopPropagation();
event.preventDefault();
}; };
/** /**
* Perform moving operating. * Perform moving operating.
* This function activated from within the function CustomTime._onMouseDown().
* @param {Event} event * @param {Event} event
* @private * @private
*/ */
CustomTime.prototype._onMouseMove = function (event) {
event = event || window.event;
var parent = this.parent;
// calculate change in mouse position
var mouseX = util.getPageX(event);
if (this.eventParams.mouseX === undefined) {
this.eventParams.mouseX = mouseX;
}
CustomTime.prototype._onDrag = function (event) {
var deltaX = event.gesture.deltaX,
x = this.parent.toScreen(this.eventParams.customTime) + deltaX,
time = this.parent.toTime(x);
var diff = mouseX - this.eventParams.mouseX;
// if mouse movement is big enough, register it as a "moved" event
if (Math.abs(diff) >= 1) {
this.eventParams.moved = true;
}
var x = parent.toScreen(this.eventParams.customTime);
var xnew = x + diff;
this.setCustomTime(parent.toTime(xnew));
this.setCustomTime(time);
// fire a timechange event // fire a timechange event
if (this.controller) { if (this.controller) {
@ -186,32 +152,23 @@ CustomTime.prototype._onMouseMove = function (event) {
}) })
} }
util.preventDefault(event);
event.stopPropagation();
event.preventDefault();
}; };
/** /**
* Stop moving operating. * Stop moving operating.
* This function activated from within the function CustomTime._onMouseDown().
* @param {event} event * @param {event} event
* @private * @private
*/ */
CustomTime.prototype._onMouseUp = function (event) {
// remove event listeners here, important for Safari
if (this.eventParams.onMouseMove) {
util.removeEventListener(document, 'mousemove', this.eventParams.onMouseMove);
this.eventParams.onMouseMove = null;
}
if (this.eventParams.onMouseUp) {
util.removeEventListener(document, 'mouseup', this.eventParams.onMouseUp);
this.eventParams.onMouseUp = null;
CustomTime.prototype._onDragEnd = function (event) {
// fire a timechanged event
if (this.controller) {
this.controller.emit('timechanged', {
time: this.customTime
})
} }
if (this.eventParams.moved) {
// fire a timechanged event
if (this.controller) {
this.controller.emit('timechanged', {
time: this.customTime
})
}
}
event.stopPropagation();
event.preventDefault();
}; };

+ 0
- 31
src/util.js View File

@ -533,21 +533,6 @@ util.getTarget = function getTarget(event) {
return target; return target;
}; };
/**
* Stop event propagation
*/
util.stopPropagation = function stopPropagation(event) {
if (!event)
event = window.event;
if (event.stopPropagation) {
event.stopPropagation(); // non-IE browsers
}
else {
event.cancelBubble = true; // IE browsers
}
};
/** /**
* Fake a hammer.js gesture. Event can be a ScrollEvent or MouseMoveEvent * Fake a hammer.js gesture. Event can be a ScrollEvent or MouseMoveEvent
* @param {Element} element * @param {Element} element
@ -564,22 +549,6 @@ util.fakeGesture = function fakeGesture (element, event) {
//return Hammer.event.collectEventData(this, eventType, touches, event); //return Hammer.event.collectEventData(this, eventType, touches, event);
}; };
/**
* Cancels the event if it is cancelable, without stopping further propagation of the event.
*/
util.preventDefault = function preventDefault (event) {
if (!event)
event = window.event;
if (event.preventDefault) {
event.preventDefault(); // non-IE browsers
}
else {
event.returnValue = false; // IE browsers
}
};
util.option = {}; util.option = {};
/** /**

Loading…
Cancel
Save