@konomi-app/kintone-utilities 1.6.0 → 1.7.1
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.
|
@@ -3,27 +3,38 @@ const ROOT_ID = '__🐸__loading-overlay';
|
|
|
3
3
|
export class LoadingOverlay {
|
|
4
4
|
#shown;
|
|
5
5
|
#label;
|
|
6
|
+
#html;
|
|
6
7
|
#progress;
|
|
7
8
|
#root;
|
|
9
|
+
#variable;
|
|
8
10
|
constructor(props = {}) {
|
|
9
11
|
this.#shown = false;
|
|
10
12
|
this.#label = props.label || '';
|
|
13
|
+
this.#html = '';
|
|
11
14
|
this.#progress = props.progress ?? null;
|
|
12
15
|
this.addStyle();
|
|
13
16
|
const root = document.querySelector(`#${ROOT_ID}`) || document.createElement('div');
|
|
14
17
|
root.id = ROOT_ID;
|
|
15
18
|
this.#root = root;
|
|
16
19
|
document.body.append(root);
|
|
20
|
+
const container = document.createElement('div');
|
|
21
|
+
this.#root.append(container);
|
|
22
|
+
container.innerHTML = `<div class="loader"></div>`;
|
|
23
|
+
const variable = document.createElement('div');
|
|
24
|
+
container.append(variable);
|
|
25
|
+
this.#variable = variable;
|
|
17
26
|
this.render();
|
|
18
27
|
}
|
|
19
28
|
start() {
|
|
20
29
|
this.#shown = true;
|
|
21
30
|
window.removeEventListener('beforeunload', this.beforeunload);
|
|
31
|
+
document.body.style.overflow = 'hidden';
|
|
22
32
|
this.render();
|
|
23
33
|
}
|
|
24
34
|
stop() {
|
|
25
35
|
this.#shown = false;
|
|
26
36
|
window.removeEventListener('beforeunload', this.beforeunload);
|
|
37
|
+
document.body.style.overflow = 'auto';
|
|
27
38
|
this.render();
|
|
28
39
|
}
|
|
29
40
|
set label(label) {
|
|
@@ -36,11 +47,17 @@ export class LoadingOverlay {
|
|
|
36
47
|
}
|
|
37
48
|
render() {
|
|
38
49
|
if (this.#shown) {
|
|
39
|
-
this.#
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
50
|
+
if (this.#html) {
|
|
51
|
+
this.#variable.innerHTML = `<div>${this.#label}</div><div class="progress" style="width: ${this.#progress}%"></div>`;
|
|
52
|
+
}
|
|
53
|
+
else {
|
|
54
|
+
if (this.#label instanceof Array) {
|
|
55
|
+
this.#variable.innerHTML = `<div>${this.#label.join('<br>')}</div><div class="progress" style="width: ${this.#progress}%"></div>`;
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
this.#variable.innerHTML = `<div>${this.#label}</div><div class="progress" style="width: ${this.#progress}%"></div>`;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
44
61
|
}
|
|
45
62
|
}
|
|
46
63
|
/** JavaScript中にページを離れようとした場合にアラートを表示します */
|
|
@@ -85,15 +102,16 @@ export class LoadingOverlay {
|
|
|
85
102
|
flex-direction: column;
|
|
86
103
|
align-items: center;
|
|
87
104
|
justify-content: center;
|
|
88
|
-
gap:
|
|
105
|
+
gap: 32px;
|
|
89
106
|
padding: 32px 64px;
|
|
90
107
|
background-color: #fffc;
|
|
91
|
-
border: 1px solid #fff;
|
|
92
108
|
border-radius: 8px;
|
|
93
109
|
box-shadow: 0 5px 24px -6px #0002;
|
|
94
110
|
min-width: 300px;
|
|
95
111
|
max-width: 90vw;
|
|
96
112
|
min-height: 200px;
|
|
113
|
+
position: relative;
|
|
114
|
+
overflow: hidden;
|
|
97
115
|
}
|
|
98
116
|
|
|
99
117
|
.loader {
|
|
@@ -110,15 +128,31 @@ export class LoadingOverlay {
|
|
|
110
128
|
transform: rotate(0deg);
|
|
111
129
|
border-radius: 1em;
|
|
112
130
|
}
|
|
131
|
+
20% {
|
|
132
|
+
transform: rotate(0deg);
|
|
133
|
+
}
|
|
113
134
|
30%,
|
|
114
135
|
60% {
|
|
115
136
|
border-radius: 0.25em;
|
|
116
137
|
}
|
|
138
|
+
70% {
|
|
139
|
+
transform: rotate(180deg);
|
|
140
|
+
}
|
|
117
141
|
100% {
|
|
118
142
|
transform: rotate(180deg);
|
|
119
143
|
border-radius: 1em;
|
|
120
144
|
}
|
|
121
145
|
}
|
|
146
|
+
|
|
147
|
+
.progress {
|
|
148
|
+
position: absolute;
|
|
149
|
+
bottom: 0px;
|
|
150
|
+
left: 0;
|
|
151
|
+
width: 60%;
|
|
152
|
+
height: 3px;
|
|
153
|
+
background-color: #2563eb;
|
|
154
|
+
transition: all 250ms ease;
|
|
155
|
+
}
|
|
122
156
|
}
|
|
123
157
|
`);
|
|
124
158
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/loading-overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAInC,MAAM,OAAO,GAAG,uBAAuB,CAAC;AAExC,MAAM,OAAO,cAAc;IACzB,MAAM,CAAU;IAChB,MAAM,CAAS;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/loading-overlay/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@konomi-app/kintone-utilities",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.7.1",
|
|
4
4
|
"types": "dist/index.d.ts",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"repository": "https://github.com/local-bias/kintone-utilities.git",
|
|
@@ -27,4 +27,4 @@
|
|
|
27
27
|
"trailingComma": "es5",
|
|
28
28
|
"endOfLine": "lf"
|
|
29
29
|
}
|
|
30
|
-
}
|
|
30
|
+
}
|