[Library]: Make modal works with uikit js. Add deep copy custom function

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

utils/HelperFunctions.class.ts

@@ -1,6 +1,7 @@
 export class HelperFunctions {
   //Use this class function to create queryParams Objects in format {key1:value1} or {key1:value1,key2:value2,key3:value3,...} for  multiple parameters
-  constructor() {}
+  constructor() {
+  }
 
   public static scroll() {
     if (typeof document !== 'undefined') {
@@ -13,10 +14,45 @@ export class HelperFunctions {
     return (url.indexOf('tinyurl.com') !== -1);
   }
 
-  public static copy(element: any): any {
+  public static copy(obj: any): any {
-    // return JSON.parse(JSON.stringify(element));
+    let copy;
-    // return { ...element};
+
-    return Object.assign(Object.create(element), element);
+    // Handle the 3 simple types, and null or undefined
+    if (null == obj || "object" != typeof obj) return obj;
+
+    // Handle Date
+    if (obj instanceof Date) {
+      copy = new Date();
+      copy.setTime(obj.getTime());
+      return copy;
+    }
+
+    // Handle Array
+    if (obj instanceof Array) {
+      copy = [];
+      for (let i = 0, len = obj.length; i < len; i++) {
+        copy[i] = HelperFunctions.copy(obj[i]);
+      }
+      return copy;
+    }
+
+    // Handle Map
+    if (obj instanceof Map) {
+      copy = new Map(obj.entries());
+      return copy;
+    }
+
+    // Handle Object
+    if (obj instanceof Object) {
+      copy = {};
+      for (let attr in obj) {
+        if (obj.hasOwnProperty(attr)) {
+          copy[attr] = HelperFunctions.copy(obj[attr]);
+        }
+      }
+      return copy;
+    }
+    throw new Error("Unable to copy obj! Its type isn't supported.");
   }
 
   public static encodeArray(elements: string[]): string[] {

utils/modal/alert.ts

@@ -1,13 +1,13 @@
-import {Component, ViewEncapsulation, ElementRef, EventEmitter, Output, Input} from '@angular/core';
+import {Component, ViewEncapsulation, ElementRef, EventEmitter, Output, Input, ViewChild} from '@angular/core';
+
+declare var UIkit: any;
 
 @Component({
   selector: 'modal-alert',
   template: `
-    <div [class]="(!isOpen)?'uk-modal ':'uk-modal uk-open'" uk-modal [open]="!isOpen" 
+    <div #element class="uk-modal" uk-modal
-          id="myModal"
+         id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
-         tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+      <div class="uk-modal-dialog uk-modal-body uk-animation-slide-bottom-small  uk-text-left" [ngClass]="classBody"
-      <div [class]="'uk-modal-dialog  uk-modal-body uk-animation-slide-bottom-small  uk-text-left '+classBody"
-           click-outside-or-esc (clickOutside)="clickOutside($event)" [targetId]="'myModal'"
            role="">
         <div class="uk-modal-title" [hidden]=!alertHeader>
           <button class="uk-modal-close-default uk-float-right" (click)='cancel()' uk-close></button>
@@ -40,8 +40,11 @@ import {Component, ViewEncapsulation, ElementRef, EventEmitter, Output, Input} f
                           (click)="cancel()">{{cancelButtonText}}</button>
               </span>
               <span [hidden]=!okButton>
-              <button *ngIf="okDisabled" class="uk-button md-btn uk-button-default ignoreCommunityPanelBackground" disabled>{{okButtonText}}</button>
+              <button *ngIf="okDisabled" class="uk-button md-btn uk-button-default ignoreCommunityPanelBackground"
-              <button *ngIf="!okDisabled" class="uk-button md-btn md-btn-primary portal-button ignoreCommunityPanelBackground" (click)="ok()">{{okButtonText}}</button>
+                      disabled>{{okButtonText}}</button>
+              <button *ngIf="!okDisabled"
+                      class="uk-button md-btn md-btn-primary portal-button ignoreCommunityPanelBackground"
+                      (click)="ok()">{{okButtonText}}</button>
             </span>
             </div>
           </div>
@@ -98,11 +101,6 @@ export class AlertModal {
    * shows alert header if the value is true.
    */
   public alertHeader: boolean = true;
-  /**
-   * if the value is true alert will be visible or else it will be hidden.
-   */
-  public isOpen: boolean = false;
-
   /**
    *  if the value is true ok button align on the left, else on the right
    */
@@ -125,6 +123,8 @@ export class AlertModal {
   @Output() public alertOutput: EventEmitter<any> = new EventEmitter();
   @Output() public clickOutsideOutput: EventEmitter<any> = new EventEmitter();
 
+  @ViewChild('element') element: ElementRef;
+
   constructor(public _elementRef: ElementRef) {
   }
 
@@ -132,14 +132,14 @@ export class AlertModal {
    * Opens a alert window creating backdrop.
    */
   open() {
-    this.isOpen = true;
+    UIkit.modal(this.element.nativeElement).show();
   }
 
   /**
    *  ok method closes the modal and emits modalOutput.
    */
   ok() {
-    this.isOpen = false;
+    this.cancel();
     if (!this.choice) {
       this.alertOutput.emit(true);
     } else {
@@ -154,15 +154,6 @@ export class AlertModal {
    *  cancel method closes the modal.
    */
   cancel() {
-    this.isOpen = false;
+    UIkit.modal(this.element.nativeElement).hide();
-  }
-
-  clickOutside(event: Object) {
-    if(event && event['value'] === true) {
-      this.cancel();
-      this.clickOutsideOutput.emit( {
-        value: true
-      });
-    }
   }
 }

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

@@ -14,6 +14,8 @@ export class ClickOutsideOrEsc implements OnInit, OnDestroy {
   private subscriptions: any[] = [];
   @Input()
   public targetId = null;
+  @Input()
+  public escClose = true;
 
   @Output('clickOutside') clickOutside: EventEmitter<Object>;
 
@@ -38,7 +40,7 @@ export class ClickOutsideOrEsc implements OnInit, OnDestroy {
         .do(() => {
           this.listening = true;
         }).subscribe((event: KeyboardEvent) => {
-          if (event.keyCode === 27) {
+          if (event.keyCode === 27 && this.escClose) {
             this.clickOutside.emit({
               target: (event.target || null),
               value: true