74 lines
2.2 KiB
TypeScript
74 lines
2.2 KiB
TypeScript
/**
|
|
* Created by stefania on 4/6/17.
|
|
*/
|
|
import {AfterContentInit, AfterViewInit, Component, ElementRef, Input, OnChanges, ViewChild} from "@angular/core";
|
|
|
|
@Component({
|
|
selector: "read-more",
|
|
template: `
|
|
<div [class.collapsed]="isCollapsed" [style.height]="isCollapsed ? maxHeight+'px' : 'auto'" #readMoreDiv>
|
|
<ng-content></ng-content>
|
|
</div>
|
|
<a *ngIf="isCollapsable" (click)="isCollapsed =! isCollapsed">View {{isCollapsed ? 'more' : 'less'}}...</a>
|
|
`,
|
|
styles: [`
|
|
div.collapsed {
|
|
overflow: hidden;
|
|
}
|
|
`]
|
|
})
|
|
export class ReadMoreComponent implements AfterContentInit {
|
|
//the text that need to be put in the container
|
|
//@Input() text: string;
|
|
//maximum height of the container
|
|
@Input("maxHeight") maxHeight: number = 100;
|
|
@ViewChild("readMoreDiv")
|
|
readMoreDiv: ElementRef;
|
|
//set these to false to get the height of the expended container
|
|
public isCollapsed: boolean = false;
|
|
public isCollapsable: boolean = false;
|
|
|
|
constructor(public elementRef: ElementRef) {
|
|
}
|
|
|
|
ngAfterContentInit() {
|
|
setTimeout(_ => {
|
|
let currentHeight = this.readMoreDiv.nativeElement.offsetHeight;
|
|
//collapsable only if the contents make container exceed the max height
|
|
if (currentHeight > this.maxHeight) {
|
|
this.isCollapsed = true;
|
|
this.isCollapsable = true;
|
|
} else {
|
|
}
|
|
}, 200);
|
|
}
|
|
}
|
|
|
|
@Component({
|
|
selector: "read-more-text",
|
|
template: `
|
|
<div [innerHTML]="text" [class.collapsed]="isCollapsed" [style.height]="isCollapsed ? maxHeight+'px' : 'auto'" #readMoreDiv>
|
|
<!--{{text}}-->
|
|
</div>
|
|
<a *ngIf="isCollapsable" (click)="isCollapsed =! isCollapsed">View {{isCollapsed ? 'more' : 'less'}}...</a>
|
|
`,
|
|
styles: [`
|
|
div.collapsed {
|
|
overflow: hidden;
|
|
}
|
|
`]
|
|
})
|
|
export class ReadMoreTextComponent extends ReadMoreComponent implements OnChanges, AfterViewInit {
|
|
@Input()
|
|
text: string = "";
|
|
|
|
ngAfterViewInit(): void {
|
|
this.ngAfterContentInit();
|
|
}
|
|
|
|
ngOnChanges(): void {
|
|
this.ngAfterContentInit();
|
|
}
|
|
}
|
|
|