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
75
76
|
import {Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewContainerRef} from "@angular/core";
import {LoaderSize} from "./models/loader-size.model";
import {LoaderService} from "./custom-loader.service";
@Component({
selector: "custom-loader",
templateUrl: './custom-loader.component.html',
styleUrls: ['./custom-loader.component.scss']
})
export class LoaderComponent implements OnInit, OnDestroy {
@Input() active: number;
@Input() size?: LoaderSize;
@Input() global?: boolean;
@Input() name?: string;
@Input() testId: string;
@Input() relative: boolean;
@Output() activeChange: EventEmitter<number> = new EventEmitter<number>();
private offset : {
top: string;
left: string;
width: string;
height: string;
};
constructor(private loaderService: LoaderService, private viewContainerRef: ViewContainerRef) {
this.active = 0;
this.size = LoaderSize.large;
this.global = false;
}
public ngOnInit(): void {
if (this.name !== undefined) {
this.loaderService.register(this.name, this);
}
this.setLoaderPlace();
}
public ngOnDestroy(): void {
if (this.name !== undefined) {
this.loaderService.unregister(this.name);
}
}
public activate() {
this.active++;
this.activeChange.emit(this.active);
}
public deactivate() {
if (this.active > 0) {
this.active--;
this.activeChange.emit(this.active);
}
}
public setLoaderPlace = () => {
if (this.relative === true) {
let parentElement = this.viewContainerRef.element.nativeElement.parentElement;
this.offset = {
left: (parentElement.offsetLeft !== undefined) ? parentElement.offsetLeft + "px" : undefined,
top: (parentElement.offsetTop !== undefined) ? parentElement.offsetTop + "px" : undefined,
width: (parentElement.offsetWidth !== undefined) ? parentElement.offsetWidth + "px" : undefined,
height: (parentElement.offsetHeight !== undefined) ? parentElement.offsetHeight + "px" : undefined
};
} else {
this.offset = {
left: '0px',
top: '0px',
width: '100%',
height: '100%'
}
}
}
}
|
