[Library]: Create click module and moved click outside there. Add long click directive

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@57886 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2019-12-15 13:16:08 +00:00
parent a5d082d260
commit 75a9265c23
4 changed files with 91 additions and 4 deletions

View File

@ -0,0 +1,14 @@
import {NgModule} from "@angular/core";
import {ClickOutsideOrEsc} from "./click-outside-or-esc.directive";
import {LongClick} from "./long-click.directive";
@NgModule({
imports: [],
declarations: [
ClickOutsideOrEsc, LongClick
],
exports: [
ClickOutsideOrEsc, LongClick
]
})
export class ClickModule {}

View File

@ -0,0 +1,75 @@
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();
}
}

View File

@ -1,16 +1,14 @@
/* common components of modal components */ /* common components of modal components */
import {NgModule} from '@angular/core'; import {NgModule} from '@angular/core';
import {Open} from './open.component'; import {Open} from './open.component';
import {ClickOutsideOrEsc} from './click-outside-or-esc.directive';
@NgModule({ @NgModule({
imports: [], imports: [],
declarations: [ declarations: [
Open, ClickOutsideOrEsc Open
], ],
exports: [ exports: [
Open, Open
ClickOutsideOrEsc
] ]
}) })
export class ModalModule { export class ModalModule {