128 lines
3.9 KiB
TypeScript
128 lines
3.9 KiB
TypeScript
import {
|
|
AfterViewInit, ChangeDetectorRef,
|
|
Component,
|
|
ElementRef,
|
|
EventEmitter, HostListener,
|
|
Input,
|
|
OnDestroy,
|
|
OnInit,
|
|
Output,
|
|
ViewChild
|
|
} from "@angular/core";
|
|
import {fromEvent, Subscription} from 'rxjs';
|
|
import {delay} from "rxjs/operators";
|
|
import {HelperFunctions} from "../../HelperFunctions.class";
|
|
|
|
declare var UIkit;
|
|
declare var ResizeObserver;
|
|
|
|
@Component({
|
|
selector: 'fs-modal',
|
|
template: `
|
|
<div #modal class="uk-modal-full" [id]="id" uk-modal="container: #modal-container">
|
|
<div class="uk-modal-dialog">
|
|
<div #header class="uk-modal-header uk-flex uk-flex-middle" [ngClass]="classTitle">
|
|
<div [class.uk-invisible]="!back" class="uk-width-medium@l uk-width-auto uk-flex uk-flex-center">
|
|
<button class="uk-button uk-button-link" [disabled]="!back" (click)="cancel()">
|
|
<icon name="west" [flex]="true" ratio="3"></icon>
|
|
</button>
|
|
</div>
|
|
<div [class.uk-invisible]="!title"
|
|
class="uk-width-expand uk-padding-small uk-padding-remove-vertical uk-flex uk-flex-center">
|
|
<h2 class="uk-margin-remove">{{title}}</h2>
|
|
</div>
|
|
<div class="uk-width-medium@l uk-width-auto uk-flex" [class.uk-flex-center]="okButton" [class.uk-flex-right]="!okButton">
|
|
<button *ngIf="okButton" class="uk-button uk-button-default" [disabled]="okButtonDisabled"
|
|
[class.uk-disabled]="okButtonDisabled" (click)="ok()">
|
|
{{okButtonText}}
|
|
</button>
|
|
<button *ngIf="!okButton" class="uk-close uk-icon" (click)="cancel()">
|
|
<icon name="close" ratio="1.5"></icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div #body class="uk-modal-body uk-overflow-auto" [ngStyle]="{'height.px': bodyHeight}">
|
|
<div class="uk-container uk-height-1-1" [ngClass]="classBody">
|
|
<ng-content></ng-content>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`
|
|
})
|
|
export class FullScreenModalComponent implements AfterViewInit, OnDestroy {
|
|
@Input() id: string = "fs-modal";
|
|
@Input() classTitle: string = "uk-background-primary uk-light";
|
|
@Input() classBody: string = 'uk-container-large';
|
|
back: boolean = false;
|
|
title: string;
|
|
okButton: boolean = false;
|
|
okButtonText = 'OK';
|
|
@Input()
|
|
okButtonDisabled = false;
|
|
@Output()
|
|
okEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
|
|
@Output()
|
|
cancelEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
|
|
@ViewChild('modal') modal: ElementRef;
|
|
@ViewChild('header') header: ElementRef;
|
|
@ViewChild('body') body: ElementRef;
|
|
observer: any;
|
|
headerHeight: number;
|
|
bodyHeight: number;
|
|
|
|
constructor(private cdr: ChangeDetectorRef) {
|
|
}
|
|
|
|
@HostListener('window:resize', ['$event'])
|
|
onResize() {
|
|
this.changeHeight();
|
|
}
|
|
|
|
ngAfterViewInit() {
|
|
if(typeof window !== "undefined") {
|
|
this.observer = new ResizeObserver(entries => {
|
|
for (let entry of entries) {
|
|
this.changeHeight();
|
|
}
|
|
});
|
|
this.observer.observe(this.header.nativeElement);
|
|
}
|
|
}
|
|
|
|
/* Height = Viewport - header - (Body padding) */
|
|
changeHeight() {
|
|
if(typeof window !== "undefined" && this.header) {
|
|
this.bodyHeight = window.innerHeight - this.header.nativeElement.clientHeight - 80;
|
|
this.cdr.detectChanges();
|
|
}
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
if(this.observer instanceof ResizeObserver) {
|
|
this.observer.disconnect();
|
|
}
|
|
}
|
|
|
|
get isOpen() {
|
|
return this.modal && UIkit.modal(this.modal.nativeElement).isToggled();
|
|
}
|
|
|
|
open() {
|
|
UIkit.modal(this.modal.nativeElement).show();
|
|
HelperFunctions.scroll();
|
|
}
|
|
|
|
cancel() {
|
|
UIkit.modal(this.modal.nativeElement).hide();
|
|
HelperFunctions.scroll();
|
|
this.cancelEmitter.emit();
|
|
}
|
|
|
|
ok() {
|
|
UIkit.modal(this.modal.nativeElement).hide();
|
|
HelperFunctions.scroll();
|
|
this.okEmitter.emit(true);
|
|
}
|
|
}
|