From 5b593496b8f1b8e8be8d7d2dbcc223332e65a49b Mon Sep 17 00:00:00 2001 From: Michael Lando Date: Sun, 29 Jul 2018 16:13:45 +0300 Subject: re base code Change-Id: I12a5ca14a6d8a87e9316b9ff362eb131105f98a5 Issue-ID: SDC-1566 Signed-off-by: Michael Lando --- .../multiline-ellipsis.component.ts | 58 ++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.ts (limited to 'catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.ts') diff --git a/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.ts b/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.ts new file mode 100644 index 0000000000..68cfedb32b --- /dev/null +++ b/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.ts @@ -0,0 +1,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; + + @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(); + } + + 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']; + } + +} -- cgit 1.2.3-korg