blob: 79d35c6e0efaf7695fdebeea9b4782405e69b526 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
/*-
* ============LICENSE_START=======================================================
* SDC
* ================================================================================
* Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
* ================================================================================
* 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.
* See the License for the specific language governing permissions and
* limitations under the License.
* ============LICENSE_END=========================================================
*/
import {
Directive, ComponentRef, ViewContainerRef, ComponentFactoryResolver, Input, HostListener
} from "@angular/core";
import {TooltipContentComponent} from "./tooltip-content.component";
@Directive ({
selector: "[tooltip]"
})
export class TooltipComponent {
// -------------------------------------------------------------------------
// Properties
// -------------------------------------------------------------------------
private tooltip: ComponentRef<TooltipContentComponent>;
private visible: boolean;
private delayInProgress: boolean = false;
// -------------------------------------------------------------------------
// Constructor
// -------------------------------------------------------------------------
constructor(private viewContainerRef: ViewContainerRef,
private resolver: ComponentFactoryResolver) {
}
// -------------------------------------------------------------------------
// Inputs / Outputs
// -------------------------------------------------------------------------
@Input("tooltip") content: string|TooltipContentComponent;
@Input() tooltipDisabled: boolean;
@Input() tooltipAnimation: boolean = true;
@Input() tooltipPlacement: "top"|"bottom"|"left"|"right" = "bottom";
@Input() tooltipDelay: number = 1500;
// -------------------------------------------------------------------------
// Public Methods
// -------------------------------------------------------------------------
@HostListener("mouseenter")
show(): void {
if(this.tooltipDisabled || this.visible || this.content === "") {
return;
}
if (this.tooltipDelay && !this.delayInProgress) {
this.delayInProgress = true;
setTimeout(() => { this.delayInProgress && this.show() }, this.tooltipDelay);
return;
}
this.visible = true;
if (typeof this.content === "string") {
const factory = this.resolver.resolveComponentFactory(TooltipContentComponent);
if (!this.visible) {
return;
}
this.tooltip = this.viewContainerRef.createComponent(factory);
this.tooltip.instance.hostElement = this.viewContainerRef.element.nativeElement;
this.tooltip.instance.content = this.content as string;
this.tooltip.instance.placement = this.tooltipPlacement;
this.tooltip.instance.animation = this.tooltipAnimation;
} else {
const tooltip = this.content as TooltipContentComponent;
tooltip.hostElement = this.viewContainerRef.element.nativeElement;
tooltip.placement = this.tooltipPlacement;
tooltip.animation = this.tooltipAnimation;
tooltip.show();
}
}
@HostListener("mouseleave")
hide(): void {
this.delayInProgress = false;
if (!this.visible) {
return;
}
this.visible = false;
if (this.tooltip) {
this.tooltip.destroy();
}
if (this.content instanceof TooltipContentComponent) {
(this.content as TooltipContentComponent).hide();
}
}
}
|
