Touch based actions

1

I am developing an Ember.js application that will be run on touch devices. At this moment I am only targeting iOS devices (iPhone, iPad). When using an action, this action is not always triggered on the controller.

Example: the touchend action is always triggered when I log on jQuery’s on('touchEnd') event. The toggleDepartments controller action is not always triggered.

<button {{action 'toggleDepartments' bubbles=false}}>
  <img src="hamburger.png" />
</button>

When I add specify the type of event and add on=touchEnd, the action is always triggered and feels very snappy.

<button {{action 'toggleDepartments' bubbles=false on=touchEnd}}>
  <img src="hamburger.png" />
</button>

Is there a way that I can specify every action must act on the touchEnd event?

1 Like
2

I’m curious to know the answer to this one as well. I’d wager that it would have to do with reopening Ember.Controller or something.

3

It doesn’t look like you’ll be able to change the default as it’s hard-coded to be a click event by default.

It might be worth making a component to do this…syntax will be a little different in Handlebars, but the result is more or less the same:

// components/touch-action.js
export default Ember.Component.extend({
  action: null,
  touchEnd: function() {
    this.sendAction('action');
    return false;
  }
});

// templates/
{{#touch-action 'toggleDepartments' tagName='button'}}
  <img src="hamburger.png" />
{{/touch-action}}
4

I use fastclick transform touch events into tap events, then map the tap event onto click event handlers in Application.

// ... snip ...
var App = Ember.Application.extend({
  customEvents: {
    tap: 'click'
  }
});
// ... snip ...

Now you just hit 2 birds with one stone: fast tap action (no 300ms delay) and action trigger by tap.

2 Likes
5

Great, this solution does work!

My issue was related to the combined use with ember-hammer. The issue and the solution is visible here: https://github.com/chriswessels/ember-hammer/issues/8

6

If you’re using ember-cli I’ve built ember-mobiletouch to be a drop-in lib to add full gesture support to your app.

https://github.com/runspired/ember-mobiletouch

2 Likes