1 |
57592
|
stefania.m
|
/**
|
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")
|
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 |
|
|
}
|