[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
This commit is contained in:
k.triantafyllou 2019-11-22 08:51:17 +00:00
parent 0bb213622d
commit efb6f3e435
3 changed files with 61 additions and 32 deletions

View File

@ -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 {
// return JSON.parse(JSON.stringify(element));
// return { ...element};
return Object.assign(Object.create(element), element);
public static copy(obj: any): any {
let copy;
// 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[] {

View File

@ -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"
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"
click-outside-or-esc (clickOutside)="clickOutside($event)" [targetId]="'myModal'"
<div #element class="uk-modal" uk-modal
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" [ngClass]="classBody"
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 md-btn-primary portal-button ignoreCommunityPanelBackground" (click)="ok()">{{okButtonText}}</button>
<button *ngIf="okDisabled" class="uk-button md-btn uk-button-default ignoreCommunityPanelBackground"
disabled>{{okButtonText}}</button>
<button *ngIf="!okDisabled"
class="uk-button md-btn md-btn-primary portal-button ignoreCommunityPanelBackground"
(click)="ok()">{{okButtonText}}</button>
</span>
</div>
</div>
@ -55,7 +58,7 @@ import {Component, ViewEncapsulation, ElementRef, EventEmitter, Output, Input} f
* API to an open alert window.
*/
export class AlertModal {
@Input() classBody: string ="";
@Input() classBody: string = "";
/**
* Caption for the title.
*/
@ -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;
}
clickOutside(event: Object) {
if(event && event['value'] === true) {
this.cancel();
this.clickOutsideOutput.emit( {
value: true
});
}
UIkit.modal(this.element.nativeElement).hide();
}
}

View File

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