catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts

   1 import {
   2     Directive, ComponentRef, ViewContainerRef, ComponentFactoryResolver, Input, HostListener
   3 } from "@angular/core";
   4 import {TooltipContentComponent} from "./tooltip-content.component";
   5
   6 @Directive ({
   7     selector: "[tooltip]"
   8 })
   9 export class TooltipComponent {
  10
  11     // -------------------------------------------------------------------------
  12     // Properties
  13     // -------------------------------------------------------------------------
  14
  15     private tooltip: ComponentRef<TooltipContentComponent>;
  16     private visible: boolean;
  17     private delayInProgress: boolean = false;
  18
  19     // -------------------------------------------------------------------------
  20     // Constructor
  21     // -------------------------------------------------------------------------
  22
  23     constructor(private viewContainerRef: ViewContainerRef,
  24                 private resolver: ComponentFactoryResolver) {
  25     }
  26
  27     // -------------------------------------------------------------------------
  28     // Inputs / Outputs
  29     // -------------------------------------------------------------------------
  30
  31     @Input("tooltip") content: string|TooltipContentComponent;
  32     @Input() tooltipDisabled: boolean;
  33     @Input() tooltipAnimation: boolean = true;
  34     @Input() tooltipPlacement: "top"|"bottom"|"left"|"right" = "bottom";
  35     @Input() tooltipDelay: number = 1500;
  36
  37     // -------------------------------------------------------------------------
  38     // Public Methods
  39     // -------------------------------------------------------------------------
  40
  41     @HostListener("mouseenter")
  42     show(): void {
  43         if(this.tooltipDisabled || this.visible || this.content === "") {
  44             return;
  45         }
  46         if (this.tooltipDelay && !this.delayInProgress) {
  47             this.delayInProgress = true;
  48             setTimeout(() => { this.delayInProgress && this.show() }, this.tooltipDelay);
  49             return;
  50         }
  51
  52         this.visible = true;
  53         if (typeof this.content === "string") {
  54             const factory = this.resolver.resolveComponentFactory(TooltipContentComponent);
  55             if (!this.visible) {
  56                 return;
  57             }
  58
  59             this.tooltip = this.viewContainerRef.createComponent(factory);
  60             this.tooltip.instance.hostElement = this.viewContainerRef.element.nativeElement;
  61             this.tooltip.instance.content = this.content as string;
  62             this.tooltip.instance.placement = this.tooltipPlacement;
  63             this.tooltip.instance.animation = this.tooltipAnimation;
  64         } else {
  65             const tooltip = this.content as TooltipContentComponent;
  66             tooltip.hostElement = this.viewContainerRef.element.nativeElement;
  67             tooltip.placement = this.tooltipPlacement;
  68             tooltip.animation = this.tooltipAnimation;
  69             tooltip.show();
  70         }
  71     }
  72
  73     @HostListener("mouseleave")
  74     hide(): void {
  75         this.delayInProgress = false;
  76         if (!this.visible) {
  77             return;
  78         }
  79
  80         this.visible = false;
  81         if (this.tooltip) {
  82             this.tooltip.destroy();
  83         }
  84         if (this.content instanceof TooltipContentComponent) {
  85             (this.content as TooltipContentComponent).hide();
  86         }
  87     }
  88 }
  89