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

import {Component, ElementRef, EventEmitter, Input, OnInit, Output} from "@angular/core";
import {fromEvent, Subscription} from 'rxjs';
import {delay} from "rxjs/operators";

@Component({
  selector: 'fs-modal',
  template: `
    <div class="fs-modal" (click)="close()">
      <div id="fs-modal" (click)="$event.stopPropagation()" class="fs-modal-dialog">
        <a class="close" (click)="close()">
          <icon name="close"></icon>
        </a>
        <div class="header">
          <h6 *ngIf="title">{{title}}</h6>
        </div>
        <div class="content" [class.hasFooter]="cancelButton || okButton">
          <ng-content></ng-content>
        </div>
        <div *ngIf="cancelButton || okButton" class="footer uk-flex uk-flex-right">
          <button *ngIf="cancelButton" class="uk-button uk-button-secondary outlined" [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>
  `
})
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;
  private readonly element: any;
  private subscriptions: any[] = [];
  
  constructor(private el: ElementRef) {
    this.element = el.nativeElement;
  }
  
  ngOnInit() {
    if (typeof document !== "undefined") {
      document.body.appendChild(this.element);
      this.subscriptions.push(fromEvent(document, 'keydown').pipe(delay(1)).subscribe((event: KeyboardEvent) => {
        if(event.keyCode === 27) {
          this.close();
        }
      }));
    }
  }
  
  ngOnDestroy(): void {
    this.element.remove();
    this.subscriptions.forEach(subscription => {
      if (subscription instanceof Subscription) {
        subscription.unsubscribe();
      }
    })
  }
  
  open() {
    if (typeof document !== "undefined") {
      this.opened = true;
      document.getElementsByTagName('html')[0].classList.add('fs-modal-open');
    }
  }
  
  close() {
    if (typeof document !== "undefined") {
      this.opened = false;
      document.getElementsByTagName('html')[0].classList.remove('fs-modal-open');
      this.cancelEmitter.emit();
    }
  }
  
  ok() {
    this.close();
    this.okEmitter.emit(true);
  }
}