Meteor/Cordova gesture with hammer.js

Question

I need to add gestures in my Meteor app. I don't understand how.

Now I have put my code in Template.XX.rendered and than I call the gesture inside the events scope:

Session.setDefault('deletable', false);

Template.xx.rendered = function(){
  $('body').hammer();
};

Template.xx.events({
'swipeleft #hammerDiv': function(e, t) {
    Session.set('deletable', true);
  },
  'swiperight #hammerDiv': function(e, t) {
    Session.set('deletable', false);
  }
});

Template.territories.helpers({
  deleteButton : function(){
    return Session.get('deletable');
  }
});

this simple code make possible to appear a delete button in the swiped item. All seems to work with chrome and mouse swipe, but when I emulate the app in my android device (meteor run android-device), swipe gesture don't works. If I test in my device with Chrome browser all works done.

Is there any compatibility problem? Is my code wrong? Any suggestions?

Thanks a lot!

Answer 1

I found the definitive solution that works for me:

1. I changed hammer() properties set to a fast swipe and touch;
2. I've added preventDefault() in each swipe events;
3. Set is now set to pass this._id to the helper to check if the swiped item has the same object id and then, if true, it shows delete button.

The code:

Session.setDefault('deletable', null);

Template.xx.rendered = function(){
  $('body').hammer({
    drag_min_distance:1,
    swipe_velocity:0.1
  });
};

Template.xx.events({
'swipeleft #hammerDiv': function(e, t) {
    e.preventDefault();
    Session.set('deletable', null);
  },
'swiperight #hammerDiv': function(e, t) {
    e.preventDefault();
    Session.set('deletable', this._id);
  }
});

Template.xx.helpers({
  deleteButton : function(){
    var thisItem = Session.get('deletable');
    if (thisItem == this._id){
      return true
    }else{
      return false;
    }
  }
});

Alternatively, instead of apply preventDefault() within events, it's possible to change the hammer() target and add a new property like this:

 $('#hammerDiv').hammer({
    drag_min_distance:1,
    swipe_velocity:0.1
    prevent_default:true
  });