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

   1 /*-
   2  * ============LICENSE_START=======================================================
   3  * SDC
   4  * ================================================================================
   5  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ============LICENSE_END=========================================================
  19  */
  20
  21 import {
  22     Directive, ComponentRef, ViewContainerRef, ComponentFactoryResolver, Input, HostListener
  23 } from "@angular/core";
  24 import {TooltipContentComponent} from "./tooltip-content.component";
  25
  26 @Directive ({
  27     selector: "[tooltip]"
  28 })
  29 export class TooltipComponent {
  30
  31     // -------------------------------------------------------------------------
  32     // Properties
  33     // -------------------------------------------------------------------------
  34
  35     private tooltip: ComponentRef<TooltipContentComponent>;
  36     private visible: boolean;
  37     private delayInProgress: boolean = false;
  38
  39     // -------------------------------------------------------------------------
  40     // Constructor
  41     // -------------------------------------------------------------------------
  42
  43     constructor(private viewContainerRef: ViewContainerRef,
  44                 private resolver: ComponentFactoryResolver) {
  45     }
  46
  47     // -------------------------------------------------------------------------
  48     // Inputs / Outputs
  49     // -------------------------------------------------------------------------
  50
  51     @Input("tooltip") content: string|TooltipContentComponent;
  52     @Input() tooltipDisabled: boolean;
  53     @Input() tooltipAnimation: boolean = true;
  54     @Input() tooltipPlacement: "top"|"bottom"|"left"|"right" = "bottom";
  55     @Input() tooltipDelay: number = 1500;
  56
  57     // -------------------------------------------------------------------------
  58     // Public Methods
  59     // -------------------------------------------------------------------------
  60
  61     @HostListener("mouseenter")
  62     show(): void {
  63         if(this.tooltipDisabled || this.visible || this.content === "") {
  64             return;
  65         }
  66         if (this.tooltipDelay && !this.delayInProgress) {
  67             this.delayInProgress = true;
  68             setTimeout(() => { this.delayInProgress && this.show() }, this.tooltipDelay);
  69             return;
  70         }
  71
  72         this.visible = true;
  73         if (typeof this.content === "string") {
  74             const factory = this.resolver.resolveComponentFactory(TooltipContentComponent);
  75             if (!this.visible) {
  76                 return;
  77             }
  78
  79             this.tooltip = this.viewContainerRef.createComponent(factory);
  80             this.tooltip.instance.hostElement = this.viewContainerRef.element.nativeElement;
  81             this.tooltip.instance.content = this.content as string;
  82             this.tooltip.instance.placement = this.tooltipPlacement;
  83             this.tooltip.instance.animation = this.tooltipAnimation;
  84         } else {
  85             const tooltip = this.content as TooltipContentComponent;
  86             tooltip.hostElement = this.viewContainerRef.element.nativeElement;
  87             tooltip.placement = this.tooltipPlacement;
  88             tooltip.animation = this.tooltipAnimation;
  89             tooltip.show();
  90         }
  91     }
  92
  93     @HostListener("mouseleave")
  94     hide(): void {
  95         this.delayInProgress = false;
  96         if (!this.visible) {
  97             return;
  98         }
  99
 100         this.visible = false;
 101         if (this.tooltip) {
 102             this.tooltip.destroy();
 103         }
 104         if (this.content instanceof TooltipContentComponent) {
 105             (this.content as TooltipContentComponent).hide();
 106         }
 107     }
 108 }
 109