All files Loading.tsx

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
 
 
 
 
 
 
 
 
 
 
 
4x
4x
2x
2x
 
 
 
 
 
 
 
4x
4x
 
 
 
 
 
4x
4x
4x
 
 
 
 
 
4x
3x
2x
2x
 
 
1x
 
 
 
4x
4x
4x
 
4x
2x
2x
2x
1x
 
2x
 
2x
2x
2x
6x
6x
3x
 
6x
 
2x
 
 
4x
1x
1x
1x
1x
1x
1x
 
1x
 
4x
 
 
4x
4x
4x
4x
4x
2x
2x
2x
1x
 
 
 
2x
2x
 
 
 
4x
 
 
 
 
 
 
 
 
3x
1x
1x
2x
1x
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
/** The options for loading component */
export interface LoadingOptions {
    targetEl?: Element | null;
    inline?: boolean;
    text?: string;
    color?: string;
}
 
/**
 * The loading component class.
 */
export class Loading {
    public static hideGlobal() {
        document.body.querySelectorAll(".bn-loading-overlay").forEach(ele => {
            ele.remove();
        });
    }
 
    private refEl: HTMLElement | null;
    private options: LoadingOptions | null;
 
    public constructor(options?: LoadingOptions) {
        this.options = options || null;
        this.refEl = null;
    }
 
    /**
     * Shows the loading component.
     */
    public show() {
        this.render();
        return this;
    }
 
    /**
     * Hides the loading component.
     */
    public hide() {
        if (this.options && this.options.targetEl) {
            this.options.targetEl.querySelectorAll(".bn-loading-overlay").forEach(ele => {
                ele.remove();
            });
        } else {
            Loading.hideGlobal();
        }
    }
 
    private getLoadingEl() : HTMLElement {
        const container = document.createElement("div");
        container.setAttribute("class", "bn-loading-container");
 
        if (!(this.options && this.options.targetEl)) {
            const elIcon = document.createElement("i");
            elIcon.setAttribute("class", "bicon bicon-loading");
            if (this.options && this.options.color) {
                elIcon.setAttribute("style", `border-left-color: ${this.options.color}`);
            }
            container.appendChild(elIcon);
        } else {
            const elIcon = document.createElement("div");
            elIcon.setAttribute("class", "loading-element");
            for(let i=1; i<4; i++) {
                const el = document.createElement("div");
                if (this.options && this.options.color) {
                    el.setAttribute("style", `background-color: ${this.options.color}`);
                }
                elIcon.appendChild(el);
            }
            container.appendChild(elIcon);
        }
 
        if (this.options && this.options.text) {
            container.className += " has-text";
            const elText = document.createElement("div");
            elText.setAttribute("class", "loading-text");
            elText.innerText = this.options.text;
            Eif (this.options.color) {
                elText.setAttribute("style", `color: ${this.options.color}`);
            }
            container.appendChild(elText);
        }
        return container;
    }
 
    private render() {
        this.refEl = document.createElement("div");
        this.refEl.setAttribute("class", "bn-loading-overlay");
        this.refEl.appendChild(this.getLoadingEl());
        if (this.options && this.options.targetEl) {
            Eif (this.options.targetEl.querySelectorAll(".bn-loading-overlay").length === 0) {
                this.options.targetEl.appendChild(this.refEl);
                if (this.options.inline) {
                    this.refEl.className += " inline";
                }
            }
        } else {
            Eif (document.querySelectorAll("body .bn-loading-overlay").length === 0) {
                document.body.appendChild(this.refEl);
            }
        }
    };
}
 
/**
 * Shows or hides a loading component for page.
 *
 * @param args  false to hide the loading component, or [[LoadingOptions]] interface
 * @returns null if `args` is false, otherwise a [[Loading]] instance
 */
export function loading(args?: boolean | LoadingOptions): Loading | null {
    if (args === false) {
        Loading.hideGlobal();
        return null;
    } else if (typeof args === "object") {
        return new Loading(args).show();
    } else {
        return new Loading().show();
    }
}
 
/**
 * Shows or hides a loading component for element.
 *
 * @param selector The element selector
 * @param loadingText The loading text
 * @param color The loading component color
 *
 * @returns A instance of [[Loading]] compnent
 */
export function loadingFor(selector: string, loadingText?: string, color?: string): Loading {
    return new Loading({
        targetEl: document.querySelector(selector),
        text: loadingText,
        color,
    }).show();
}