99 lines
3.0 KiB
TypeScript
99 lines
3.0 KiB
TypeScript
import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from "@angular/core";
|
|
import {fromEvent, Subscription} from 'rxjs';
|
|
import {delay} from "rxjs/operators";
|
|
|
|
declare var UIkit;
|
|
@Component({
|
|
selector: 'fs-modal',
|
|
template: `
|
|
<div #modal_full class="uk-modal-full" uk-modal>
|
|
<div class="uk-modal-dialog uk-height-1-1">
|
|
<button class="uk-modal-close-full uk-close-large uk-margin-medium-top uk-margin-medium-right" type="button" uk-close></button>
|
|
<div class="uk-height-1-1">
|
|
<div class="header">
|
|
<ng-content select="[actions]"></ng-content>
|
|
</div>
|
|
<div class="content uk-height-1-1">
|
|
<ng-content></ng-content>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="fs-modal">
|
|
<div class="fs-modal-bg" (click)="close()"></div>
|
|
<div id="fs-modal" class="fs-modal-dialog">
|
|
<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;
|
|
@ViewChild('modal_full') element: ElementRef;
|
|
private subscriptions: any[] = [];
|
|
private clickedInside: boolean;
|
|
|
|
constructor(private el: ElementRef) {
|
|
this.element = el.nativeElement;
|
|
}
|
|
|
|
ngOnInit() {
|
|
if (typeof document !== "undefined") {
|
|
this.subscriptions.push(fromEvent(document, 'keydown').pipe(delay(1)).subscribe((event: KeyboardEvent) => {
|
|
if(event.keyCode === 27) {
|
|
this.close();
|
|
}
|
|
}));
|
|
}
|
|
}
|
|
|
|
ngOnDestroy(): void {
|
|
this.subscriptions.forEach(subscription => {
|
|
if (subscription instanceof Subscription) {
|
|
subscription.unsubscribe();
|
|
}
|
|
})
|
|
}
|
|
|
|
open() {
|
|
UIkit.modal(this.element.nativeElement).show();
|
|
}
|
|
|
|
close() {
|
|
UIkit.modal(this.element.nativeElement).hide();
|
|
this.cancelEmitter.emit();
|
|
}
|
|
|
|
ok() {
|
|
this.close();
|
|
this.okEmitter.emit(true);
|
|
}
|
|
}
|