Create a gist now

Instantly share code, notes, and snippets.

Sencha Touch 2 MouseWheelDrag Recognizer
/**
* @author Jacky Nguyen
* @class Ux.event.recognizer.MouseWheelDrag
*
* Ext.Loader.setPath('Ux', '/path/to/your/app/ux');
*
* Ext.application({
* // ...
* eventPublishers: {
* touchGesture: {
* recognizers: {
* mousewheeldrag: {
* xclass: 'Ux.event.recognizer.MouseWheelDrag'
* }
* }
* }
* }
* // ...
* })
*/
Ext.define('Ux.event.recognizer.MouseWheelDrag', {
extend: 'Ext.event.recognizer.Touch',
requires: ['Ext.event.Dom'],
handledEvents: ['dragstart', 'drag', 'dragend'],
constructor: function() {
this.callParent(arguments);
this.onMouseWheel = Ext.Function.bind(this.onMouseWheel, this);
this.fireDragEnd = Ext.Function.bind(this.fireDragEnd, this);
document.addEventListener('mousewheel', this.onMouseWheel, true);
},
onMouseWheel: function(e) {
var helper = Ext.event.publisher.Dom.prototype,
target = helper.getElementTarget(e.target),
targets = helper.getBubblingTargets(target),
deltaX = e.hasOwnProperty('wheelDeltaX') ? e.wheelDeltaX : e.wheelDelta,
deltaY = e.hasOwnProperty('wheelDeltaY') ? e.wheelDeltaY : e.wheelDelta,
touches = [{
targets: targets
}],
lastPoint, time;
e = new Ext.event.Dom(e);
time = e.time;
this.lastEvent = e;
this.lastTouches = touches;
if (!this.startPoint) {
this.startTime = time;
this.startPoint = lastPoint = {
x: e.pageX,
y: e.pageY
};
this.previousPoint = lastPoint;
this.previousTime = time;
this.lastPoint = lastPoint;
this.lastTime = time;
this.fire('dragstart', e, touches, this.getInfo(e));
}
lastPoint = this.lastPoint;
this.previousTime = this.lastTime;
this.previousPoint = lastPoint;
this.lastPoint = {
x: lastPoint.x + deltaX,
y: lastPoint.y + deltaY
};
this.lastTime = time;
this.fire('drag', e, touches, this.getInfo(e));
clearTimeout(this.dragEndTimer);
this.dragEndTimer = setTimeout(this.fireDragEnd, 350);
},
fireDragEnd: function() {
var e = this.lastEvent;
this.fire('dragend', e, this.lastTouches, this.getInfo(e));
this.startTime = 0;
this.previousTime = 0;
this.lastTime = 0;
this.startPoint = null;
this.previousPoint = null;
this.lastPoint = null;
this.lastMoveEvent = null;
this.lastEvent = null;
this.lastTouches = null;
},
getInfo: function(e, touch) {
return Ext.event.recognizer.Drag.prototype.getInfo.apply(this, arguments);
}
});
@rangertx

It works nicely! Thank you for posting this.

@melevine

It looks like this no longer works with sencha touch 2.2. I'm seeing this error when using the mouse wheel:

Uncaught TypeError: Cannot call method 'apply' of undefined MouseWheelDrag.js:106
Ext.define.getInfo MouseWheelDrag.js:106
Ext.define.onMouseWheel MouseWheelDrag.js:82
(anonymous function)

@mobile4me

ERROR!!!
Uncaught TypeError: Cannot call method 'apply' of undefined MouseWheelDrag.js:105
Ext.define.getInfo MouseWheelDrag.js:105
Ext.define.onMouseWheel MouseWheelDrag.js:81
(anonymous function)

@kirill-konshin

https://gist.github.com/kirill-konshin/6197497 - proper getInfo function for 2.2.x...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment