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

   1 import {Component, OnInit} from '@angular/core';
   2 import {GRAPH_EVENTS, SdcElementType} from "app/utils";
   3 import {LeftPaletteComponent, Point} from "app/models";
   4 import {EventListenerService} from "app/services";
   5 import {LeftPaletteMetadataTypes} from "app/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 getMenuItems = () => {
  33         return [{
  34             text: 'Delete',
  35             iconName: 'trash-o',
  36             iconType: 'common',
  37             iconMode: 'secondary',
  38             iconSize: 'small',
  39             type: '',
  40             action: () => this.addZoneInstance()
  41         }];
  42     }
  43
  44     public onMouseLeave() {
  45         this.isShowPanel = false;
  46     }
  47
  48     public addZoneInstance(): void {
  49         if(this.displayComponent) {
  50             this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_ADD_ZONE_INSTANCE_FROM_PALETTE, this.component, this.displayComponent, this.popupPanelPosition);
  51             this.hidePopupPanel();
  52         }
  53     }
  54
  55     private registerObserverCallbacks() {
  56
  57         this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_SHOW_POPUP_PANEL,
  58             (displayComponent: LeftPaletteComponent, sectionElem: HTMLElement) => {
  59                 this.showPopupPanel(displayComponent, sectionElem);
  60             });
  61
  62         this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HIDE_POPUP_PANEL, () => this.hidePopupPanel());
  63     }
  64
  65     private getPopupPanelPosition (sectionElem: HTMLElement):Point {
  66         let pos: ClientRect = sectionElem.getBoundingClientRect();
  67         let offsetX: number = -30;
  68         const offsetY: number = pos.height / 2;
  69         return new Point((pos.right + offsetX), (pos.top - offsetY + window.pageYOffset));
  70     };
  71
  72     private setPopupPanelTitle(component: LeftPaletteComponent): void {
  73         if (component.componentSubType === SdcElementType.GROUP) {
  74             this.panelTitle = "Add Group";
  75             return;
  76         }
  77
  78         if (component.componentSubType === SdcElementType.POLICY) {
  79             this.panelTitle = "Add Policy";
  80             return;
  81         }
  82     }
  83
  84     private showPopupPanel(displayComponent:LeftPaletteComponent, sectionElem: HTMLElement) {
  85         if(!this.isShowPanel){
  86             this.displayComponent = displayComponent;
  87             this.setPopupPanelTitle(displayComponent);
  88             this.popupPanelPosition = this.getPopupPanelPosition(sectionElem);
  89             this.isShowPanel = true;
  90         }
  91     };
  92
  93     private hidePopupPanel() {
  94         if(this.isShowPanel){
  95             this.isShowPanel = false;
  96         }
  97     };
  98 }