[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

utils/click/click.module.ts

@@ -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 {}

utils/click/long-click.directive.ts

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

utils/modal/modal.module.ts

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