Project

General

Profile

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")
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

    
(2-2/3)