MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[Library]: Fix Modal to close on click in target with specific id 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@57336 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2019-10-10 12:13:01 +00:00
parent eea9c25108
commit 8bca7dbdbd
2 changed files with 6 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
utils/modal/alert.ts
View File

@ -7,7 +7,7 @@ import {Component, ViewEncapsulation, ElementRef, EventEmitter, Output, Input} f
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)"
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>
@ -152,7 +152,7 @@ export class AlertModal {
}
/**
* cancel method closes the moda.
* cancel method closes the modal.
*/
cancel() {
this.isOpen = false;

18
utils/modal/click-outside-or-esc.directive.ts
View File

@ -1,4 +1,4 @@
import {Directive, OnInit, OnDestroy, Output, EventEmitter, ElementRef} from '@angular/core';
import {Directive, OnInit, OnDestroy, Output, EventEmitter, ElementRef, Input} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/delay';
@ -12,6 +12,8 @@ import {Subscriber} from "rxjs";
export class ClickOutsideOrEsc implements OnInit, OnDestroy {
private listening: boolean;
private subscriptions: any[] = [];
@Input()
public targetId = null;
@Output('clickOutside') clickOutside: EventEmitter<Object>;
@ -57,7 +59,7 @@ export class ClickOutsideOrEsc implements OnInit, OnDestroy {
onGlobalClick(event: MouseEvent) {
if (event instanceof MouseEvent && this.listening === true) {
if (this.isDescendant(this._elRef.nativeElement, event.target) === true) {
if (event.target.id != this.targetId) {
this.clickOutside.emit({
target: (event.target || null),
value: false
@ -70,16 +72,4 @@ export class ClickOutsideOrEsc implements OnInit, OnDestroy {
}
}
}
isDescendant(parent, child) {
let node = child;
while (node !== null) {
if (node === parent) {
return true;
} else {
node = node.parentNode;
}
}
return false;
}
}