Commits
Nicolai Olsen authored cab6a1d935c
1 1 | import { Directive, Input, ElementRef, HostListener, Renderer2 } from '@angular/core'; |
2 2 | import {WindowService} from '../services/window.service'; |
3 3 | import {DocumentService} from '../services/document.service'; |
4 4 | |
5 5 | @Directive({ |
6 6 | selector: '[appTooltip]' |
7 7 | }) |
8 8 | export class TooltipDirective { |
9 + | @Input() appTooltipTitle: string | undefined; |
9 10 | @Input() appTooltip: string | undefined; |
10 11 | @Input() placement: 'top' | 'bottom' | 'left' | 'right' | 'cursor' = 'bottom'; |
11 12 | @Input() tooltipClasses: string | undefined; |
12 13 | @Input() delay = 0; |
13 14 | tooltip: HTMLElement | undefined; |
14 15 | offset = 0; |
15 16 | private timeout: number | undefined; |
16 17 | private window: Window; |
17 18 | private document: Document; |
18 19 | private mousePosition: MouseEvent | undefined; |
38 39 | if (!this.tooltip && this.placement === 'cursor') { |
39 40 | this.mousePosition = event; |
40 41 | } |
41 42 | } |
42 43 | |
43 44 | @HostListener('mouseleave') onMouseLeave(): void { |
44 45 | if (this.timeout) { clearTimeout(this.timeout); } |
45 46 | if (this.tooltip) { this.hide(); } |
46 47 | } |
47 48 | |
49 + | get tooltipTitle(): string | undefined { |
50 + | return this.appTooltipTitle; |
51 + | } |
52 + | |
48 53 | get tooltipText(): string | undefined { |
49 54 | return this.appTooltip; |
50 55 | } |
51 56 | |
52 57 | public show(): void { |
53 58 | this.create(); |
54 59 | this.setPosition(); |
55 60 | this.renderer.addClass(this.tooltip, 'ng-tooltip-show'); |
56 61 | } |
57 62 | |
61 66 | this.window.setTimeout(() => { |
62 67 | if (this.tooltip) { |
63 68 | this.renderer.removeChild(this.documentService.nativeDocument().body, this.tooltip); |
64 69 | this.tooltip = undefined; |
65 70 | } |
66 71 | }, 500); |
67 72 | } |
68 73 | } |
69 74 | |
70 75 | create(): void { |
71 - | this.tooltip = this.renderer.createElement('span'); // TODO: understøt headers i tooltips |
76 + | this.tooltip = this.renderer.createElement('div'); |
77 + | const tooltipHeader = this.renderer.createElement('h4'); |
78 + | const tooltipContent = this.renderer.createElement('span'); |
79 + | |
80 + | if (this.tooltipTitle != null) { |
81 + | this.renderer.appendChild( |
82 + | tooltipHeader, |
83 + | this.renderer.createText(this.tooltipTitle) |
84 + | ); |
85 + | } |
72 86 | |
73 87 | if (this.tooltipText != null) { |
74 88 | this.renderer.appendChild( |
75 - | this.tooltip, |
89 + | tooltipContent, |
76 90 | this.renderer.createText(this.tooltipText) |
77 91 | ); |
78 92 | } |
93 + | |
94 + | this.renderer.appendChild(this.tooltip, tooltipHeader); |
95 + | this.renderer.appendChild(this.tooltip, tooltipContent); |
79 96 | this.renderer.appendChild(this.documentService.nativeDocument().body, this.tooltip); |
80 97 | this.renderer.addClass(this.tooltip, 'ng-tooltip'); |
81 98 | this.renderer.addClass(this.tooltip, `ng-tooltip-${this.placement}`); |
82 99 | this.renderer.setStyle(this.tooltip, '-webkit-transition', `opacity ${this.delay}ms`); |
83 100 | this.renderer.setStyle(this.tooltip, '-moz-transition', `opacity ${this.delay}ms`); |
84 101 | this.renderer.setStyle(this.tooltip, '-o-transition', `opacity ${this.delay}ms`); |
85 102 | this.renderer.setStyle(this.tooltip, 'transition', `opacity ${this.delay}ms`); |
86 103 | if (!!this.tooltipClasses) { |
87 104 | this.renderer.addClass(this.tooltip, this.tooltipClasses); |
88 105 | } |