1 files changed, 73 insertions, 67 deletions
diff --git a/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts
index 6eb36287d0..bea592d2a6 100644
--- a/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -18,25 +18,25 @@
  * ============LICENSE_END=========================================================
  */
 
-import {Component, Input, Output, AfterViewInit, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild, EventEmitter, Renderer } from "@angular/core";
-import {ButtonsModelMap} from "app/models";
-import {PopoverComponent} from "./popover.component";
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnDestroy, Output, Renderer, ViewChild } from '@angular/core';
+import { ButtonsModelMap } from 'app/models';
+import { PopoverComponent } from './popover.component';
 
 @Component({
-    selector: "popover-content",
-    templateUrl:'./popover-content.component.html',
-    styleUrls:['popover-content.component.less']
+    selector: 'popover-content',
+    templateUrl: './popover-content.component.html',
+    styleUrls: ['popover-content.component.less']
 })
 export class PopoverContentComponent implements AfterViewInit, OnDestroy {
 
     @Input() public title: string;
-    @Input() public buttons:ButtonsModelMap;
+    @Input() public buttons: ButtonsModelMap;
 
     @Input()
     content: string;
 
     @Input()
-    placement: "top"|"bottom"|"left"|"right"|"auto"|"auto top"|"auto bottom"|"auto left"|"auto right" = "bottom";
+    placement: 'top'|'bottom'|'left'|'right'|'auto'|'auto top'|'auto bottom'|'auto left'|'auto right' = 'bottom';
 
     @Input()
     animation: boolean = true;
@@ -50,52 +50,56 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
     @Input()
     hideArrow: boolean = false;
 
-    @ViewChild("popoverDiv")
+    @ViewChild('popoverDiv')
     popoverDiv: ElementRef;
 
-    buttonsNames:Array<string>;
+    buttonsNames: string[];
 
     popover: PopoverComponent;
     onCloseFromOutside = new EventEmitter();
-    top: number = -10000;
-    left: number = -10000;
+    top: number = 250;
+    left: number = 300;
     isIn: boolean = false;
-    displayType: string = "none";
+    displayType: string = 'none';
     effectivePlacement: string;
 
-    onDocumentMouseDown = (event: any) => {
-        const element = this.element.nativeElement;
-        if (!element || !this.popover) return;
-        if (element.contains(event.target) || this.popover.getElement().contains(event.target)) return;
-        this.hide();
-        this.onCloseFromOutside.emit(undefined);
-    };
-
+    listenClickFunc: any;
+    listenMouseFunc: any;
 
     constructor(protected element: ElementRef,
                 protected cdr: ChangeDetectorRef,
                 protected renderer: Renderer) {
     }
 
-    listenClickFunc: any;
-    listenMouseFunc: any;
+    onDocumentMouseDown = (event: any) => {
+        const element = this.element.nativeElement;
+        if (!element || !this.popover) { return; }
+        if (element.contains(event.target) || this.popover.getElement().contains(event.target)) { return; }
+        this.hide();
+        this.onCloseFromOutside.emit(undefined);
+    }
 
     ngAfterViewInit(): void {
-        this.buttonsNames = Object.keys(this.buttons);
-        if (this.closeOnClickOutside)
-            this.listenClickFunc = this.renderer.listenGlobal("document", "mousedown", (event: any) => this.onDocumentMouseDown(event));
-        if (this.closeOnMouseOutside)
-            this.listenMouseFunc = this.renderer.listenGlobal("document", "mouseover", (event: any) => this.onDocumentMouseDown(event));
+        if ( this.buttons ) {
+            this.buttonsNames = Object.keys(this.buttons);
+        }
+        if (this.closeOnClickOutside) {
+            this.listenClickFunc = this.renderer.listenGlobal('document', 'mousedown', (event: any) => this.onDocumentMouseDown(event));
+        }
+        if (this.closeOnMouseOutside) {
+            this.listenMouseFunc = this.renderer.listenGlobal('document', 'mouseover', (event: any) => this.onDocumentMouseDown(event));
+        }
 
-        this.show();
         this.cdr.detectChanges();
     }
 
     ngOnDestroy() {
-        if (this.closeOnClickOutside)
+        if (this.closeOnClickOutside) {
             this.listenClickFunc();
-        if (this.closeOnMouseOutside)
+        }
+        if (this.closeOnMouseOutside) {
             this.listenMouseFunc();
+        }
     }
 
     // -------------------------------------------------------------------------
@@ -103,11 +107,12 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
     // -------------------------------------------------------------------------
 
     show(): void {
-        if (!this.popover || !this.popover.getElement())
+        if (!this.popover || !this.popover.getElement()) {
             return;
+        }
 
         const p = this.positionElements(this.popover.getElement(), this.popoverDiv.nativeElement, this.placement);
-        this.displayType = "block";
+        this.displayType = 'block';
         this.top = p.top;
         this.left = p.left;
         this.isIn = true;
@@ -121,8 +126,7 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
     }
 
     hideFromPopover() {
-        this.top = -10000;
-        this.left = -10000;
+        this.displayType = 'none';
         this.isIn = true;
     }
 
@@ -131,56 +135,56 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
     // -------------------------------------------------------------------------
 
     protected positionElements(hostEl: HTMLElement, targetEl: HTMLElement, positionStr: string, appendToBody: boolean = false): { top: number, left: number } {
-        let positionStrParts = positionStr.split("-");
+        const positionStrParts = positionStr.split('-');
         let pos0 = positionStrParts[0];
-        let pos1 = positionStrParts[1] || "center";
-        let hostElPos = appendToBody ? this.offset(hostEl) : this.position(hostEl);
-        let targetElWidth = targetEl.offsetWidth;
-        let targetElHeight = targetEl.offsetHeight;
+        const pos1 = positionStrParts[1] || 'center';
+        const hostElPos = appendToBody ? this.offset(hostEl) : this.position(hostEl);
+        const targetElWidth = targetEl.offsetWidth;
+        const targetElHeight = targetEl.offsetHeight;
 
         this.effectivePlacement = pos0 = this.getEffectivePlacement(pos0, hostEl, targetEl);
 
-        let shiftWidth: any = {
-            center: function (): number {
+        const shiftWidth: any = {
+            center(): number {
                 return hostElPos.left + hostElPos.width / 2 - targetElWidth / 2;
             },
-            left: function (): number {
+            left(): number {
                 return hostElPos.left;
             },
-            right: function (): number {
+            right(): number {
                 return hostElPos.left + hostElPos.width - targetElWidth;
             }
         };
 
-        let shiftHeight: any = {
-            center: function (): number {
+        const shiftHeight: any = {
+            center(): number {
                 return hostElPos.top + hostElPos.height / 2 - targetElHeight / 2;
             },
-            top: function (): number {
+            top(): number {
                 return hostElPos.top;
             },
-            bottom: function (): number {
+            bottom(): number {
                 return hostElPos.top + hostElPos.height - targetElHeight;
             }
         };
 
         let targetElPos: { top: number, left: number };
         switch (pos0) {
-            case "right":
+            case 'right':
                 targetElPos = {
                     top: shiftHeight[pos1](),
                     left: hostElPos.left + hostElPos.width
                 };
                 break;
 
-            case "left":
+            case 'left':
                 targetElPos = {
                     top: shiftHeight[pos1](),
                     left: hostElPos.left - targetElWidth
                 };
                 break;
 
-            case "bottom":
+            case 'bottom':
                 targetElPos = {
                     top: hostElPos.top + hostElPos.height,
                     left: shiftWidth[pos1]()
@@ -228,18 +232,20 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
     }
 
     protected getStyle(nativeEl: HTMLElement, cssProp: string): string {
-        if ((nativeEl as any).currentStyle) // IE
+        if ((nativeEl as any).currentStyle) { // IE
             return (nativeEl as any).currentStyle[cssProp];
+        }
 
-        if (window.getComputedStyle)
+        if (window.getComputedStyle) {
             return (window.getComputedStyle as any)(nativeEl)[cssProp];
+        }
 
         // finally try and get inline style
         return (nativeEl.style as any)[cssProp];
     }
 
     protected isStaticPositioned(nativeEl: HTMLElement): boolean {
-        return (this.getStyle(nativeEl, "position") || "static" ) === "static";
+        return (this.getStyle(nativeEl, 'position') || 'static' ) === 'static';
     }
 
     protected parentOffsetEl(nativeEl: HTMLElement): any {
@@ -251,26 +257,26 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
     }
 
     protected getEffectivePlacement(placement: string, hostElement: HTMLElement, targetElement: HTMLElement): string {
-        const placementParts = placement.split(" ");
-        if (placementParts[0] !== "auto") {
+        const placementParts = placement.split(' ');
+        if (placementParts[0] !== 'auto') {
             return placement;
         }
 
         const hostElBoundingRect = hostElement.getBoundingClientRect();
 
-        const desiredPlacement = placementParts[1] || "bottom";
+        const desiredPlacement = placementParts[1] || 'bottom';
 
-        if (desiredPlacement === "top" && hostElBoundingRect.top - targetElement.offsetHeight < 0) {
-            return "bottom";
+        if (desiredPlacement === 'top' && hostElBoundingRect.top - targetElement.offsetHeight < 0) {
+            return 'bottom';
         }
-        if (desiredPlacement === "bottom" && hostElBoundingRect.bottom + targetElement.offsetHeight > window.innerHeight) {
-            return "top";
+        if (desiredPlacement === 'bottom' && hostElBoundingRect.bottom + targetElement.offsetHeight > window.innerHeight) {
+            return 'top';
         }
-        if (desiredPlacement === "left" && hostElBoundingRect.left - targetElement.offsetWidth < 0) {
-            return "right";
+        if (desiredPlacement === 'left' && hostElBoundingRect.left - targetElement.offsetWidth < 0) {
+            return 'right';
         }
-        if (desiredPlacement === "right" && hostElBoundingRect.right + targetElement.offsetWidth > window.innerWidth) {
-            return "left";
+        if (desiredPlacement === 'right' && hostElBoundingRect.right + targetElement.offsetWidth > window.innerWidth) {
+            return 'left';
         }
 
         return desiredPlacement;