pns-component-library 1.1.0 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
const whole_page_loading = {
|
|
2
|
+
mounted(el, binding) {
|
|
3
|
+
// Create a loading container
|
|
4
|
+
const spinner_mask = document.createElement("div");
|
|
5
|
+
spinner_mask.classList.add("whole-page-loading-mask");
|
|
6
|
+
spinner_mask.style.display = "none"; // Initially hidden
|
|
7
|
+
|
|
8
|
+
//spinner_container contains:
|
|
9
|
+
// 1. spinner_icon_container(hourglass icon and spinning circle)
|
|
10
|
+
// 2. text: Loading...
|
|
11
|
+
// create spinner_container and assign class
|
|
12
|
+
const spinner_container = document.createElement("div");
|
|
13
|
+
spinner_container.classList.add("whole-page-loading-spinner-container");
|
|
14
|
+
// create spinner_icon_container and assign class: this contains hourglass icon and spinning circle
|
|
15
|
+
const spinner_icon_container = document.createElement("div");
|
|
16
|
+
spinner_icon_container.classList.add("whole-page-loading-spinner-icon-container");
|
|
17
|
+
// create hourglass_icon_div, assign class and append it into spinner_icon_container
|
|
18
|
+
const hourglass_icon_div = document.createElement("div");
|
|
19
|
+
hourglass_icon_div.classList.add("whole-page-loading-hourglass-icon-div");
|
|
20
|
+
spinner_icon_container.appendChild(hourglass_icon_div);
|
|
21
|
+
// create loading_circle_div, assign class and append it into spinner_icon_container
|
|
22
|
+
const loading_circle_div = document.createElement("div");
|
|
23
|
+
loading_circle_div.classList.add("whole-page-loading-progress-circle-div");
|
|
24
|
+
spinner_icon_container.appendChild(loading_circle_div);
|
|
25
|
+
// add finished spinner_icon_container into spinner_container
|
|
26
|
+
spinner_container.appendChild(spinner_icon_container);
|
|
27
|
+
// create loading_text_div, assign class, and add it into spinner_container
|
|
28
|
+
const loading_text_div = document.createElement("div");
|
|
29
|
+
loading_text_div.classList.add("whole-page-loading-text-div");
|
|
30
|
+
spinner_container.appendChild(loading_text_div);
|
|
31
|
+
|
|
32
|
+
//add finished spinner_container into spinner_mask
|
|
33
|
+
spinner_mask.appendChild(spinner_container);
|
|
34
|
+
|
|
35
|
+
el._spinnerMask = spinner_mask; // Store reference on the element for future lifecycle usage
|
|
36
|
+
el.style.position = "relative"; // Ensure parent element has positioning
|
|
37
|
+
el.appendChild(spinner_mask);
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
// Show or hide spinner based on binding value
|
|
42
|
+
if (binding.value) {
|
|
43
|
+
el._spinnerMask.style.display = "flex";
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
updated(el, binding) {
|
|
47
|
+
// Toggle loading spinner
|
|
48
|
+
if (binding.value) {
|
|
49
|
+
el._spinnerMask.style.display = "flex";
|
|
50
|
+
} else {
|
|
51
|
+
el._spinnerMask.style.display = "none";
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
unmounted(el) {
|
|
55
|
+
// Cleanup: Remove spinner element
|
|
56
|
+
el.removeChild(el._spinnerMask);
|
|
57
|
+
},
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
export default whole_page_loading;
|