openaire-library/utils/modal/full-screen-modal/full-screen-modal.component.ts

96 lines
2.9 KiB
TypeScript

import {Component, ElementRef, EventEmitter, Input, OnInit, Output} from "@angular/core";
import {fromEvent, Subscription} from 'rxjs';
import {delay} from "rxjs/operators";
@Component({
selector: 'fs-modal',
template: `
<div class="fs-modal">
<div class="fs-modal-bg" (click)="close()"></div>
<div id="fs-modal" class="fs-modal-dialog">
<!--<a class="close" (click)="close()">
<icon name="close"></icon>
</a>-->
<div class="header">
<div class="uk-flex-middle uk-grid" uk-grid>
<h4 *ngIf="title" class="uk-margin-remove uk-width-expand uk-text-truncate">{{title}}</h4>
<div *ngIf="cancelButton || okButton" class="uk-flex uk-flex-right">
<div>
<ng-content select="[actions]"></ng-content>
</div>
<button *ngIf="cancelButton" class="uk-button uk-button-secondary outlined uk-margin-small-left" [disabled]="cancelButtonDisabled" (click)="close()">{{cancelButtonText}}</button>
<button *ngIf="okButton" class="uk-button uk-button-secondary uk-margin-small-left" [disabled]="okButtonDisabled" (click)="ok()">{{okButtonText}}</button>
</div>
</div>
</div>
<div class="content">
<ng-content></ng-content>
</div>
</div>
</div>
`
})
export class FullScreenModalComponent implements OnInit {
okButtonText = 'OK';
cancelButtonText = 'Cancel';
cancelButton: boolean = false;
okButton: boolean = false;
title: string = null;
@Input()
okButtonDisabled = false;
@Input()
cancelButtonDisabled = false;
@Output()
okEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
@Output()
cancelEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
opened: boolean = false;
private readonly element: any;
private subscriptions: any[] = [];
private clickedInside: boolean;
constructor(private el: ElementRef) {
this.element = el.nativeElement;
}
ngOnInit() {
if (typeof document !== "undefined") {
document.body.appendChild(this.element);
this.subscriptions.push(fromEvent(document, 'keydown').pipe(delay(1)).subscribe((event: KeyboardEvent) => {
if(event.keyCode === 27) {
this.close();
}
}));
}
}
ngOnDestroy(): void {
this.element.remove();
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscription) {
subscription.unsubscribe();
}
})
}
open() {
if (typeof document !== "undefined") {
this.opened = true;
document.getElementsByTagName('html')[0].classList.add('fs-modal-open');
}
}
close() {
if (typeof document !== "undefined" && this.opened) {
document.getElementsByTagName('html')[0].classList.remove('fs-modal-open');
this.opened = false;
this.cancelEmitter.emit();
}
}
ok() {
this.close();
this.okEmitter.emit(true);
}
}