diff options
author | Israel Lavi <il0695@att.com> | 2018-08-07 10:54:17 +0300 |
---|---|---|
committer | Israel Lavi <il0695@att.com> | 2018-08-07 11:06:44 +0300 |
commit | b2a3acea0d0f66028c9ce5fad02d4ecc64abf70c (patch) | |
tree | 8d70110f34cb845965c42a5915e950bca967d2c3 /src/angular/multiline-ellipsis/multiline-ellipsis.component.ts | |
parent | 05b37297177e8a342668c15e5d6f738b51f7aedd (diff) |
Initial commit.
Adding files needed for Linux Foundation.
Change-Id: I9f2b4851a5ae01f83800c7f8bab8608a2221c730
Issue-ID: SDC-1608
Signed-off-by: Israel Lavi <il0695@att.com>
Diffstat (limited to 'src/angular/multiline-ellipsis/multiline-ellipsis.component.ts')
-rw-r--r-- | src/angular/multiline-ellipsis/multiline-ellipsis.component.ts | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/src/angular/multiline-ellipsis/multiline-ellipsis.component.ts b/src/angular/multiline-ellipsis/multiline-ellipsis.component.ts new file mode 100644 index 0000000..bc7f805 --- /dev/null +++ b/src/angular/multiline-ellipsis/multiline-ellipsis.component.ts @@ -0,0 +1,70 @@ +import { Component, OnChanges, AfterViewChecked, ViewChild, ElementRef, Input, Output, SimpleChanges, EventEmitter } from "@angular/core"; +import { template } from './multiline-ellipsis.component.html'; + +declare const window: any; + +@Component({ + selector: 'multiline-ellipsis', + template: template +}) + +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() { + 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; + setTimeout(() => { + 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() { + let lineHeight: number = parseFloat(window.getComputedStyle(this.elmContainer.nativeElement)['line-height']); + if (!lineHeight) { + const oneLetterElm = window.document.createElement('div'); + oneLetterElm.innerText = '.'; + this.elmContainer.nativeElement.append(oneLetterElm); + lineHeight = oneLetterElm.clientHeight; + this.elmContainer.nativeElement.removeChild(oneLetterElm); + } + return `${lineHeight}px`; + } + +} |