summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/shared/multiline-ellipsis
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/app/ng2/shared/multiline-ellipsis')
-rw-r--r--catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.html6
-rw-r--r--catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.less25
-rw-r--r--catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.ts58
-rw-r--r--catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.module.ts11
4 files changed, 100 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.html b/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.html
new file mode 100644
index 0000000000..c9f59f071c
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.html
@@ -0,0 +1,6 @@
+<div class="multiline-ellipsis-container" [ngClass]="className" [ngStyle]="stylesContainer" #multilineEllipsisContainer>
+ <div class="multiline-ellipsis-content" [ngStyle]="stylesContent" #multilineEllipsisContent>
+ <ng-content></ng-content>
+ <div class="multiline-ellipsis-dots" [ngStyle]="stylesDots"></div>
+ </div>
+</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.less b/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.less
new file mode 100644
index 0000000000..c616d37bd8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.component.less
@@ -0,0 +1,25 @@
+.multiline-ellipsis-container {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ white-space: normal;
+ //max-height: @num_lines * @line_height;
+
+ .multiline-ellipsis-content {
+ word-break: break-all;
+ position: relative;
+ //max-height: (@num_lines + 1) * @line_height;
+
+ .multiline-ellipsis-dots {
+ display: block;
+ position: absolute;
+ right: 0;
+ //top: calc(#{@num_lines * 2} - 100%);
+
+ &::before {
+ display: block;
+ content: '...';
+ }
+ }
+ }
+}
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<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'];
+ }
+
+}
diff --git a/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.module.ts b/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.module.ts
new file mode 100644
index 0000000000..24ed7b38af
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/multiline-ellipsis/multiline-ellipsis.module.ts
@@ -0,0 +1,11 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {MultilineEllipsisComponent} from './multiline-ellipsis.component';
+
+@NgModule({
+ declarations: [MultilineEllipsisComponent],
+ imports: [CommonModule],
+ exports: [MultilineEllipsisComponent],
+ entryComponents: [MultilineEllipsisComponent]
+})
+export class MultilineEllipsisModule {}