openaire-library/utils/click/long-click.directive.ts

76 lines
1.8 KiB
TypeScript

import {Directive, EventEmitter, HostListener, Input, Output} from '@angular/core';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/do';
@Directive({
selector: '[long-click]'
})
export class LongClick {
@Input() duration: number = 500;
@Output() onLongPress: EventEmitter<any> = new EventEmitter();
@Output() onLongPressing: EventEmitter<any> = new EventEmitter();
@Output() onLongPressEnd: EventEmitter<any> = new EventEmitter();
private pressing: boolean;
private longPressing: boolean;
private timeout: any;
private mouseX: number = 0;
private mouseY: number = 0;
@HostListener('mousedown', ['$event'])
onMouseDown(event) {
// don't do right/middle clicks
if (event.which !== 1) return;
this.mouseX = event.clientX;
this.mouseY = event.clientY;
this.pressing = true;
this.longPressing = false;
this.timeout = setTimeout(() => {
this.longPressing = true;
this.onLongPress.emit(event);
this.loop(event);
}, this.duration);
this.loop(event);
}
@HostListener('mousemove', ['$event'])
onMouseMove(event) {
if (this.pressing && !this.longPressing) {
const xThres = (event.clientX - this.mouseX) > 10;
const yThres = (event.clientY - this.mouseY) > 10;
if (xThres || yThres) {
this.endPress();
}
}
}
loop(event) {
if (this.longPressing) {
this.timeout = setTimeout(() => {
this.onLongPressing.emit(event);
this.loop(event);
}, 50);
}
}
endPress() {
clearTimeout(this.timeout);
this.longPressing = false;
this.pressing = false;
this.onLongPressEnd.emit(true);
}
@HostListener('mouseup')
onMouseUp() {
this.endPress();
}
}