|
1
|
/**
|
|
2
|
* Created by stefania on 4/6/17.
|
|
3
|
*/
|
|
4
|
import {AfterContentInit, AfterViewInit, Component, ElementRef, Input, OnChanges, ViewChild} from "@angular/core";
|
|
5
|
|
|
6
|
@Component({
|
|
7
|
selector: "read-more",
|
|
8
|
template: `
|
|
9
|
<div [class.collapsed]="isCollapsed" [style.height]="isCollapsed ? maxHeight+'px' : 'auto'" #readMoreDiv>
|
|
10
|
<ng-content></ng-content>
|
|
11
|
</div>
|
|
12
|
<a *ngIf="isCollapsable" (click)="isCollapsed =! isCollapsed">View {{isCollapsed ? 'more' : 'less'}}...</a>
|
|
13
|
`,
|
|
14
|
styles: [`
|
|
15
|
div.collapsed {
|
|
16
|
overflow: hidden;
|
|
17
|
}
|
|
18
|
`]
|
|
19
|
})
|
|
20
|
export class ReadMoreComponent implements AfterContentInit {
|
|
21
|
//the text that need to be put in the container
|
|
22
|
//@Input() text: string;
|
|
23
|
//maximum height of the container
|
|
24
|
@Input("maxHeight") maxHeight: number = 100;
|
|
25
|
@ViewChild("readMoreDiv", {static: true})
|
|
26
|
readMoreDiv: ElementRef;
|
|
27
|
//set these to false to get the height of the expended container
|
|
28
|
public isCollapsed: boolean = false;
|
|
29
|
public isCollapsable: boolean = false;
|
|
30
|
|
|
31
|
constructor(public elementRef: ElementRef) {
|
|
32
|
}
|
|
33
|
|
|
34
|
ngAfterContentInit() {
|
|
35
|
setTimeout(_ => {
|
|
36
|
let currentHeight = this.readMoreDiv.nativeElement.offsetHeight;
|
|
37
|
//collapsable only if the contents make container exceed the max height
|
|
38
|
if (currentHeight > this.maxHeight) {
|
|
39
|
this.isCollapsed = true;
|
|
40
|
this.isCollapsable = true;
|
|
41
|
} else {
|
|
42
|
}
|
|
43
|
}, 200);
|
|
44
|
}
|
|
45
|
}
|
|
46
|
|
|
47
|
@Component({
|
|
48
|
selector: "read-more-text",
|
|
49
|
template: `
|
|
50
|
<div [innerHTML]="text" [class.collapsed]="isCollapsed" [style.height]="isCollapsed ? maxHeight+'px' : 'auto'" #readMoreDiv>
|
|
51
|
<!--{{text}}-->
|
|
52
|
</div>
|
|
53
|
<a *ngIf="isCollapsable" (click)="isCollapsed =! isCollapsed">View {{isCollapsed ? 'more' : 'less'}}...</a>
|
|
54
|
`,
|
|
55
|
styles: [`
|
|
56
|
div.collapsed {
|
|
57
|
overflow: hidden;
|
|
58
|
}
|
|
59
|
`]
|
|
60
|
})
|
|
61
|
export class ReadMoreTextComponent extends ReadMoreComponent implements OnChanges, AfterViewInit {
|
|
62
|
@Input()
|
|
63
|
text: string = "";
|
|
64
|
|
|
65
|
ngAfterViewInit(): void {
|
|
66
|
this.ngAfterContentInit();
|
|
67
|
}
|
|
68
|
|
|
69
|
ngOnChanges(): void {
|
|
70
|
this.ngAfterContentInit();
|
|
71
|
}
|
|
72
|
}
|
|
73
|
|