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

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

declare var UIkit;
@Component({
  selector: 'fs-modal',
  template: `
		<div #modal_full class="uk-modal-full" uk-modal>
			<div class="uk-modal-dialog uk-height-1-1">
				<button class="uk-modal-close-full uk-close-large uk-margin-medium-top uk-margin-medium-right" type="button" uk-close></button>
				<div class="uk-height-1-1">
					<div class="header">
						<ng-content select="[actions]"></ng-content>
					</div>
					<div class="content uk-height-1-1">
						<ng-content></ng-content>
					</div>
				</div>
			</div>
		</div>
    <!-- <div class="fs-modal">
      <div class="fs-modal-bg" (click)="close()"></div>
      <div id="fs-modal" class="fs-modal-dialog">
        <div class="header">
          <div class="uk-flex-middle uk-grid" uk-grid>
            <h4 *ngIf="title" class="uk-margin-remove uk-width-expand uk-text-truncate">{{title}}</h4>
            <div *ngIf="cancelButton || okButton" class="uk-flex uk-flex-right">
              <div>
                <ng-content select="[actions]"></ng-content>
              </div>
              <button *ngIf="cancelButton" class="uk-button uk-button-secondary outlined uk-margin-small-left" [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>
        <div class="content">
          <ng-content></ng-content>
        </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;
	@ViewChild('modal_full') element: ElementRef;
  private subscriptions: any[] = [];
  private clickedInside: boolean;
  
  constructor(private el: ElementRef) {
    this.element = el.nativeElement;
  }
  
  ngOnInit() {
    if (typeof document !== "undefined") {
      this.subscriptions.push(fromEvent(document, 'keydown').pipe(delay(1)).subscribe((event: KeyboardEvent) => {
        if(event.keyCode === 27) {
          this.close();
        }
      }));
    }
  }
  
  ngOnDestroy(): void {
    this.subscriptions.forEach(subscription => {
      if (subscription instanceof Subscription) {
        subscription.unsubscribe();
      }
    })
  }
  
  open() {
    UIkit.modal(this.element.nativeElement).show();
  }
  
  close() {
		UIkit.modal(this.element.nativeElement).hide();
    this.cancelEmitter.emit();
  }
  
  ok() {
    this.close();
    this.okEmitter.emit(true);
  }
}