Project

General

Profile

« Previous | Next » 

Revision 60632

Added by Konstantinos Triantafyllou about 3 years ago

[Library | Trunk]: Fs modal redesign

View differences:

full-screen-modal.component.ts
1 
import {Component, ElementRef, EventEmitter, Input, OnInit, Output} from "@angular/core";
1 
import {Component, ElementRef, EventEmitter, OnInit, Output} from "@angular/core";
2 
import {fromEvent, Subscription} from 'rxjs';
3 
import {delay} from "rxjs/operators";
2 4 

  		




  3
  5
  
    
@Component({


  		




  4
  6
  
    
  selector: 'fs-modal',


  		




  5
  7
  
    
  template: `


  		




  6
  
  
    
    <div class="fs-modal">


  		




  7
  
  
    
      <a class="close" (click)="close()">


  		




  8
  
  
    
        <icon name="close" ratio="2"></icon>


  		




  9
  
  
    
      </a>


  		




  10
  
  
    
      <div class="header">


  		




  11
  
  
    
        <div class="uk-position-relative uk-height-1-1">


  		




  12
  
  
    
          <h5 *ngIf="title" class="uk-position-center">


  		




  13
  
  
    
            {{title}}


  		




  14
  
  
    
          </h5>


  		




  15
  
  
    
          <div *ngIf="keys" class="uk-position-center-right uk-visible@m">


  		




  16
  
  
    
            <button class="uk-button uk-button-secondary outlined" (click)="close()">{{cancelButtonText}}</button>


  		




  17
  
  
    
            <button class="uk-button uk-button-secondary space" (click)="ok()">{{okButtonText}}</button>


  		




  18
  
  
    
          </div>


  		




  
  8
  
    
    <div class="fs-modal" (click)="close()">


  		




  
  9
  
    
      <div id="fs-modal" (click)="$event.stopPropagation()" class="fs-modal-dialog">


  		




  
  10
  
    
        <a class="close" (click)="close()">


  		




  
  11
  
    
          <icon name="close"></icon>


  		




  
  12
  
    
        </a>


  		




  
  13
  
    
        <div class="header">


  		




  
  14
  
    
          <h6 *ngIf="title">{{title}}</h6>


  		




  19
  15
  
    
        </div>


  		




  20
  
  
    
      </div>


  		




  21
  
  
    
      <div class="content">


  		




  22
  
  
    
        <div class="content-header">


  		




  23
  
  
    
          <div *ngIf="keys" class="uk-flex uk-flex-center uk-width-1-1 uk-margin-medium-bottom uk-hidden@m">


  		




  24
  
  
    
            <button class="uk-button uk-button-secondary outlined" (click)="close()">{{cancelButtonText}}</button>


  		




  25
  
  
    
            <button class="uk-button uk-button-secondary space" (click)="ok()">{{okButtonText}}</button>


  		




  26
  
  
    
          </div>


  		




  27
  
  
    
          <ng-content select="[header]">


  		




  28
  
  
    
          </ng-content>


  		




  29
  
  
    
        </div>


  		




  30
  
  
    
        <div class="content-inner">


  		




  
  16
  
    
        <div class="content" [class.hasFooter]="keys">


  		




  31
  17
  
    
          <ng-content></ng-content>


  		




  32
  18
  
    
        </div>


  		




  
  19
  
    
        <div *ngIf="keys" class="footer uk-flex uk-flex-right">


  		




  
  20
  
    
          <button class="uk-button uk-button-secondary outlined" (click)="close()">{{cancelButtonText}}</button>


  		




  
  21
  
    
          <button class="uk-button uk-button-secondary space" (click)="ok()">{{okButtonText}}</button>


  		




  
  22
  
    
        </div>


  		




  33
  23
  
    
      </div>


  		




  34
  24
  
    
    </div>


  		




  35
  25
  
    
  `


  		




  ......




  45
  35
  
    
  cancelEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();


  		




  46
  36
  
    
  opened: boolean = false;


  		




  47
  37
  
    
  private readonly element: any;


  		




  
  38
  
    
  private subscriptions: any[] = [];


  		




  48
  39
  
    
  


  		




  49
  40
  
    
  constructor(private el: ElementRef) {


  		




  50
  41
  
    
    this.element = el.nativeElement;


  		




  51
  42
  
    
  }


  		




  52
  43
  
    
  


  		




  53
  44
  
    
  ngOnInit() {


  		




  54
  
  
    
    if(typeof document !== "undefined") {


  		




  
  45
  
    
    if (typeof document !== "undefined") {


  		




  55
  46
  
    
      document.body.appendChild(this.element);


  		




  
  47
  
    
      this.subscriptions.push(fromEvent(document, 'keydown').pipe(delay(1)).subscribe((event: KeyboardEvent) => {


  		




  
  48
  
    
        this.close();


  		




  
  49
  
    
      }));


  		




  56
  50
  
    
    }


  		




  57
  51
  
    
  }


  		




  58
  52
  
    
  


  		




  59
  53
  
    
  ngOnDestroy(): void {


  		




  60
  54
  
    
    this.element.remove();


  		




  
  55
  
    
    this.subscriptions.forEach(subscription => {


  		




  
  56
  
    
      if (subscription instanceof Subscription) {


  		




  
  57
  
    
        subscription.unsubscribe();


  		




  
  58
  
    
      }


  		




  
  59
  
    
    })


  		




  61
  60
  
    
  }


  		




  62
  61
  
    
  


  		




  63
  62
  
    
  open() {


  		




  64
  
  
    
    if(typeof document !== "undefined") {


  		




  
  63
  
    
    if (typeof document !== "undefined") {


  		




  65
  64
  
    
      this.opened = true;


  		




  66
  65
  
    
      document.getElementsByTagName('html')[0].classList.add('fs-modal-open');


  		




  67
  66
  
    
    }


  		




  68
  67
  
    
  }


  		




  69
  68
  
    
  


  		




  70
  69
  
    
  close() {


  		




  71
  
  
    
    if(typeof document !== "undefined") {


  		




  
  70
  
    
    if (typeof document !== "undefined") {


  		




  72
  71
  
    
      this.opened = false;


  		




  73
  72
  
    
      document.getElementsByTagName('html')[0].classList.remove('fs-modal-open');


  		




  74
  73
  
    
      this.cancelEmitter.emit();


  		












Also available in:  Unified diff