Skip to content

Instantly share code, notes, and snippets.

@manufaktor
Last active December 23, 2015 08:19
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save manufaktor/6606875 to your computer and use it in GitHub Desktop.
Save manufaktor/6606875 to your computer and use it in GitHub Desktop.
Custom events with ember.js and hammer.js
App = Ember.Application.create({
customEvents: {
swipeLeft: 'swipeLeft',
swipeRight: 'swipeRight',
swipeLeftTwoFinger: 'swipeLeftTwoFinger',
swipeRightTwoFinger: 'swipeRightTwoFinger',
dragDown: 'dragDown',
dragUp: 'dragUp',
dragDownTwoFinger: 'dragDownTwoFinger',
dragUpTwoFinger: 'dragUpTwoFinger'
}
});
App.CustomView = Ember.View.extend({
swipeLeft: function(){
console.log('swipeLeft');
},
swipeLeftTwoFinger: function(){
console.log('swipeLeft with two fingers')
},
dragUp: function(){
console.log('dragging up')
},
didInsertElement: function(){
this.gm = new App.GestureManager(this.$())
},
willDestroyElement: function(){
this.gm.destroy();
}
})
//TODO: check scrolling behavior on surface (https://github.com/EightMedia/hammer.js/issues/310)
//TODO: when/where do we unregister the gestures?
App.GestureManager = Ember.Object.extend({
init: function(el){
// el needs to be a jQuery element
this.el = el;
// helper for desktop simulation
// pressing the alt key will simulate
// a second finger in a gesture
var keys = {
'alt': false
};
$('body').keydown(function(e){
keys['alt'] = e.altKey && e.altKey
//console.log(keys)
})
$('body').keyup(function(e){
keys['alt'] = e.altKey && e.altKey
//console.log(keys)
})
this.keys = keys;
// setup hammer js listeners
this.hammerConf = {
// needed, because by default only 1 point
// gestures are accessible
swipe_max_touches: 2
};
this.boundHandleSwipeLeft = _.bind(this.handleSwipeLeft, this);
this.boundHandleSwipeRight = _.bind(this.handleSwipeRight, this);
this.boundHandleSwipeDown = _.bind(this.handleSwipeDown, this);
this.boundHandleDragDown = _.bind(this.handleDragDown, this);
this.boundHandleDragUp = _.bind(this.handleDragUp, this);
this.el.hammer(this.hammerConf).on("swipeleft", this.boundHandleSwipeLeft);
this.el.hammer(this.hammerConf).on("swiperight", this.boundHandleSwipeRight);
this.el.hammer(this.hammerConf).on("swipedown", this.boundHandleSwipeDown);
this.el.hammer(this.hammerConf).on("dragdown", this.boundHandleDragDown);
this.el.hammer(this.hammerConf).on("dragup", this.boundHandleDragUp);
},
destroy: function(){
this.el.hammer(this.hammerConf).off("swipeleft", this.boundHandleSwipeLeft);
this.el.hammer(this.hammerConf).off("swiperight", this.boundHandleSwipeRight);
this.el.hammer(this.hammerConf).off("swipedown", this.boundHandleSwipeDown);
this.el.hammer(this.hammerConf).off("dragdown", this.boundHandleDragDown);
this.el.hammer(this.hammerConf).off("dragup", this.boundHandleDragUp);
this.boundHandleSwipeLeft = null;
this.boundHandleSwipeRight = null;
this.boundHandleSwipeDown = null;
this.boundHandleDragDown = null;
this.boundHandleDragUp = null;
},
isTwoFinger: function(e){
var multiPoint = e.gesture.touches.length > 1;
//console.log("points:", e.gesture.touches.length)
if(this.keys['alt'] == true){
multiPoint = true;
}
return multiPoint;
},
handleSwipeLeft: function(e){
e.type = this.isTwoFinger(e) ? 'swipeLeftTwoFinger' : 'swipeLeft'
this.el.trigger(e)
},
handleSwipeRight: function(e){
e.type = this.isTwoFinger(e) ? 'swipeRightTwoFinger' : 'swipeRight'
this.el.trigger(e)
},
handleSwipeDown: function(e){
e.type = this.isTwoFinger(e) ? 'swipeDownTwoFinger' : 'swipeDown'
this.el.trigger(e)
},
handleDragDown: function(e){
e.type = this.isTwoFinger(e) ? 'dragDownTwoFinger' : 'dragDown'
this.el.trigger(e)
},
handleDragUp: function(e){
e.type = this.isTwoFinger(e) ? 'dragUpTwoFinger' : 'dragUp'
this.el.trigger(e)
}
})
@chriswessels
Copy link

This may help those looking to respond to gestural touch events in their Ember.js views using Hammer.js as the gesture engine: https://github.com/chriswessels/ember-hammer

(Disclaimer: I am the author of this project)

@ppcano
Copy link

ppcano commented May 20, 2014

Here, another gist with my integration example.

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