summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.ts
blob: 68cfedb32b223798a06299ef78df30097b54b55c (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
import {Component, OnChanges, AfterViewChecked, ViewChild, ElementRef, Input, Output, SimpleChanges, EventEmitter} from "@angular/core";
import {WindowRef} from "../../services/window.service";

@Component({
	selector: 'multiline-ellipsis',
	templateUrl: 'multiline-ellipsis.component.html',
	styleUrls: ['multiline-ellipsis.component.less']
})
export class MultilineEllipsisComponent implements OnChanges, AfterViewChecked {

	@Input() public lines: number;
	@Input() public lineHeight: string;
	@Input() public className: string;
	@Output() public hasEllipsisChanged: EventEmitter<boolean>;

	@ViewChild('multilineEllipsisContainer') public elmContainer: ElementRef;
	@ViewChild('multilineEllipsisContent') public elmContent: ElementRef;

	public stylesContainer: {[key: string]: string};
	public stylesContent: {[key: string]: string};
	public stylesDots: {[key: string]: string};

	private hasEllipsis: boolean;

	public constructor(private windowRef: WindowRef) {
		this.hasEllipsisChanged = new EventEmitter<boolean>();
	}

	public ngOnChanges(changes: SimpleChanges) {
		this.prepareStyles()
	}

	public ngAfterViewChecked() {
		const hasEllipsis = (this.elmContainer.nativeElement.offsetHeight < this.elmContent.nativeElement.offsetHeight);
		if (hasEllipsis !== this.hasEllipsis) {
			this.hasEllipsis = hasEllipsis;
			this.hasEllipsisChanged.emit(this.hasEllipsis);
		}
	}

	private prepareStyles() {
		const lineHeight = this.lineHeight || this.getLineHeight();
		this.stylesContainer = {
            'max-height': `calc(${this.lines} * ${lineHeight})`
        };
		this.stylesContent = {
        	'max-height': `calc(${this.lines + 1} * ${lineHeight})`
		};
		this.stylesDots = {
        	'top': `calc(${2 * this.lines} * ${lineHeight} - 100%)`
		};
	}

	private getLineHeight() {
		return this.windowRef.nativeWindow.getComputedStyle(this.elmContainer.nativeElement)['line-height'];
	}

}