80 lines
2.3 KiB
TypeScript
80 lines
2.3 KiB
TypeScript
import {Component, ElementRef, EventEmitter, Input, OnInit, Output} from "@angular/core";
|
|
|
|
@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>
|
|
</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">
|
|
<ng-content></ng-content>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`
|
|
})
|
|
export class FullScreenModalComponent implements OnInit {
|
|
okButtonText = 'OK';
|
|
cancelButtonText = 'Cancel';
|
|
keys: boolean = false;
|
|
title: string = null;
|
|
@Output()
|
|
okEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
|
|
opened: boolean = false;
|
|
private readonly element: any;
|
|
|
|
constructor(private el: ElementRef) {
|
|
this.element = el.nativeElement;
|
|
}
|
|
|
|
ngOnInit() {
|
|
if(typeof document !== "undefined") {
|
|
document.body.appendChild(this.element);
|
|
}
|
|
}
|
|
|
|
ngOnDestroy(): void {
|
|
this.element.remove();
|
|
}
|
|
|
|
open() {
|
|
if(typeof document !== "undefined") {
|
|
this.opened = true;
|
|
document.getElementsByTagName('html')[0].classList.add('fs-modal-open');
|
|
}
|
|
}
|
|
|
|
close() {
|
|
if(typeof document !== "undefined") {
|
|
this.opened = false;
|
|
document.getElementsByTagName('html')[0].classList.remove('fs-modal-open');
|
|
}
|
|
}
|
|
|
|
ok() {
|
|
this.close();
|
|
this.okEmitter.emit(true);
|
|
}
|
|
}
|