1 |
49598
|
stefanos.g
|
/**
|
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 |
|
|
}
|