Swipe and vertical-swipe

[sir-dunxalot]

Cool library!

Currently the default recognizers don't support horizontal and vertical swiping. For example, recognizers: 'vertical-swipe swipe', results in just horizontal swipe event firing and recognizers: 'swipe vertical-swipe ', result in just vertical swipe events firing.

I'm hoping to be able write my own recognizer for a four-way swipe but I would expect the default recognizers to be compatible with one another.

[sir-dunxalot]

My attempt to implement horizontal and vertical swiping listeners on the same component went as follows:

// my-project/app/ember-gestures/recognizers/four-way-swipe.js
export default {
  include: [],
  exclude: [],
  options: { threshold: 25 },
  recognizer: 'swipe'
};

And my component...

import RecognizerMixin from 'ember-gestures/mixins/recognizers';

const { $, computed } = Ember;

export default Ember.Component.extend(
  RecognizerMixin, {

  recognizers: 'four-way-swipe',

  swipeDown() {},
  swipeLeft() {},
  swipeRight() {},
  swipeUp() {},
}

Unfortunately, none of the methods above are called. At least two are called when I replace recognizers with recognizers: 'swipe', (runs swipeLeft() and swipeRight()) or recognizers: 'vertical-swipe', (runs swipeUp() and swipeDown()).

Is there a shared compatibility issue here or are we looking at two separate issues? Maybe the code outlined in this comment is just me misunderstanding the documentation but I want to keep the thread in one place until we confirm that.

[sir-dunxalot]

Coming full circle, my solution way to name the recognizer swipe. It seems that this library only supports given recognizer names because the event listened for is inherited from the recognizer name.

As such:

// my-project/app/ember-gestures/recognizers/swipe.js
export default {
  include: [],
  exclude: [],
  options: { threshold: 25 },
  recognizer: 'swipe'
};

With: recognizers: 'four-way-swipe', worked for me.

I hope this helps someone in a similar situation.

[runspired]

@sir-dunxalot there's a secret hidden property that lets you inherit but rename, vertical-swipe uses it.

You should have been able to do recognizers: 'swipe vertical-swipe', that you couldn't suggests I need to revisit how they declare support for each other.

[choclaudio]

Any news on this @sir-dunxalot

[jorgelainfiesta]

I couldn't really replicate the solution exposed by @sir-dunxalot, but I was able to use swipeDown and swipeLeft by registering only the 'swipe' recognizer in the component by having a local swipe recognizers in app/ember-gestures/recognizers/four-way-swipe.js

[choclaudio]

Hi @jorgelainfiesta yes, I did the same, and it works like a charm, should have written it here so cudos for your initiative!

[RobbieTheWagner]

Just coming through to clean up some of these lingering issues. @jorgelainfiesta @choclaudio are the solutions you guys used something we should update in this addon or document or does everything work as advertised now?