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

import {Component, ElementRef, EventEmitter, Input, OnInit, Output} from "@angular/core";

@Component({
  selector: 'fs-modal',
  template: `
    <div class="fs-modal">
      <a class="close" (click)="close()">
        <icon name="close" ratio="2"></icon>
      </a>
      <div class="header">
        <div class="uk-position-relative uk-height-1-1">
          <h5 *ngIf="title" class="uk-position-center">
            {{title}}
          </h5>
          <div *ngIf="keys" class="uk-position-center-right uk-visible@m">
            <button class="uk-button uk-button-secondary outlined" (click)="close()">{{cancelButtonText}}</button>
            <button class="uk-button uk-button-secondary space" (click)="ok()">{{okButtonText}}</button>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="content-header">
          <div *ngIf="keys" class="uk-flex uk-flex-center uk-width-1-1 uk-margin-medium-bottom uk-hidden@m">
            <button class="uk-button uk-button-secondary outlined" (click)="close()">{{cancelButtonText}}</button>
            <button class="uk-button uk-button-secondary space" (click)="ok()">{{okButtonText}}</button>
          </div>
          <ng-content select="[header]">
          </ng-content>
        </div>
        <div class="content-inner">
          <ng-content></ng-content>
        </div>
      </div>
    </div>
  `
})
export class FullScreenModalComponent implements OnInit {
  okButtonText = 'OK';
  cancelButtonText = 'Cancel';
  keys: boolean = false;
  title: string = null;
  @Output()
  okEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
  @Output()
  cancelEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
  opened: boolean = false;
  private readonly element: any;
  
  constructor(private el: ElementRef) {
    this.element = el.nativeElement;
  }
  
  ngOnInit() {
    if(typeof document !== "undefined") {
      document.body.appendChild(this.element);
    }
  }
  
  ngOnDestroy(): void {
    this.element.remove();
  }
  
  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);
  }
}