catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.ts

   1 import {Component, OnInit} from '@angular/core';
   2 import {GRAPH_EVENTS} from "app/utils";
   3 import {LeftPaletteComponent, Point} from "app/models";
   4 import {EventListenerService} from "app/services";
   5 import {LeftPaletteMetadataTypes} from "../../../../models/components/displayComponent";
   6
   7 @Component({
   8     selector: 'app-palette-popup-panel',
   9     templateUrl: './palette-popup-panel.component.html',
  10     styleUrls: [ './palette-popup-panel.component.less' ],
  11 })
  12 export class PalettePopupPanelComponent implements OnInit {
  13
  14     public panelTitle: string;
  15     public isShowPanel: boolean;
  16     private component: Component;
  17     private displayComponent: LeftPaletteComponent;
  18     private popupPanelPosition:Point = new Point(0,0);
  19
  20     constructor(private eventListenerService: EventListenerService) {
  21         this.isShowPanel = false;
  22     }
  23
  24     ngOnInit() {
  25         this.registerObserverCallbacks();
  26     }
  27
  28     public onMouseEnter() {
  29         this.isShowPanel = true;
  30     }
  31
  32     public onMouseLeave() {
  33         this.isShowPanel = false;
  34     }
  35
  36     public addZoneInstance(): void {
  37         if(this.displayComponent) {
  38             this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_ADD_ZONE_INSTANCE_FROM_PALETTE, this.component, this.displayComponent, this.popupPanelPosition);
  39             this.hidePopupPanel();
  40         }
  41     }
  42
  43     private registerObserverCallbacks() {
  44
  45         this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_SHOW_POPUP_PANEL,
  46             (component: Component, displayComponent: LeftPaletteComponent, sectionElem: HTMLElement) => {
  47
  48                 this.component = component;
  49                 this.showPopupPanel(displayComponent, sectionElem);
  50             });
  51
  52         this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HIDE_POPUP_PANEL, () => this.hidePopupPanel());
  53     }
  54
  55     private getPopupPanelPosition (sectionElem: HTMLElement):Point {
  56         let pos: ClientRect = sectionElem.getBoundingClientRect();
  57         let offsetX: number = -30;
  58         const offsetY: number = pos.height / 2;
  59         return new Point((pos.right + offsetX), (pos.top - offsetY + window.pageYOffset));
  60     };
  61
  62     private setPopupPanelTitle(component: LeftPaletteComponent): void {
  63         if (component.categoryType === LeftPaletteMetadataTypes.Group) {
  64             this.panelTitle = "Add Group";
  65             return;
  66         }
  67
  68         if (component.categoryType === LeftPaletteMetadataTypes.Policy) {
  69             this.panelTitle = "Add Policy";
  70             return;
  71         }
  72     }
  73
  74     private showPopupPanel(displayComponent:LeftPaletteComponent, sectionElem: HTMLElement) {
  75         if(!this.isShowPanel){
  76             this.displayComponent = displayComponent;
  77             this.setPopupPanelTitle(displayComponent);
  78             this.popupPanelPosition = this.getPopupPanelPosition(sectionElem);
  79             this.isShowPanel = true;
  80         }
  81     };
  82
  83     private hidePopupPanel() {
  84         if(this.isShowPanel){
  85             this.isShowPanel = false;
  86         }
  87     };
  88 }