1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
/**
* Created by rc2122 on 6/6/2017.
*/
import {Component, Input, ElementRef, Renderer, SimpleChanges} from "@angular/core";
@Component({
selector: 'loader',
templateUrl: './loader.component.html',
styleUrls: ['./loader.component.less']
})
export class LoaderComponent {
@Input() display:boolean;
@Input() size:string;// small || medium || large
@Input() relative: boolean;
@Input() elementSelector: string; // optional. If is relative is set to true, option to pass in element that loader should be relative to. Otherwise, will be relative to parent element.
constructor (private el: ElementRef, private renderer: Renderer){
}
ngOnInit() {
if (!this.size) {
this.size = 'large';
}
if (this.display === true) {
this.changeLoaderDisplay(true);
}
}
ngOnChanges(changes: SimpleChanges) {
if(changes.display){
if (this.display) {
this.changeLoaderDisplay(false); //display is set to true, so loader will appear unless we explicitly tell it not to.
window.setTimeout((): void => {
this.display && this.changeLoaderDisplay(true); //only show loader if we still need to display it.
}, 500);
} else {
window.setTimeout(():void => {
this.changeLoaderDisplay(false);
}, 0);
}
}
}
changeLoaderDisplay = (display: boolean): void => {
if (display) {
this.calculateLoaderPosition();
this.renderer.setElementStyle(this.el.nativeElement, 'display', 'block');
} else {
this.renderer.setElementStyle(this.el.nativeElement, 'display', 'none');
}
}
calculateLoaderPosition = () => {
if (this.relative === true) { // Can change the parent position to relative without causing style issues.
let parent = (this.elementSelector) ? angular.element(this.elementSelector).get(0) : this.el.nativeElement.parentElement;
this.renderer.setElementStyle(parent, 'position', 'relative');
this.setLoaderPosition(0, 0); //will be relative to parent and appear over specified element
//TODO: DONT force parent to have position relative; set inner div's style instead of outer element
// let parentPos: ClientRect = this.el.nativeElement.parentElement.getBoundingClientRect();
// this.setLoaderPosition(parentPos.top, parentPos.left, parentPos.width, parentPos.height);
} else {
this.setLoaderPosition(0, 0); //will appear over whole page
}
}
setLoaderPosition = (top:number, left:number, width?:number, height?:number): void => {
this.renderer.setElementStyle(this.el.nativeElement, 'position', 'absolute');
this.renderer.setElementStyle(this.el.nativeElement, 'top', top? top.toString() : "0");
this.renderer.setElementStyle(this.el.nativeElement, 'left', left? left.toString() : "0");
this.renderer.setElementStyle(this.el.nativeElement, 'width', width? width.toString() : "100%");
this.renderer.setElementStyle(this.el.nativeElement, 'height', height? height.toString() : "100%");
};
}
|
