toni
54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import {
|
|
AfterViewInit,
|
|
Directive,
|
|
effect,
|
|
ElementRef,
|
|
inject,
|
|
input,
|
|
signal,
|
|
WritableSignal,
|
|
} from '@angular/core';
|
|
import { MatTooltip } from '@angular/material/tooltip';
|
|
|
|
@Directive({
|
|
selector: '[ellipsis]',
|
|
hostDirectives: [MatTooltip],
|
|
})
|
|
export class Ellipsis implements AfterViewInit {
|
|
// private readonly templateRef = inject(TemplateRef<any>);
|
|
// private readonly viewContainer = inject(ViewContainerRef);
|
|
private readonly elementRef = inject<ElementRef<HTMLElement>>(
|
|
ElementRef<HTMLElement>,
|
|
);
|
|
private readonly tooltip = inject(MatTooltip);
|
|
private readonly originalText: WritableSignal<string>;
|
|
public readonly ellipsis = input.required<number>();
|
|
|
|
public constructor() {
|
|
this.originalText = signal(this.elementRef.nativeElement.innerHTML);
|
|
effect(() => {
|
|
const length = this.ellipsis();
|
|
const originalText = this.originalText();
|
|
this.tooltip.message = originalText;
|
|
if (length < 0) {
|
|
console.warn('Ellipsis Pipe with negative length', length);
|
|
this.elementRef.nativeElement.innerHTML = '';
|
|
return;
|
|
}
|
|
if (length < 4) {
|
|
this.elementRef.nativeElement.innerHTML = '.'.repeat(length);
|
|
return;
|
|
}
|
|
if (originalText.length > length) {
|
|
this.elementRef.nativeElement.innerHTML = `${originalText.substring(0, length - 3)}...`;
|
|
return;
|
|
}
|
|
});
|
|
}
|
|
|
|
public ngAfterViewInit(): void {
|
|
const originalText = this.elementRef.nativeElement.innerText;
|
|
this.originalText.set(originalText);
|
|
}
|
|
}
|