openaire-library/utils/modal/full-screen-modal/full-screen-modal.component.ts

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"
               [class.uk-invisible]="okButton || cancelButton">
            <button *ngIf="okButton" class="uk-button uk-button-default" [disabled]="okButtonDisabled"
                    [class.uk-disabled]="okButtonDisabled" (click)="ok()">
              {{okButtonText}}
            </button>
            <button *ngIf="!okButton && cancelButton" class="uk-close uk-icon" (click)="cancel()">
              <icon name="close" ratio="2"></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 {
  private static FS_MODAL_COUNTER: number = 0;

  id: string = "fs-modal";
  @Input() classTitle: string = "uk-background-primary uk-light";
  @Input() classBody: string = 'uk-container-large';
  back: boolean = false;
  title: string;
  cancelButton: boolean = true;
  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();
  }

  ngOnInit() {
    FullScreenModalComponent.FS_MODAL_COUNTER++;
    this.id = 'fs-modal-' + FullScreenModalComponent.FS_MODAL_COUNTER;
  }

  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 && this.observer instanceof ResizeObserver) {
      this.observer.disconnect();
    }
    if(typeof document !== "undefined") {
      const element = document.getElementById("modal-container");
      for (let i = element.childNodes.length - 1; i >= 0; --i) {
        let child: ChildNode = element.childNodes[i];
        if (child['id'] == this.id) {
          child.remove();
        }
      }
    }

  }
  
  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);
  }
}