chriswessels / ember-hammer

ember-hammer is a neat interface for defining Hammer.js gestural behaviour in your Ember.js Views.

Home Page:https://github.com/chriswessels/ember-hammer

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Support event bubbling

hakubo opened this issue · comments

Hey,

do you plan to add event bubbling?
so we could have:

App.ViewA = Em.View.extend({
  gestures: {
    tap: function() {
       //this should run also
    }
  }
})

App.ViewB = App.ViewA.extend({
  gestures: {
    tap: function() {
      //so this run.
      return true;
    }
  }
})

Hi @hakubo

I haven't tested event bubbling with Hammer.js 2.x, however you should definitely get your expected behaviour with Hammer.js 1.x.

A touch event will bubble from the inner most nested element, all the way up to the ApplicationView, unless you return false; in one of your callbacks (this will cancel the bubbling).

Chris

mhm
I am using 2.0.3,

maybe that is why it does not work.
I will have a look around in free time.

Thanks!
Nice work.

oh while we talk
is there a chance for this to work:

{{action 'doSomethingOnTap' on='tap'}}

Unfortunately that method of attached touch behaviour is currently not supported. If you look at the source, you'll see how ember-hammer hooks into Ember.View specifically. The on syntax probably requires Ember's event dispatcher to be listening for touch events, but ember-hammer disables this for performance reasons (since you're using Hammer for detecting touch gestures).

Disclaimer, untested, theoretical solution

You could work around this by create a generic handlebars block helper which you could use to wrap arbitrary content and catch/forward gesture/touch events to another view or the controller. Usage might look something like this:

{{#touchControlWrapper gestureToCatch='tap' forwardToControllerAction='doSomethingOnTap'}}
  ... HTML ...
{{/touchControlWrapper}}

So what you're doing is creating a generic view object (which lets you use ember-hammer to actually catch the touch events) that functions as a proxy which you can use to wrap any content and forward the touch events through to the controller, like with {{action}}.

Hope that helps...

Chris