catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.ts

   1 import {Component, OnChanges, AfterViewChecked, ViewChild, ElementRef, Input, Output, SimpleChanges, EventEmitter} from "@angular/core";
   2 import {WindowRef} from "../../services/window.service";
   3
   4 @Component({
   5         selector: 'multiline-ellipsis',
   6         templateUrl: 'multiline-ellipsis.component.html',
   7         styleUrls: ['multiline-ellipsis.component.less']
   8 })
   9 export class MultilineEllipsisComponent implements OnChanges, AfterViewChecked {
  10
  11         @Input() public lines: number;
  12         @Input() public lineHeight: string;
  13         @Input() public className: string;
  14         @Output() public hasEllipsisChanged: EventEmitter<boolean>;
  15
  16         @ViewChild('multilineEllipsisContainer') public elmContainer: ElementRef;
  17         @ViewChild('multilineEllipsisContent') public elmContent: ElementRef;
  18
  19         public stylesContainer: {[key: string]: string};
  20         public stylesContent: {[key: string]: string};
  21         public stylesDots: {[key: string]: string};
  22
  23         private hasEllipsis: boolean;
  24
  25         public constructor(private windowRef: WindowRef) {
  26                 this.hasEllipsisChanged = new EventEmitter<boolean>();
  27         }
  28
  29         public ngOnChanges(changes: SimpleChanges) {
  30                 this.prepareStyles()
  31         }
  32
  33         public ngAfterViewChecked() {
  34                 const hasEllipsis = (this.elmContainer.nativeElement.offsetHeight < this.elmContent.nativeElement.offsetHeight);
  35                 if (hasEllipsis !== this.hasEllipsis) {
  36                         this.hasEllipsis = hasEllipsis;
  37                         this.hasEllipsisChanged.emit(this.hasEllipsis);
  38                 }
  39         }
  40
  41         private prepareStyles() {
  42                 const lineHeight = this.lineHeight || this.getLineHeight();
  43                 this.stylesContainer = {
  44             'max-height': `calc(${this.lines} * ${lineHeight})`
  45         };
  46                 this.stylesContent = {
  47                 'max-height': `calc(${this.lines + 1} * ${lineHeight})`
  48                 };
  49                 this.stylesDots = {
  50                 'top': `calc(${2 * this.lines} * ${lineHeight} - 100%)`
  51                 };
  52         }
  53
  54         private getLineHeight() {
  55                 return this.windowRef.nativeWindow.getComputedStyle(this.elmContainer.nativeElement)['line-height'];
  56         }
  57
  58 }