You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Versions:
hammerjs: ^2.0.8
With Angular: "^15.2.8"
Issue description:
I have a gallery component with a main image. I implemented a directive using hammerjs to support swipe left right to switch images (next/prev) and it works perfectly.
However, doing this disabled the native functionality that existed prior to this change to pinch in and out to zoom.
The pinch operation works on any other location on the page except the img for which I used the directive.
Here is the directive (note I tried with/without touch action auto and with/without disabling pinch for hammer):
import { Directive, Output, EventEmitter, ElementRef, Renderer2, AfterViewInit } from '@angular/core';
import * as Hammer from 'hammerjs';
@directive({
selector: '[appSwipe]',
})
export class GestureDirective implements AfterViewInit { @output() swipeLeft = new EventEmitter(); @output() swipeRight = new EventEmitter();
Versions:
hammerjs: ^2.0.8
With Angular: "^15.2.8"
Issue description:
I have a gallery component with a main image. I implemented a directive using hammerjs to support swipe left right to switch images (next/prev) and it works perfectly.
However, doing this disabled the native functionality that existed prior to this change to pinch in and out to zoom.
The pinch operation works on any other location on the page except the img for which I used the directive.
Here is the directive (note I tried with/without touch action auto and with/without disabling pinch for hammer):
import { Directive, Output, EventEmitter, ElementRef, Renderer2, AfterViewInit } from '@angular/core';
import * as Hammer from 'hammerjs';
@directive({
selector: '[appSwipe]',
})
export class GestureDirective implements AfterViewInit {
@output() swipeLeft = new EventEmitter();
@output() swipeRight = new EventEmitter();
private swipeHammer: HammerManager | null = null;
constructor(private el: ElementRef, private renderer: Renderer2) {}
ngAfterViewInit() {
this.setupHammer();
}
private setupHammer(): void {
this.swipeHammer = new Hammer.Manager(this.el.nativeElement, {
touchAction: 'auto',
});
}
}
To use this directive, I added the swipeLeft/swipeRight to my image:
<img (swipeLeft)="showPreviousImage()" (swipeRight)="showNextImage()" ...
The text was updated successfully, but these errors were encountered: