Unable to catch vertical swipe/drag events

Hello, I’m trying to catch swipeup and swipedown events on some div element - the problem is that (swipeup)='someFunction()' and (swipedown)=someOtherFunction() is not working at all. (swipe)='someFunction()' works fine, but only for left/right swipes. Are these vertical swipes implemented in Ionic 2 at all? Is there any other way to do it?

I had to face this issue today.
It seems that (swipe) doesn’t specify the option DIRECTION_ALL when the HammerJS swipe recognizer is generated so it only works with horizontals swipe by default (according to this: http://hammerjs.github.io/recognizer-swipe/), but I admit I haven’t checked (found) the swipe directive source code.
For implementing vertical swipe I made this directive (I also admit that I probably didn’t follow any sintactic or achitectural best practice - any suggestion is appreciated):

import {Directive, ElementRef, Input, OnInit, OnDestroy} from 'angular2/core'
import {Gesture} from 'ionic-angular/gestures/gesture'
declare var Hammer: any

/*
  Class for the SwipeVertical directive (attribute (swipe) is only horizontal).

  In order to use it you must add swipe-vertical attribute to the component.
  The directives for binding functions are [swipeUp] and [swipeDown].

  IMPORTANT:
  [swipeUp] and [swipeDown] MUST be added in a component which
  already has "swipe-vertical".
*/

@Directive({
  selector: '[swipe-vertical]' // Attribute selector
})
export class SwipeVertical implements OnInit, OnDestroy {
  @Input('swipeUp') actionUp: any;
  @Input('swipeDown') actionDown: any;

  private el: HTMLElement
  private swipeGesture: Gesture
  private swipeDownGesture: Gesture

  constructor(el: ElementRef) {
    this.el = el.nativeElement
  }

  ngOnInit() {
    this.swipeGesture = new Gesture(this.el, {
      recognizers: [
        [Hammer.Swipe, {direction: Hammer.DIRECTION_VERTICAL}]
      ]
    });
    this.swipeGesture.listen()
    this.swipeGesture.on('swipeup', e => {
      this.actionUp()
    })
    this.swipeGesture.on('swipedown', e => {
      this.actionDown()
    })
  }

  ngOnDestroy() {
    this.swipeGesture.destroy()
  }
}

This code allows you to do something like this:
<div swipe-vertical [swipeUp]="mySwipeUpAction()" [swipeDown]="mySwipeDownAction()">

It just seems to work. Hope this helps!

2 Likes

Thangs @agomik!

With few modifications, your directive has been very useful to me.

I’m very happy hearing this! If you want, you could publish the corrections

OK, my purpose was to detect any user interaction with the device (vertically or horizontally) to automatically log out after few minutes of inactivity. So, my directive has been like this:

import {Directive, ElementRef, OnInit, OnDestroy} from 'angular2/core';
import {Events} from 'ionic-angular';
import {Gesture} from 'ionic-angular/gestures/gesture';
declare var Hammer: any;

@Directive({
    selector: '[swipe-listener]'
})
export class SwipeListener implements OnInit, OnDestroy {      

    private el: HTMLElement;
    private swipeGesture: Gesture;

    constructor(el: ElementRef,  public events: Events) {
        this.el = el.nativeElement;
        this.events = events;
    }
    ngOnInit() {
        this.swipeGesture = new Gesture(this.el, {
            recognizers: [
                [Hammer.Swipe, {direction: Hammer.DIRECTION_ALL}]
            ]
        });
        this.swipeGesture.listen();
        this.swipeGesture.on('swipe', e => {
            // Publish event when swipe is detected.
            this.events.publish('event:swipe');
        });
    }

    ngOnDestroy() {
        this.swipeGesture.destroy();
    }

}

Hello, very nice what you did, a need that.
I try do this in beta 11, but didn’t work, can you please help me?

The error:
Error: Uncaught (in promise): Template parse errors:
Can’t bind to ‘swipeUp’ since it isn’t a known native property ("" id =“content” style="overflow: hidden; position: fixed; ">

Thank you

Thankyou for this directive agomik.

I can’t get it started and I think it’s to do with imports.

I had to change the first line to
import {Directive, ElementRef, Input, OnInit, OnDestroy} from ‘@angular/core’;

(not angular2/core).

But I still can’t get Gesture to be found in the code:
import {Gesture} from ‘@ionic-angular/gestures/gesture’;

this doesn’t give an error on that line, but in the code is says Gesture can’t be found. Does anyone know if the import reference has changed lately?

Thanks

1 Like

Hi,

No your import seems good, I have exactly the same in my code currently and no problem. Maybe you should check your ionic version.
Edit: I don’t see it first but you don’t need the “@” at the beginning of the path:
import {Gesture} from ‘ionic-angular/gestures/gesture’;

For a working example of this directive you can check this thread: Gestures Swype Up and Swype Down how to enable?
You’ll find a plunker, currently plnkr.co is down but I guess he will be back soon.

1 Like

Thanks Eclek I have it working now. Not sure I understand it yet but I’ll keep studying :joy:

I don’t know why but I typed corrections from the example and still had the same problem, but when I cut and paste the whole thing it worked - maybe there must have been a stray character in there.

1 Like

Hi !
Is this code in anyway still valid ? I think it’s a little bit outdated…

I asked a question on stackoverflow, maybe you could give me a little tip how to make this directive working ? :blush:
It’s on http://stackoverflow.com/questions/42610079/angular-2-ionic-create-a-new-directive

Thank you very much !

follow this answer and no more directive need.

How can I get the current swipe index also the parameter.

Hi! Where i can find documentation about swipe event ? thx