1
|
/**
|
2
|
* Created by stefania on 4/6/17.
|
3
|
*/
|
4
|
import {AfterContentInit, Component, ElementRef, Input} from "@angular/core";
|
5
|
|
6
|
@Component({
|
7
|
selector: 'read-more',
|
8
|
template: `
|
9
|
<div [class.collapsed]="isCollapsed" [style.height]="isCollapsed ? maxHeight+'px' : 'auto'">
|
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
|
|
22
|
//the text that need to be put in the container
|
23
|
//@Input() text: string;
|
24
|
|
25
|
//maximum height of the container
|
26
|
@Input('maxHeight') maxHeight: number = 100;
|
27
|
|
28
|
//set these to false to get the height of the expended container
|
29
|
public isCollapsed: boolean = false;
|
30
|
public isCollapsable: boolean = false;
|
31
|
|
32
|
constructor(private elementRef: ElementRef) {
|
33
|
}
|
34
|
|
35
|
ngAfterContentInit() {
|
36
|
let currentHeight = this.elementRef.nativeElement.getElementsByTagName('div')[0].offsetHeight;
|
37
|
|
38
|
//collapsable only if the contents make container exceed the max height
|
39
|
if (currentHeight > this.maxHeight) {
|
40
|
this.isCollapsed = true;
|
41
|
this.isCollapsable = true;
|
42
|
} else {
|
43
|
|
44
|
}
|
45
|
}
|
46
|
}
|