gerrit.onap Code Review - sdc/sdc-workflow-designer.git/blob

   1 import {CommonModule} from '@angular/common';
   2 import {AfterViewInit, Component, ElementRef, EventEmitter, Input, NgModule, OnDestroy, OnInit, Output, Renderer} from '@angular/core';
   3
   4 import {DomHandler} from '../domhandler';
   5
   6 @Component({
   7   selector: 'plx-overlay-panel',
   8   template: `
   9         <div [ngClass]="'ui-overlaypanel ui-widget ui-widget-content ui-corner-all ui-shadow'" [ngStyle]="style" [class]="styleClass"
  10             [style.display]="visible ? 'block' : 'none'" (click)="onPanelClick()">
  11             <div class="ui-overlaypanel-content">
  12                 <ng-content></ng-content>
  13             </div>
  14             <a href="#" *ngIf="showCloseIcon" class="ui-overlaypanel-close ui-state-default" (click)="onCloseClick($event)">
  15                 <span class="fa fa-fw fa-close"></span>
  16             </a>
  17         </div>
  18     `,
  19   providers: [DomHandler]
  20 })
  21 export class PlxOverlayPanelComponent implements OnInit, AfterViewInit,
  22                                                                                                 OnDestroy {
  23   @Input() dismissable: boolean = true;
  24
  25   @Input() showCloseIcon: boolean;
  26
  27   @Input() style: any;
  28
  29   @Input() styleClass: string;
  30
  31   @Input() appendTo: any;
  32
  33   @Output() onBeforeShow: EventEmitter<any> = new EventEmitter();
  34
  35   @Output() onAfterShow: EventEmitter<any> = new EventEmitter();
  36
  37   @Output() onBeforeHide: EventEmitter<any> = new EventEmitter();
  38
  39   @Output() onAfterHide: EventEmitter<any> = new EventEmitter();
  40
  41   container: any;
  42
  43   visible: boolean = false;
  44
  45   documentClickListener: any;
  46
  47   selfClick: boolean;
  48
  49   targetEvent: boolean;
  50
  51   target: any;
  52
  53   constructor(
  54                 public el: ElementRef, public domHandler: DomHandler,
  55                 public renderer: Renderer) {}
  56
  57   ngOnInit() {
  58         if (this.dismissable) {
  59                 this.documentClickListener =
  60                         this.renderer.listenGlobal('body', 'click', () => {
  61                         if (!this.selfClick && !this.targetEvent) {
  62                                 this.hide();
  63                         }
  64                         this.selfClick = false;
  65                         this.targetEvent = false;
  66                         });
  67         }
  68   }
  69
  70   ngAfterViewInit() {
  71         this.container = this.el.nativeElement.children[0];
  72         if (this.appendTo) {
  73                 if (this.appendTo === 'body') {
  74                 document.body.appendChild(this.container);
  75                 } else {
  76                 this.domHandler.appendChild(this.container, this.appendTo);
  77                 }
  78         }
  79   }
  80
  81   toggle(event: any, target?: any) {
  82         let currentTarget = (target || event.currentTarget || event.target);
  83
  84         if (!this.target || this.target === currentTarget) {
  85                 if (this.visible) {
  86                 this.hide();
  87                 } else {
  88                 this.show(event, target);
  89                 }
  90         } else {
  91                 this.show(event, target);
  92         }
  93
  94         if (this.dismissable) {
  95                 this.targetEvent = true;
  96         }
  97
  98         this.target = currentTarget;
  99   }
 100
 101   show(event: any, target?: any) {
 102         if (this.dismissable) {
 103                 this.targetEvent = true;
 104         }
 105
 106         this.onBeforeShow.emit(null);
 107         let elementTarget = target || event.currentTarget || event.target;
 108         this.container.style.zIndex = ++DomHandler.zindex;
 109
 110         if (this.visible) {
 111                 this.domHandler.absolutePosition(this.container, elementTarget);
 112         } else {
 113                 this.visible = true;
 114                 this.domHandler.absolutePosition(this.container, elementTarget);
 115                 this.domHandler.fadeIn(this.container, 250);
 116         }
 117         this.onAfterShow.emit(null);
 118   }
 119
 120   hide() {
 121         if (this.visible) {
 122                 this.onBeforeHide.emit(null);
 123                 this.visible = false;
 124                 this.onAfterHide.emit(null);
 125         }
 126   }
 127
 128   onPanelClick() {
 129         if (this.dismissable) {
 130                 this.selfClick = true;
 131         }
 132   }
 133
 134   onCloseClick(event: any) {
 135         this.hide();
 136
 137         if (this.dismissable) {
 138                 this.selfClick = true;
 139         }
 140
 141         event.preventDefault();
 142   }
 143
 144   ngOnDestroy() {
 145         if (this.documentClickListener) {
 146                 this.documentClickListener();
 147         }
 148
 149         if (this.appendTo) {
 150                 this.el.nativeElement.appendChild(this.container);
 151         }
 152
 153         this.target = null;
 154   }
 155 }
 156
 157 @NgModule({
 158   imports: [CommonModule],
 159   exports: [PlxOverlayPanelComponent],
 160   declarations: [PlxOverlayPanelComponent]
 161 })
 162 export class PlxOverlayPanelModule {
 163 }