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

[Library | Trunk]: Fs modal redesign 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60632 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2021-03-12 09:39:06 +00:00
parent 1042733054
commit b37a64809e
1 changed files with 27 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
utils/modal/full-screen-modal/full-screen-modal.component.ts
View File

@ -1,35 +1,25 @@
import {Component, ElementRef, EventEmitter, Input, OnInit, Output} from "@angular/core";
import {Component, ElementRef, EventEmitter, OnInit, Output} from "@angular/core";
import {fromEvent, Subscription} from 'rxjs';
import {delay} from "rxjs/operators";
@Component({
selector: 'fs-modal',
template: `
<div class="fs-modal">
<a class="close" (click)="close()">
<icon name="close" ratio="2"></icon>
</a>
<div class="header">
<div class="uk-position-relative uk-height-1-1">
<h5 *ngIf="title" class="uk-position-center">
{{title}}
</h5>
<div *ngIf="keys" class="uk-position-center-right uk-visible@m">
<button class="uk-button uk-button-secondary outlined" (click)="close()">{{cancelButtonText}}</button>
<button class="uk-button uk-button-secondary space" (click)="ok()">{{okButtonText}}</button>
</div>
<div class="fs-modal" (click)="close()">
<div id="fs-modal" (click)="$event.stopPropagation()" class="fs-modal-dialog">
<a class="close" (click)="close()">
<icon name="close"></icon>
</a>
<div class="header">
<h6 *ngIf="title">{{title}}</h6>
</div>
</div>
<div class="content">
<div class="content-header">
<div *ngIf="keys" class="uk-flex uk-flex-center uk-width-1-1 uk-margin-medium-bottom uk-hidden@m">
<button class="uk-button uk-button-secondary outlined" (click)="close()">{{cancelButtonText}}</button>
<button class="uk-button uk-button-secondary space" (click)="ok()">{{okButtonText}}</button>
</div>
<ng-content select="[header]">
</ng-content>
</div>
<div class="content-inner">
<div class="content" [class.hasFooter]="keys">
<ng-content></ng-content>
</div>
<div *ngIf="keys" class="footer uk-flex uk-flex-right">
<button class="uk-button uk-button-secondary outlined" (click)="close()">{{cancelButtonText}}</button>
<button class="uk-button uk-button-secondary space" (click)="ok()">{{okButtonText}}</button>
</div>
</div>
</div>
`
@ -45,30 +35,39 @@ export class FullScreenModalComponent implements OnInit {
cancelEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
opened: boolean = false;
private readonly element: any;
private subscriptions: any[] = [];
constructor(private el: ElementRef) {
this.element = el.nativeElement;
}
ngOnInit() {
if(typeof document !== "undefined") {
if (typeof document !== "undefined") {
document.body.appendChild(this.element);
this.subscriptions.push(fromEvent(document, 'keydown').pipe(delay(1)).subscribe((event: KeyboardEvent) => {
this.close();
}));
}
}
ngOnDestroy(): void {
this.element.remove();
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscription) {
subscription.unsubscribe();
}
})
}
open() {
if(typeof document !== "undefined") {
if (typeof document !== "undefined") {
this.opened = true;
document.getElementsByTagName('html')[0].classList.add('fs-modal-open');
}
}
close() {
if(typeof document !== "undefined") {
if (typeof document !== "undefined") {
this.opened = false;
document.getElementsByTagName('html')[0].classList.remove('fs-modal-open');
this.cancelEmitter.emit();