Unable to catch vertical swipe/drag events

Ionic Framework ionic-v3
1

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?

2

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
3

Thangs @agomik!

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

4

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

5

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();
    }

}
6

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

7

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
8

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
9

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
10

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 !

11

follow this answer and no more directive need.

12

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

13

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