Vladyslav_Prykhodko
2 years ago
33 changed files with 242 additions and 103 deletions
@ -0,0 +1,17 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 The Thingsboard Authors
|
|||
///
|
|||
/// 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.
|
|||
///
|
|||
|
|||
export * from './tooltip/tooltip.directive'; |
|||
@ -0,0 +1,109 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 The Thingsboard Authors
|
|||
///
|
|||
/// 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.
|
|||
///
|
|||
|
|||
import { |
|||
AfterViewInit, |
|||
Directive, |
|||
ElementRef, |
|||
Input, |
|||
OnDestroy, |
|||
OnInit, |
|||
Renderer2, |
|||
} from '@angular/core'; |
|||
import { fromEvent, Subject } from 'rxjs'; |
|||
import { filter, takeUntil, tap } from 'rxjs/operators'; |
|||
import { MatTooltip, TooltipPosition } from '@angular/material/tooltip'; |
|||
|
|||
@Directive({ |
|||
standalone: true, |
|||
selector: '[tbTruncateTooltip]', |
|||
providers: [MatTooltip], |
|||
|
|||
}) |
|||
export class TooltipDirective implements OnInit, AfterViewInit, OnDestroy { |
|||
@Input('tbTruncateTooltip') text: string; |
|||
@Input() tooltipEnabled = true; |
|||
@Input() position: TooltipPosition = 'above'; |
|||
|
|||
private destroy$ = new Subject<void>(); |
|||
|
|||
constructor( |
|||
private elementRef: ElementRef, |
|||
private renderer: Renderer2, |
|||
private tooltip: MatTooltip |
|||
) {} |
|||
|
|||
ngOnInit(): void { |
|||
this.observeMouseEvents(); |
|||
this.applyTruncationStyles(); |
|||
} |
|||
|
|||
ngAfterViewInit(): void { |
|||
if (!this.text) { |
|||
this.text = this.elementRef.nativeElement.innerText; |
|||
} |
|||
|
|||
this.tooltip.position = this.position; |
|||
} |
|||
|
|||
ngOnDestroy(): void { |
|||
if (this.tooltip._isTooltipVisible()) { |
|||
this.hideTooltip(); |
|||
} |
|||
this.destroy$.next(); |
|||
this.destroy$.complete(); |
|||
} |
|||
|
|||
private observeMouseEvents(): void { |
|||
fromEvent(this.elementRef.nativeElement, 'mouseenter') |
|||
.pipe( |
|||
filter(() => this.tooltipEnabled), |
|||
filter(() => this.isOverflown(this.elementRef.nativeElement)), |
|||
tap(() => this.showTooltip()), |
|||
takeUntil(this.destroy$), |
|||
) |
|||
.subscribe(); |
|||
fromEvent(this.elementRef.nativeElement, 'mouseleave') |
|||
.pipe( |
|||
filter(() => this.tooltipEnabled), |
|||
filter(() => this.tooltip._isTooltipVisible()), |
|||
tap(() => this.hideTooltip()), |
|||
takeUntil(this.destroy$), |
|||
) |
|||
.subscribe(); |
|||
} |
|||
|
|||
private applyTruncationStyles(): void { |
|||
this.renderer.setStyle(this.elementRef.nativeElement, 'white-space', 'nowrap'); |
|||
this.renderer.setStyle(this.elementRef.nativeElement, 'overflow', 'hidden'); |
|||
this.renderer.setStyle(this.elementRef.nativeElement, 'text-overflow', 'ellipsis'); |
|||
} |
|||
|
|||
private isOverflown(element: HTMLElement): boolean { |
|||
return element.clientWidth < element.scrollWidth; |
|||
} |
|||
|
|||
private showTooltip(): void { |
|||
this.tooltip.message = this.text; |
|||
|
|||
this.renderer.setAttribute(this.elementRef.nativeElement, 'matTooltip', this.text); |
|||
this.tooltip.show(); |
|||
} |
|||
|
|||
private hideTooltip(): void { |
|||
this.tooltip.hide(); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue