[Library]: Add ContentProvider class. Add directive to close modal on click outside or esc.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@57261 d315682c-612b-4755-9ff5-7f18f6832af3

utils/entities/contentProvider.ts

@@ -0,0 +1,22 @@
+export class ContentProvider {
+  id: string;
+  openaireId: string;
+  communityId: string;
+  name: string;
+  officialname: string;
+  selcrit: SelCrit;
+}
+
+export class SelCrit {
+  criteria: Criteria[] = [];
+}
+
+export class Criteria {
+  constraint: Constraint[] = [];
+}
+
+export class Constraint {
+  verb: string = 'contains';
+  field: string = null;
+  value: string;
+}

utils/modal/alert.ts

@@ -3,9 +3,12 @@ import {Component, ViewEncapsulation, ElementRef, EventEmitter, Output, Input} f
 @Component({
   selector: 'modal-alert',
   template: `
-    <div [class]="(!isOpen)?'uk-modal ':'uk-modal uk-open'" uk-modal [open]="!isOpen" id="myModal"
+    <div [class]="(!isOpen)?'uk-modal ':'uk-modal uk-open'" uk-modal [open]="!isOpen" 
+          id="myModal"
          tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
-      <div [class]="'uk-modal-dialog  uk-modal-body uk-animation-slide-bottom-small  uk-text-left '+classBody" role="">
+      <div [class]="'uk-modal-dialog  uk-modal-body uk-animation-slide-bottom-small  uk-text-left '+classBody"
+           click-outside-or-esc (clickOutside)="clickOutside($event)"
+           role="">
         <div class="uk-modal-title" [hidden]=!alertHeader>
           <button class="uk-modal-close-default uk-float-right" (click)='cancel()' uk-close></button>
           <h4 class="modal-title" id="myModalLabel">{{alertTitle}}</h4>
@@ -120,6 +123,7 @@ export class AlertModal {
    * or when Ok method is called.
    */
   @Output() public alertOutput: EventEmitter<any> = new EventEmitter();
+  @Output() public clickOutsideOutput: EventEmitter<any> = new EventEmitter();
 
   constructor(public _elementRef: ElementRef) {
   }
@@ -129,6 +133,7 @@ export class AlertModal {
    */
   open() {
     this.isOpen = true;
+    event.stopPropagation();
   }
 
   /**
@@ -152,4 +157,13 @@ export class AlertModal {
   cancel() {
     this.isOpen = false;
   }
+
+  clickOutside(event: Object) {
+    if(event && event['value'] === true) {
+      this.cancel();
+      this.clickOutsideOutput.emit( {
+        value: true
+      });
+    }
+  }
 }

utils/modal/click-outside-or-esc.directive.ts

@@ -0,0 +1,79 @@
+import {Directive, OnInit, OnDestroy, Output, EventEmitter, ElementRef} from '@angular/core';
+import {Observable} from 'rxjs/Observable';
+import 'rxjs/add/observable/fromEvent';
+import 'rxjs/add/operator/delay';
+import 'rxjs/add/operator/do';
+
+@Directive({
+  selector: '[click-outside-or-esc]'
+})
+
+export class ClickOutsideOrEsc implements OnInit, OnDestroy {
+  private listening: boolean;
+  private globalClick: any;
+  private escClick: any;
+
+  @Output('clickOutside') clickOutside: EventEmitter<Object>;
+
+  constructor(private _elRef: ElementRef) {
+    this.listening = false;
+    this.clickOutside = new EventEmitter();
+  }
+
+  ngOnInit() {
+    this.globalClick = Observable
+      .fromEvent(document, 'click')
+      .delay(1)
+      .do(() => {
+        this.listening = true;
+      }).subscribe((event: MouseEvent) => {
+        this.onGlobalClick(event);
+      });
+    this.escClick = Observable
+      .fromEvent(document, 'keydown')
+      .delay(1)
+      .do(() => {
+        this.listening = true;
+      }).subscribe((event: KeyboardEvent) => {
+        if(event.keyCode === 27) {
+          this.clickOutside.emit({
+            target: (event.target || null),
+            value: true
+          });
+        }
+      });
+  }
+
+  ngOnDestroy() {
+    this.globalClick.unsubscribe();
+    this.escClick.unsubscribe();
+  }
+
+  onGlobalClick(event: MouseEvent) {
+    if (event instanceof MouseEvent && this.listening === true) {
+      if (this.isDescendant(this._elRef.nativeElement, event.target) === true) {
+        this.clickOutside.emit({
+          target: (event.target || null),
+          value: false
+        });
+      } else {
+        this.clickOutside.emit({
+          target: (event.target || null),
+          value: true
+        });
+      }
+    }
+  }
+
+  isDescendant(parent, child) {
+    let node = child;
+    while (node !== null) {
+      if (node === parent) {
+        return true;
+      } else {
+        node = node.parentNode;
+      }
+    }
+    return false;
+  }
+}

utils/modal/modal.module.ts

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