Hi - I need to show images blurred. If a user holds down on the image then the image unblurs until they move off. This is done by toggling a class on the image. I have attempted to use a custom directive to no avail. It doesn’t work if you drag off the image, because the release isn’t detected.
import { Directive, ElementRef, OnInit, OnDestroy, Output, EventEmitter } from '@angular/core';
import { Gesture } from "ionic-angular/gestures/gesture";
@Directive({
selector: '[long-press]'
})
export class PressDirective implements OnInit, OnDestroy {
el: HTMLElement;
pressGesture: Gesture;
@Output('long-press') onPressRelease: EventEmitter<any> = new EventEmitter();
@Output('long-press-up') onPressUp: EventEmitter<any> = new EventEmitter();
constructor(el: ElementRef) {
this.el = el.nativeElement;
}
ngOnInit() {
this.pressGesture = new Gesture(this.el);
this.pressGesture.listen();
this.pressGesture.on('press', (event) => {
this.onPressRelease.emit('released');
});
this.pressGesture.on('pressup', (event) => {
this.onPressUp.emit(event);
});
}
ngOnDestroy() {
this.pressGesture.destroy();
}
}
That is the current directive - any advice is greatly appreciated.