diff --git a/utils/modal/full-screen-modal/full-screen-modal.component.ts b/utils/modal/full-screen-modal/full-screen-modal.component.ts index c5555c6e..b74d735c 100644 --- a/utils/modal/full-screen-modal/full-screen-modal.component.ts +++ b/utils/modal/full-screen-modal/full-screen-modal.component.ts @@ -1,15 +1,27 @@ -import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from "@angular/core"; +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: ` -
+
-
+
-
+
@@ -38,7 +50,7 @@ declare var UIkit;
` }) -export class FullScreenModalComponent { +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'; @@ -52,19 +64,57 @@ export class FullScreenModalComponent { okEmitter: EventEmitter = new EventEmitter(); @Output() cancelEmitter: EventEmitter = new EventEmitter(); - @ViewChild('element') element: ElementRef; + @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.element && UIkit.modal(this.element.nativeElement).isToggled(); + return this.modal && UIkit.modal(this.modal.nativeElement).isToggled(); } open() { - UIkit.modal(this.element.nativeElement).show(); + UIkit.modal(this.modal.nativeElement).show(); HelperFunctions.scroll(); } cancel() { - UIkit.modal(this.element.nativeElement).hide(); + UIkit.modal(this.modal.nativeElement).hide(); HelperFunctions.scroll(); this.cancelEmitter.emit(); }