MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix bug with overflow in full screen modall

This commit is contained in:
Konstantinos Triantafyllou 2022-07-04 18:00:10 +03:00
parent e61d4495ae
commit be48608545
1 changed files with 59 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
utils/modal/full-screen-modal/full-screen-modal.component.ts
View File

@ -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: `
<div #element class="uk-modal-full" [id]="id" uk-modal="container: #modal-container">
<div #modal class="uk-modal-full" [id]="id" uk-modal="container: #modal-container">
<div class="uk-modal-dialog">
<div class="uk-modal-header uk-flex uk-flex-middle" [ngClass]="classTitle">
<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>
@ -29,7 +41,7 @@ declare var UIkit;
</button>
</div>
</div>
<div class="uk-modal-body" uk-overflow-auto>
<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>
@ -38,7 +50,7 @@ declare var UIkit;
</div>
`
})
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<boolean> = new EventEmitter<boolean>();
@Output()
cancelEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
@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();
}