huply 0.3.1 → 0.4.12
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/README.md +108 -9
- package/dist/huply.cjs.js +1 -1
- package/dist/huply.cjs.js.map +1 -1
- package/dist/{style.css → huply.css} +1 -1
- package/dist/huply.es.js +516 -908
- package/dist/huply.es.js.map +1 -1
- package/package.json +12 -5
package/dist/huply.es.js
CHANGED
|
@@ -1,840 +1,500 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
-
var __spreadValues = (a, b) => {
|
|
7
|
-
for (var prop in b || (b = {}))
|
|
8
|
-
if (__hasOwnProp.call(b, prop))
|
|
9
|
-
__defNormalProp(a, prop, b[prop]);
|
|
10
|
-
if (__getOwnPropSymbols)
|
|
11
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
-
if (__propIsEnum.call(b, prop))
|
|
13
|
-
__defNormalProp(a, prop, b[prop]);
|
|
14
|
-
}
|
|
15
|
-
return a;
|
|
16
|
-
};
|
|
17
|
-
var __publicField = (obj, key, value) => {
|
|
18
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
19
|
-
return value;
|
|
20
|
-
};
|
|
21
|
-
var style = "";
|
|
22
|
-
function isObject(obj) {
|
|
23
|
-
return obj !== void 0 && obj !== null && obj.constructor === Object;
|
|
1
|
+
function v(r) {
|
|
2
|
+
return r != null && r.constructor === Object;
|
|
24
3
|
}
|
|
25
|
-
function
|
|
26
|
-
return
|
|
4
|
+
function x(r) {
|
|
5
|
+
return r instanceof Element;
|
|
27
6
|
}
|
|
28
|
-
function
|
|
29
|
-
return
|
|
7
|
+
function f(r) {
|
|
8
|
+
return r !== void 0;
|
|
30
9
|
}
|
|
31
|
-
function
|
|
32
|
-
return
|
|
10
|
+
function y(r) {
|
|
11
|
+
return r != null && !!(r % 1);
|
|
33
12
|
}
|
|
34
|
-
function
|
|
35
|
-
return
|
|
13
|
+
function T(r) {
|
|
14
|
+
return r != null && parseInt(r, 10) === r;
|
|
36
15
|
}
|
|
37
|
-
class
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
this.store =
|
|
41
|
-
}
|
|
42
|
-
request(
|
|
43
|
-
let
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}
|
|
47
|
-
request.open(method, url);
|
|
48
|
-
if (isObject(this.store.options.headers)) {
|
|
49
|
-
Object.entries(this.store.options.headers).forEach((item) => {
|
|
50
|
-
request.setRequestHeader(item[0], item[1]);
|
|
51
|
-
});
|
|
52
|
-
}
|
|
53
|
-
return request;
|
|
16
|
+
class C {
|
|
17
|
+
store;
|
|
18
|
+
constructor(e) {
|
|
19
|
+
this.store = e;
|
|
20
|
+
}
|
|
21
|
+
request(e, t) {
|
|
22
|
+
let s = new XMLHttpRequest();
|
|
23
|
+
return this.store.options.withCredentials && (s.withCredentials = this.store.options.withCredentials), s.open(e, t), v(this.store.options.headers) && Object.entries(this.store.options.headers).forEach((i) => {
|
|
24
|
+
s.setRequestHeader(i[0], i[1]);
|
|
25
|
+
}), s;
|
|
54
26
|
}
|
|
55
27
|
}
|
|
56
|
-
class
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
this.store =
|
|
28
|
+
class b {
|
|
29
|
+
store;
|
|
30
|
+
constructor(e) {
|
|
31
|
+
this.store = e;
|
|
60
32
|
}
|
|
61
33
|
upload() {
|
|
62
|
-
const
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
if (this.store.options.chunkSize) {
|
|
69
|
-
this.sendChunkedFile(fileItem, 0);
|
|
70
|
-
} else {
|
|
71
|
-
this.sendFile(fileItem);
|
|
72
|
-
}
|
|
73
|
-
});
|
|
74
|
-
}
|
|
34
|
+
const e = this.store.getFilesWaiting();
|
|
35
|
+
e.length && e.forEach((t) => {
|
|
36
|
+
t.status = "uploading", t.uploadProcess = 0, this.store.updateFileItem(t);
|
|
37
|
+
const s = t.size ?? 0, i = (this.store.options.chunkMinSize ?? 0) * 1024 * 1024;
|
|
38
|
+
this.store.options.chunkSize && s >= i ? this.sendChunkedFile(t, 0) : this.sendFile(t);
|
|
39
|
+
});
|
|
75
40
|
}
|
|
76
|
-
sendChunkedFile(
|
|
77
|
-
|
|
78
|
-
if (this.store.options.chunkSize &&
|
|
79
|
-
const
|
|
80
|
-
|
|
81
|
-
const
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
request.addEventListener("load", () => {
|
|
88
|
-
if (request.status === 200) {
|
|
89
|
-
if (request.response) {
|
|
90
|
-
const resp = JSON.parse(request.response);
|
|
91
|
-
if (resp.filename) {
|
|
92
|
-
fileItem.name = resp.filename;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
if (fileItem.size) {
|
|
96
|
-
fileItem.uploadProcess = Math.min(Math.ceil(sliceEnd / fileItem.size * 100), 100);
|
|
41
|
+
sendChunkedFile(e, t, s = 0) {
|
|
42
|
+
const i = this.store.options.chunkRetries ?? 3;
|
|
43
|
+
if (this.store.options.chunkSize && e.size && e.data) {
|
|
44
|
+
const l = this.store.options.chunkSize * 1024 * 1024, n = t + l, a = n + 1, o = Math.min(n, e.size), g = e.data.slice(t, a);
|
|
45
|
+
let p = new C(this.store).request("POST", this.store.options.uploadUrl);
|
|
46
|
+
const m = "bytes " + t + "-" + o + "/" + e.size;
|
|
47
|
+
p.setRequestHeader("Content-Range", m), p.addEventListener("load", () => {
|
|
48
|
+
if (p.status === 200) {
|
|
49
|
+
if (p.response) {
|
|
50
|
+
const u = JSON.parse(p.response);
|
|
51
|
+
u.filename && (e.name = u.filename);
|
|
97
52
|
}
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
this.store.updateFileItem(fileItem);
|
|
104
|
-
this.sendChunkedFile(fileItem, nextSlice);
|
|
105
|
-
}
|
|
106
|
-
} else {
|
|
107
|
-
fileItem.status = "error";
|
|
108
|
-
this.store.updateFileItem(fileItem);
|
|
109
|
-
this.upload();
|
|
110
|
-
}
|
|
111
|
-
});
|
|
112
|
-
let data = new FormData();
|
|
113
|
-
data.append("file", chunk, fileItem.name);
|
|
114
|
-
if ((_a = this.store.options) == null ? void 0 : _a.maxFileSize) {
|
|
115
|
-
data.append("max_file_size", this.store.options.maxFileSize * 1024);
|
|
116
|
-
}
|
|
117
|
-
request.send(data);
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
sendFile(fileItem) {
|
|
121
|
-
fileItem.status = "uploading";
|
|
122
|
-
fileItem.uploadProcess = 0;
|
|
123
|
-
this.store.updateFileItem(fileItem);
|
|
124
|
-
return new Promise((resolve, reject) => {
|
|
125
|
-
var _a;
|
|
126
|
-
let request = new HttpRequestService(this.store).request("POST", this.store.options.uploadUrl);
|
|
127
|
-
request.setRequestHeader("accept", "application/json");
|
|
128
|
-
request.upload.addEventListener("progress", (e) => {
|
|
129
|
-
fileItem.uploadProcess = e.loaded / e.total * 100;
|
|
130
|
-
this.store.updateFileItem(fileItem);
|
|
53
|
+
e.size && (e.uploadProcess = Math.min(Math.ceil(n / e.size * 100), 100)), o === e.size ? (e.status = "uploaded", this.store.updateFileItem(e), this.upload()) : (this.store.updateFileItem(e), this.sendChunkedFile(e, a));
|
|
54
|
+
} else
|
|
55
|
+
s < i ? this.sendChunkedFile(e, t, s + 1) : (e.status = "error", this.store.updateFileItem(e), this.upload());
|
|
56
|
+
}), p.addEventListener("error", () => {
|
|
57
|
+
s < i ? this.sendChunkedFile(e, t, s + 1) : (e.status = "error", this.store.updateFileItem(e), this.upload());
|
|
131
58
|
});
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
59
|
+
let h = new FormData();
|
|
60
|
+
h.append("file", g, e.name), this.store.options?.maxFileSize && h.append("max_file_size", this.store.options.maxFileSize * 1024), p.send(h);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
sendFile(e) {
|
|
64
|
+
return e.status = "uploading", e.uploadProcess = 0, this.store.updateFileItem(e), new Promise((t, s) => {
|
|
65
|
+
let i = new C(this.store).request("POST", this.store.options.uploadUrl);
|
|
66
|
+
i.setRequestHeader("accept", "application/json"), i.upload.addEventListener("progress", (n) => {
|
|
67
|
+
e.uploadProcess = n.loaded / n.total * 100, this.store.updateFileItem(e);
|
|
68
|
+
}), i.addEventListener("load", () => {
|
|
69
|
+
if (i.status === 200) {
|
|
70
|
+
if (t(i.response), i.response) {
|
|
71
|
+
const n = JSON.parse(i.response);
|
|
72
|
+
n.filename && (e.name = n.filename);
|
|
140
73
|
}
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
this.upload();
|
|
144
|
-
} else {
|
|
145
|
-
reject(request.response);
|
|
146
|
-
fileItem.status = "error";
|
|
147
|
-
this.store.updateFileItem(fileItem);
|
|
148
|
-
this.upload();
|
|
149
|
-
}
|
|
74
|
+
e.status = "uploaded", this.store.updateFileItem(e), this.upload();
|
|
75
|
+
} else
|
|
76
|
+
s(i.response), e.status = "error", this.store.updateFileItem(e), this.upload();
|
|
150
77
|
});
|
|
151
|
-
let
|
|
152
|
-
|
|
153
|
-
data.append("file", fileItem.data);
|
|
154
|
-
}
|
|
155
|
-
if ((_a = this.store.options) == null ? void 0 : _a.maxFileSize) {
|
|
156
|
-
data.append("max_file_size", this.store.options.maxFileSize * 1024);
|
|
157
|
-
}
|
|
158
|
-
request.send(data);
|
|
78
|
+
let l = new FormData();
|
|
79
|
+
e.data && l.append("file", e.data), this.store.options?.maxFileSize && l.append("max_file_size", this.store.options.maxFileSize * 1024), i.send(l);
|
|
159
80
|
});
|
|
160
81
|
}
|
|
161
82
|
}
|
|
162
|
-
function
|
|
163
|
-
if (
|
|
164
|
-
let
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
}
|
|
170
|
-
return translation;
|
|
171
|
-
} else {
|
|
172
|
-
return "{{" + key + "}}";
|
|
173
|
-
}
|
|
83
|
+
function d(r, e) {
|
|
84
|
+
if (f(window.huplyTranslations[r])) {
|
|
85
|
+
let t = window.huplyTranslations[r];
|
|
86
|
+
return e && Object.entries(e).forEach((s) => {
|
|
87
|
+
t = t.replace("{{" + s[0] + "}}", s[1]);
|
|
88
|
+
}), t;
|
|
89
|
+
} else
|
|
90
|
+
return "{{" + r + "}}";
|
|
174
91
|
}
|
|
175
|
-
class
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
this.store =
|
|
179
|
-
}
|
|
180
|
-
checkFileSize(
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
}
|
|
195
|
-
if (!this.checkFileType(fileItem)) {
|
|
196
|
-
errorBag.push({
|
|
197
|
-
msg: $t("fileItemStatusErrorFileType", { allowedFileTypes: this.store.options.allowedFileTypes.join(",") })
|
|
198
|
-
});
|
|
199
|
-
}
|
|
200
|
-
return errorBag;
|
|
92
|
+
class z {
|
|
93
|
+
store;
|
|
94
|
+
constructor(e) {
|
|
95
|
+
this.store = e;
|
|
96
|
+
}
|
|
97
|
+
checkFileSize(e) {
|
|
98
|
+
return !(this.store.options?.maxFileSize && e.size > this.store.options.maxFileSize * 1024 * 1024);
|
|
99
|
+
}
|
|
100
|
+
checkFileType(e) {
|
|
101
|
+
const t = e.name.split(".");
|
|
102
|
+
return this.store.options.allowedFileTypes.includes("." + t[t.length - 1].toLowerCase());
|
|
103
|
+
}
|
|
104
|
+
isValidFile(e) {
|
|
105
|
+
const t = [];
|
|
106
|
+
return this.checkFileSize(e) || t.push({
|
|
107
|
+
msg: d("fileItemStatusErrorFileSize", { maxFileSize: this.store.options.maxFileSize })
|
|
108
|
+
}), this.checkFileType(e) || t.push({
|
|
109
|
+
msg: d("fileItemStatusErrorFileType", { allowedFileTypes: this.store.options.allowedFileTypes.join(",") })
|
|
110
|
+
}), t;
|
|
201
111
|
}
|
|
202
112
|
}
|
|
203
|
-
function
|
|
113
|
+
function F() {
|
|
204
114
|
return Math.random().toString(36).substring(2) + Date.now().toString(36);
|
|
205
115
|
}
|
|
206
|
-
function
|
|
207
|
-
let
|
|
208
|
-
const
|
|
209
|
-
|
|
210
|
-
number = valueCasted.toFixed(2).replace(".", ",");
|
|
211
|
-
} else if (isInteger(valueCasted)) {
|
|
212
|
-
number = valueCasted;
|
|
213
|
-
}
|
|
214
|
-
return number;
|
|
116
|
+
function w(r) {
|
|
117
|
+
let e = 0;
|
|
118
|
+
const t = Number(r);
|
|
119
|
+
return y(t) ? e = t.toFixed(2).replace(".", ",") : T(t) && (e = t), e;
|
|
215
120
|
}
|
|
216
|
-
class
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
this.store =
|
|
220
|
-
}
|
|
221
|
-
generateFileItemFromFile(
|
|
222
|
-
return new Promise((
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
sizeKb: file.size ? Number((file.size / 1024).toFixed(0)) : 0,
|
|
121
|
+
class c {
|
|
122
|
+
store;
|
|
123
|
+
constructor(e) {
|
|
124
|
+
this.store = e;
|
|
125
|
+
}
|
|
126
|
+
generateFileItemFromFile(e) {
|
|
127
|
+
return new Promise((t) => {
|
|
128
|
+
let s = {
|
|
129
|
+
id: F(),
|
|
130
|
+
name: e.name,
|
|
131
|
+
size: e.size ?? 0,
|
|
132
|
+
sizeMb: e.size ? e.size / 1024 / 1024 : 0,
|
|
133
|
+
sizeKb: e.size ? Number((e.size / 1024).toFixed(0)) : 0,
|
|
230
134
|
status: "waiting",
|
|
231
135
|
uploadProcess: 0,
|
|
232
|
-
data:
|
|
136
|
+
data: e
|
|
233
137
|
};
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
resolve(fileItem);
|
|
238
|
-
});
|
|
239
|
-
} else {
|
|
240
|
-
resolve(fileItem);
|
|
241
|
-
}
|
|
138
|
+
this.checkIfIsImage(e.name) && s.size && s.size <= this.store.maxSizeImageView ? this.getDataUrlFromFile(e).then((i) => {
|
|
139
|
+
s.url = i, t(s);
|
|
140
|
+
}) : t(s);
|
|
242
141
|
});
|
|
243
142
|
}
|
|
244
|
-
generateFileItemFromPreloaded(
|
|
245
|
-
return new Promise((
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
sizeKb: file.size ? Number((file.size / 1024).toFixed(0)) : 0,
|
|
143
|
+
generateFileItemFromPreloaded(e) {
|
|
144
|
+
return new Promise((t) => {
|
|
145
|
+
let s = {
|
|
146
|
+
id: F(),
|
|
147
|
+
name: e.name,
|
|
148
|
+
size: e.size ?? 0,
|
|
149
|
+
sizeMb: e.size ? e.size / 1024 / 1024 : 0,
|
|
150
|
+
sizeKb: e.size ? Number((e.size / 1024).toFixed(0)) : 0,
|
|
253
151
|
uploadProcess: 0,
|
|
254
152
|
status: "preloaded"
|
|
255
153
|
};
|
|
256
|
-
|
|
257
|
-
this.
|
|
258
|
-
|
|
259
|
-
fileItem.url = dataUrl;
|
|
260
|
-
resolve(fileItem);
|
|
261
|
-
});
|
|
154
|
+
this.checkIfIsImage(e.name) && s.size && s.size <= this.store.maxSizeImageView && e.url ? this.getBlobFromUrl(e.url).then((i) => {
|
|
155
|
+
this.getDataUrlFromFile(i).then((l) => {
|
|
156
|
+
s.url = l, t(s);
|
|
262
157
|
});
|
|
263
|
-
}
|
|
264
|
-
resolve(fileItem);
|
|
265
|
-
}
|
|
158
|
+
}) : t(s);
|
|
266
159
|
});
|
|
267
160
|
}
|
|
268
|
-
getDataUrlFromFile(
|
|
269
|
-
return new Promise((
|
|
270
|
-
const
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
}, false);
|
|
161
|
+
getDataUrlFromFile(e) {
|
|
162
|
+
return new Promise((t) => {
|
|
163
|
+
const s = new FileReader();
|
|
164
|
+
s.readAsDataURL(e), s.addEventListener("load", function() {
|
|
165
|
+
t(s.result);
|
|
166
|
+
}, !1);
|
|
275
167
|
});
|
|
276
168
|
}
|
|
277
|
-
getBlobFromUrl(
|
|
278
|
-
return new Promise((
|
|
279
|
-
const
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
request.addEventListener("load", () => {
|
|
283
|
-
if (request.status === 200) {
|
|
284
|
-
resolve(request.response);
|
|
285
|
-
} else {
|
|
286
|
-
reject(false);
|
|
287
|
-
}
|
|
169
|
+
getBlobFromUrl(e) {
|
|
170
|
+
return new Promise((t, s) => {
|
|
171
|
+
const i = new C(this.store).request("GET", e);
|
|
172
|
+
i.responseType = "blob", i.send(), i.addEventListener("load", () => {
|
|
173
|
+
i.status === 200 ? t(i.response) : s(!1);
|
|
288
174
|
});
|
|
289
175
|
});
|
|
290
176
|
}
|
|
291
|
-
checkIfIsImage(
|
|
292
|
-
const
|
|
293
|
-
|
|
294
|
-
return imgExt.includes("." + splittedFilename[splittedFilename.length - 1]);
|
|
177
|
+
checkIfIsImage(e) {
|
|
178
|
+
const t = e.split(".");
|
|
179
|
+
return this.store.imgExt.includes("." + t[t.length - 1]);
|
|
295
180
|
}
|
|
296
181
|
}
|
|
297
|
-
class
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
this.el.setAttribute("accept", (_b = store.options) == null ? void 0 : _b.allowedFileTypes.join(","));
|
|
306
|
-
}
|
|
307
|
-
this.el.addEventListener("change", (e) => {
|
|
308
|
-
e.preventDefault();
|
|
309
|
-
if (e.target) {
|
|
310
|
-
[...e.target.files].forEach((item) => {
|
|
311
|
-
const validationService = new FileValidationService(store);
|
|
312
|
-
const validationMsg = validationService.isValidFile(item);
|
|
313
|
-
new FileService(store).generateFileItemFromFile(item).then((fileItem) => {
|
|
314
|
-
store.addFileItem(fileItem);
|
|
315
|
-
if (validationMsg.length !== 0) {
|
|
316
|
-
fileItem.status = "error";
|
|
317
|
-
fileItem.statusMsg = validationMsg.map((item2) => item2.msg).join(", ");
|
|
318
|
-
store.updateFileItem(fileItem);
|
|
319
|
-
}
|
|
320
|
-
new UploadService(store).upload();
|
|
321
|
-
});
|
|
182
|
+
class M {
|
|
183
|
+
el;
|
|
184
|
+
constructor(e, t) {
|
|
185
|
+
this.el = e.cloneNode(!0), this.el.setAttribute("name", `${e.getAttribute("name")}_real`), this.el.classList.add("huply-input"), t.options?.allowedFileTypes && this.el.setAttribute("accept", t.options?.allowedFileTypes.join(",")), this.el.addEventListener("change", (s) => {
|
|
186
|
+
s.preventDefault(), s.target && [...s.target.files].forEach((i) => {
|
|
187
|
+
const n = new z(t).isValidFile(i);
|
|
188
|
+
new c(t).generateFileItemFromFile(i).then((a) => {
|
|
189
|
+
t.addFileItem(a), n.length !== 0 && (a.status = "error", a.statusMsg = n.map((o) => o.msg).join(", "), t.updateFileItem(a)), new b(t).upload();
|
|
322
190
|
});
|
|
323
|
-
}
|
|
191
|
+
});
|
|
324
192
|
});
|
|
325
193
|
}
|
|
326
194
|
render() {
|
|
327
195
|
return this.el;
|
|
328
196
|
}
|
|
329
197
|
}
|
|
330
|
-
class
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
this.fileItem =
|
|
336
|
-
|
|
337
|
-
this.store.events.subscribe("
|
|
338
|
-
|
|
339
|
-
this.updateHeadline(fileItem2);
|
|
340
|
-
this.updateSubline(fileItem2);
|
|
341
|
-
this.updateListEl(fileItem2);
|
|
342
|
-
}
|
|
343
|
-
});
|
|
344
|
-
this.store.events.subscribe("fileDeleted", (fileItem2) => {
|
|
345
|
-
if (this.fileItem.id === fileItem2.id) {
|
|
346
|
-
this.listElement.remove();
|
|
347
|
-
}
|
|
198
|
+
let H = class {
|
|
199
|
+
fileItem;
|
|
200
|
+
listElement;
|
|
201
|
+
store;
|
|
202
|
+
constructor(e, t) {
|
|
203
|
+
this.fileItem = e, this.store = t, this.store.events.subscribe("fileItemUpdate", (s) => {
|
|
204
|
+
this.fileItem.id === s.id && (this.updateHeadline(s), this.updateSubline(s), this.updateListEl(s));
|
|
205
|
+
}), this.store.events.subscribe("fileDeleted", (s) => {
|
|
206
|
+
this.fileItem.id === s.id && this.listElement.remove();
|
|
348
207
|
});
|
|
349
208
|
}
|
|
209
|
+
isGallery() {
|
|
210
|
+
return this.store.options.fileListTheme === "gallery";
|
|
211
|
+
}
|
|
350
212
|
render() {
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
const
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
213
|
+
if (this.isGallery())
|
|
214
|
+
return this.renderGallery();
|
|
215
|
+
const e = this.getListEl();
|
|
216
|
+
this.store.options.sortable && e.appendChild(this.getDragHandle()), e.appendChild(this.getVisual());
|
|
217
|
+
const t = document.createElement("div");
|
|
218
|
+
return t.classList.add("huply-file-item-description"), t.appendChild(this.getHeadline()), t.appendChild(this.getSubline()), e.appendChild(t), e.appendChild(this.getActions()), this.listElement = e, e;
|
|
219
|
+
}
|
|
220
|
+
renderGallery() {
|
|
221
|
+
const e = this.getListEl();
|
|
222
|
+
e.appendChild(this.getVisual());
|
|
223
|
+
const t = document.createElement("div");
|
|
224
|
+
t.classList.add("huply-file-item-gallery-overlay");
|
|
225
|
+
const s = document.createElement("span");
|
|
226
|
+
return s.classList.add("huply-file-item-gallery-progress"), t.appendChild(s), t.appendChild(this.getDeleteAction()), e.appendChild(t), this.listElement = e, e;
|
|
360
227
|
}
|
|
361
228
|
getListEl() {
|
|
362
|
-
const
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
this.listElement.classList.remove("is-uploading");
|
|
368
|
-
this.listElement.classList.remove("is-preloaded");
|
|
369
|
-
this.listElement.classList.remove("is-error");
|
|
370
|
-
this.listElement.classList.remove("is-deleted");
|
|
371
|
-
if (fileItem.status === "uploading") {
|
|
372
|
-
this.listElement.classList.add("is-uploading");
|
|
373
|
-
} else if (fileItem.status === "preloaded") {
|
|
374
|
-
this.listElement.classList.add("is-preloaded");
|
|
375
|
-
} else if (fileItem.status === "error") {
|
|
376
|
-
this.listElement.classList.add("is-error");
|
|
377
|
-
} else if (fileItem.status === "uploaded") {
|
|
378
|
-
this.listElement.classList.add("is-uploaded");
|
|
379
|
-
} else if (fileItem.status === "deleted") {
|
|
380
|
-
this.listElement.classList.add("is-deleted");
|
|
381
|
-
}
|
|
229
|
+
const e = document.createElement("li");
|
|
230
|
+
return e.classList.add("huply-file-item"), e;
|
|
231
|
+
}
|
|
232
|
+
updateListEl(e) {
|
|
233
|
+
this.listElement.classList.remove("is-uploading"), this.listElement.classList.remove("is-preloaded"), this.listElement.classList.remove("is-error"), this.listElement.classList.remove("is-deleted"), e.status === "uploading" ? this.listElement.classList.add("is-uploading") : e.status === "preloaded" ? this.listElement.classList.add("is-preloaded") : e.status === "error" ? this.listElement.classList.add("is-error") : e.status === "uploaded" ? this.listElement.classList.add("is-uploaded") : e.status === "deleted" && this.listElement.classList.add("is-deleted");
|
|
382
234
|
}
|
|
383
235
|
getSubline() {
|
|
384
|
-
const
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
if (sublineEl) {
|
|
393
|
-
if (fileItem.status === "uploading") {
|
|
394
|
-
if (fileItem.uploadProcess) {
|
|
395
|
-
sublineEl.textContent = $t("fileItemStatusUploading") + " (" + fileItem.uploadProcess.toFixed(0) + "%)";
|
|
396
|
-
}
|
|
397
|
-
} else if (fileItem.status === "error") {
|
|
398
|
-
sublineEl.textContent = (_a = fileItem.statusMsg) != null ? _a : $t("fileItemStatusError");
|
|
399
|
-
} else if (fileItem.status === "uploaded" || fileItem.status === "preloaded") {
|
|
400
|
-
if (fileItem.size && fileItem.size > 0) {
|
|
401
|
-
sublineEl.textContent = fileItem.sizeMb && fileItem.sizeMb < 1 ? `${fileItem.sizeKb} KB` : `${getHumanNumber(fileItem.sizeMb)} MB`;
|
|
402
|
-
} else {
|
|
403
|
-
sublineEl.innerHTML = " ";
|
|
404
|
-
}
|
|
405
|
-
}
|
|
236
|
+
const e = document.createElement("p");
|
|
237
|
+
return e.classList.add("huply-file-item-subline"), e.textContent = d("fileItemStatusWaiting"), e;
|
|
238
|
+
}
|
|
239
|
+
updateSubline(e) {
|
|
240
|
+
if (this.isGallery()) {
|
|
241
|
+
const s = this.listElement?.querySelector(".huply-file-item-gallery-progress");
|
|
242
|
+
s && (s.textContent = e.status === "uploading" && e.uploadProcess ? `${e.uploadProcess.toFixed(0)}%` : "");
|
|
243
|
+
return;
|
|
406
244
|
}
|
|
245
|
+
const t = this.listElement.querySelector(".huply-file-item-subline");
|
|
246
|
+
t && (e.status === "uploading" ? e.uploadProcess && (t.textContent = d("fileItemStatusUploading") + " (" + e.uploadProcess.toFixed(0) + "%)") : e.status === "error" ? t.textContent = e.statusMsg ?? d("fileItemStatusError") : (e.status === "uploaded" || e.status === "preloaded") && (e.size && e.size > 0 ? t.textContent = e.sizeMb && e.sizeMb < 1 ? `${e.sizeKb} KB` : `${w(e.sizeMb)} MB` : t.innerHTML = " "));
|
|
407
247
|
}
|
|
408
248
|
getHeadline() {
|
|
409
|
-
const
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
249
|
+
const e = document.createElement("p");
|
|
250
|
+
return e.textContent = this.fileItem.name, e.classList.add("huply-file-item-headline"), e;
|
|
251
|
+
}
|
|
252
|
+
updateHeadline(e) {
|
|
253
|
+
const t = this.listElement.querySelector(".huply-file-item-headline");
|
|
254
|
+
t && (t.textContent = e.name);
|
|
255
|
+
}
|
|
256
|
+
getDragHandle() {
|
|
257
|
+
const e = document.createElement("div");
|
|
258
|
+
return e.classList.add("huply-file-item-drag-handle"), e.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 16"><circle cx="3" cy="2" r="1.5"/><circle cx="7" cy="2" r="1.5"/><circle cx="3" cy="6" r="1.5"/><circle cx="7" cy="6" r="1.5"/><circle cx="3" cy="10" r="1.5"/><circle cx="7" cy="10" r="1.5"/></svg>', e;
|
|
419
259
|
}
|
|
420
260
|
getVisual() {
|
|
421
|
-
const
|
|
422
|
-
|
|
423
|
-
const fileService = new FileService(this.store);
|
|
424
|
-
if (fileService.checkIfIsImage(this.fileItem.name)) {
|
|
261
|
+
const e = document.createElement("div");
|
|
262
|
+
if (e.classList.add("huply-file-item-visual"), new c(this.store).checkIfIsImage(this.fileItem.name))
|
|
425
263
|
if (this.fileItem.url) {
|
|
426
|
-
const
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
imgEl.setAttribute("src", this.fileItem.url);
|
|
430
|
-
setTimeout(() => {
|
|
431
|
-
imgEl.classList.remove("is-hidden");
|
|
264
|
+
const s = document.createElement("img");
|
|
265
|
+
s.classList.add("is-hidden"), e.appendChild(s), s.setAttribute("src", this.fileItem.url), setTimeout(() => {
|
|
266
|
+
s.classList.remove("is-hidden");
|
|
432
267
|
}, 5);
|
|
433
|
-
} else
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
}
|
|
439
|
-
return visiualEl;
|
|
268
|
+
} else
|
|
269
|
+
e.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M152 120c-26.51 0-48 21.49-48 48s21.49 48 48 48s48-21.49 48-48S178.5 120 152 120zM447.1 32h-384C28.65 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM463.1 409.3l-136.8-185.9C323.8 218.8 318.1 216 312 216c-6.113 0-11.82 2.768-15.21 7.379l-106.6 144.1l-37.09-46.1c-3.441-4.279-8.934-6.809-14.77-6.809c-5.842 0-11.33 2.529-14.78 6.809l-75.52 93.81c0-.0293 0 .0293 0 0L47.99 96c0-8.822 7.178-16 16-16h384c8.822 0 16 7.178 16 16V409.3z"/></svg>';
|
|
270
|
+
else
|
|
271
|
+
e.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M365.3 93.38l-74.63-74.64C278.6 6.743 262.3 0 245.4 0L64-.0001c-35.35 0-64 28.65-64 64l.0065 384c0 35.35 28.65 64 64 64H320c35.2 0 64-28.8 64-64V138.6C384 121.7 377.3 105.4 365.3 93.38zM320 464H64.02c-8.836 0-15.1-7.163-16-15.1L48 64.13c-.0004-8.837 7.163-16 16-16h160L224 128c0 17.67 14.33 32 32 32h79.1v288C336 456.8 328.8 464 320 464z"/></svg>';
|
|
272
|
+
return e;
|
|
440
273
|
}
|
|
441
274
|
getActions() {
|
|
442
|
-
const
|
|
443
|
-
|
|
444
|
-
const
|
|
445
|
-
|
|
446
|
-
return actionsEl;
|
|
275
|
+
const e = document.createElement("div");
|
|
276
|
+
e.classList.add("huply-file-item-actions");
|
|
277
|
+
const t = this.getDeleteAction();
|
|
278
|
+
return e.appendChild(t), e;
|
|
447
279
|
}
|
|
448
280
|
getDeleteAction() {
|
|
449
|
-
const
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
deleteEl.addEventListener("click", (e) => {
|
|
454
|
-
e.preventDefault();
|
|
455
|
-
this.store.deleteFileItem(this.fileItem);
|
|
456
|
-
});
|
|
457
|
-
return deleteEl;
|
|
281
|
+
const e = document.createElement("a");
|
|
282
|
+
return e.setAttribute("href", "#"), e.classList.add("huply-file-item-actions-delete"), e.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M424 80C437.3 80 448 90.75 448 104C448 117.3 437.3 128 424 128H412.4L388.4 452.7C385.9 486.1 358.1 512 324.6 512H123.4C89.92 512 62.09 486.1 59.61 452.7L35.56 128H24C10.75 128 0 117.3 0 104C0 90.75 10.75 80 24 80H93.82L130.5 24.94C140.9 9.357 158.4 0 177.1 0H270.9C289.6 0 307.1 9.358 317.5 24.94L354.2 80H424zM177.1 48C174.5 48 171.1 49.34 170.5 51.56L151.5 80H296.5L277.5 51.56C276 49.34 273.5 48 270.9 48H177.1zM364.3 128H83.69L107.5 449.2C108.1 457.5 115.1 464 123.4 464H324.6C332.9 464 339.9 457.5 340.5 449.2L364.3 128z"/></svg>', e.addEventListener("click", (t) => {
|
|
283
|
+
t.preventDefault(), this.store.deleteFileItem(this.fileItem);
|
|
284
|
+
}), e;
|
|
458
285
|
}
|
|
459
|
-
}
|
|
460
|
-
class
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
this.fileList = document.createElement("ul")
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
store.events.subscribe("fileAdded", (fileItem) => {
|
|
469
|
-
this.addChild(fileItem);
|
|
470
|
-
});
|
|
471
|
-
}
|
|
286
|
+
};
|
|
287
|
+
class D {
|
|
288
|
+
fileList;
|
|
289
|
+
store;
|
|
290
|
+
dragSrcEl = null;
|
|
291
|
+
constructor(e) {
|
|
292
|
+
this.store = e, this.fileList = document.createElement("ul"), this.fileList.classList.add("huply-file-list"), this.store.options.sortable && this.fileList.classList.add("is-sortable"), this.store.options.fileListTheme === "gallery" && this.fileList.classList.add("is-gallery"), this.store.options.multiple && e.events.subscribe("fileAdded", (t) => {
|
|
293
|
+
this.addChild(t);
|
|
294
|
+
});
|
|
472
295
|
}
|
|
473
296
|
render() {
|
|
474
297
|
return this.fileList;
|
|
475
298
|
}
|
|
476
|
-
addChild(
|
|
477
|
-
const
|
|
478
|
-
this.fileList.appendChild(
|
|
299
|
+
addChild(e) {
|
|
300
|
+
const s = new H(e, this.store).render();
|
|
301
|
+
this.store.options.sortable && this.makeSortable(s, e), this.fileList.appendChild(s);
|
|
302
|
+
}
|
|
303
|
+
makeSortable(e, t) {
|
|
304
|
+
e.setAttribute("draggable", "true"), e.dataset.fileId = t.id, e.addEventListener("dragstart", (s) => {
|
|
305
|
+
this.dragSrcEl = e, e.classList.add("is-dragging"), s.dataTransfer && (s.dataTransfer.effectAllowed = "move", s.dataTransfer.setData("text/plain", t.id));
|
|
306
|
+
}), e.addEventListener("dragend", () => {
|
|
307
|
+
e.classList.remove("is-dragging"), this.fileList.querySelectorAll(".huply-file-item").forEach((s) => {
|
|
308
|
+
s.classList.remove("is-drag-over");
|
|
309
|
+
}), this.dragSrcEl = null;
|
|
310
|
+
}), e.addEventListener("dragover", (s) => {
|
|
311
|
+
s.preventDefault(), s.dataTransfer && (s.dataTransfer.dropEffect = "move"), this.dragSrcEl && this.dragSrcEl !== e && e.classList.add("is-drag-over");
|
|
312
|
+
}), e.addEventListener("dragleave", () => {
|
|
313
|
+
e.classList.remove("is-drag-over");
|
|
314
|
+
}), e.addEventListener("drop", (s) => {
|
|
315
|
+
if (s.preventDefault(), e.classList.remove("is-drag-over"), this.dragSrcEl && this.dragSrcEl !== e) {
|
|
316
|
+
const i = Array.from(this.fileList.children), l = i.indexOf(this.dragSrcEl), n = i.indexOf(e);
|
|
317
|
+
l < n ? this.fileList.insertBefore(this.dragSrcEl, e.nextSibling) : this.fileList.insertBefore(this.dragSrcEl, e);
|
|
318
|
+
const a = Array.from(this.fileList.children).map((o) => o.dataset.fileId ?? "").filter((o) => o !== "");
|
|
319
|
+
this.store.reorderFiles(a);
|
|
320
|
+
}
|
|
321
|
+
});
|
|
479
322
|
}
|
|
480
323
|
}
|
|
481
|
-
class
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
this.store = store
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
this.updateUploadIcon(fileItem);
|
|
497
|
-
this.updateDeleteIcon(fileItem);
|
|
498
|
-
this.updateDescriptionWrapper(fileItem);
|
|
499
|
-
});
|
|
500
|
-
store.events.subscribe("fileDeleted", (fileItem) => {
|
|
501
|
-
this.updateHeadline(fileItem);
|
|
502
|
-
this.updateSubline(fileItem);
|
|
503
|
-
this.updateUploadIcon(fileItem);
|
|
504
|
-
this.updateDeleteIcon(fileItem);
|
|
505
|
-
this.updateDescriptionWrapper(fileItem);
|
|
506
|
-
});
|
|
507
|
-
}
|
|
324
|
+
class S {
|
|
325
|
+
store;
|
|
326
|
+
dropzone;
|
|
327
|
+
headline;
|
|
328
|
+
subline;
|
|
329
|
+
uploadIcon;
|
|
330
|
+
deleteIcon;
|
|
331
|
+
descWrapper;
|
|
332
|
+
baseCssClass = "";
|
|
333
|
+
constructor(e) {
|
|
334
|
+
this.store = e, this.store.options.multiple || (e.events.subscribe("fileItemUpdate", (t) => {
|
|
335
|
+
this.updateHeadline(t), this.updateSubline(t), this.updateUploadIcon(t), this.updateDeleteIcon(t), this.updateDescriptionWrapper(t);
|
|
336
|
+
}), e.events.subscribe("fileDeleted", (t) => {
|
|
337
|
+
this.updateHeadline(t), this.updateSubline(t), this.updateUploadIcon(t), this.updateDeleteIcon(t), this.updateDescriptionWrapper(t);
|
|
338
|
+
}));
|
|
508
339
|
}
|
|
509
340
|
render() {
|
|
510
|
-
this.dropzone = document.createElement("div");
|
|
511
|
-
if (this.baseCssClass) {
|
|
512
|
-
this.dropzone.classList.add(this.baseCssClass);
|
|
513
|
-
}
|
|
514
|
-
this.getTemplate();
|
|
515
|
-
this.setEvents();
|
|
516
|
-
return this.dropzone;
|
|
341
|
+
return this.dropzone = document.createElement("div"), this.baseCssClass && this.dropzone.classList.add(this.baseCssClass), this.getTemplate(), this.setEvents(), this.dropzone;
|
|
517
342
|
}
|
|
518
343
|
getTemplate() {
|
|
519
344
|
}
|
|
520
345
|
setEvents() {
|
|
521
|
-
|
|
522
|
-
this.
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
this.dropzone.
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
const uploadService = new UploadService(this.store);
|
|
539
|
-
if (e.dataTransfer) {
|
|
540
|
-
for (var i = 0; i < e.dataTransfer.items.length; i++) {
|
|
541
|
-
const item = e.dataTransfer.items[i].getAsFile();
|
|
542
|
-
if (item) {
|
|
543
|
-
const validationService = new FileValidationService(this.store);
|
|
544
|
-
const validationMsg = validationService.isValidFile(item);
|
|
545
|
-
new FileService(this.store).generateFileItemFromFile(item).then((fileItem) => {
|
|
546
|
-
this.store.addFileItem(fileItem);
|
|
547
|
-
if (validationMsg.length !== 0) {
|
|
548
|
-
fileItem.status = "error";
|
|
549
|
-
fileItem.statusMsg = validationMsg.map((item2) => item2.msg).join(", ");
|
|
550
|
-
this.store.updateFileItem(fileItem);
|
|
551
|
-
}
|
|
552
|
-
uploadService.upload();
|
|
553
|
-
});
|
|
554
|
-
}
|
|
346
|
+
this.dropzone && (this.dropzone.addEventListener("click", () => {
|
|
347
|
+
this.store.components.input?.click();
|
|
348
|
+
}), this.dropzone.addEventListener("dragover", (e) => {
|
|
349
|
+
e.preventDefault(), this.dropzone?.classList.add("is-dragover");
|
|
350
|
+
}), this.dropzone.addEventListener("dragleave", (e) => {
|
|
351
|
+
e.preventDefault(), this.dropzone?.classList.remove("is-dragover");
|
|
352
|
+
}), this.dropzone.addEventListener("drop", (e) => {
|
|
353
|
+
e.preventDefault();
|
|
354
|
+
const t = new b(this.store);
|
|
355
|
+
if (e.dataTransfer)
|
|
356
|
+
for (var s = 0; s < e.dataTransfer.items.length; s++) {
|
|
357
|
+
const i = e.dataTransfer.items[s].getAsFile();
|
|
358
|
+
if (i) {
|
|
359
|
+
const n = new z(this.store).isValidFile(i);
|
|
360
|
+
new c(this.store).generateFileItemFromFile(i).then((a) => {
|
|
361
|
+
this.store.addFileItem(a), n.length !== 0 && (a.status = "error", a.statusMsg = n.map((o) => o.msg).join(", "), this.store.updateFileItem(a)), t.upload();
|
|
362
|
+
});
|
|
555
363
|
}
|
|
556
364
|
}
|
|
557
|
-
|
|
558
|
-
}
|
|
365
|
+
}));
|
|
559
366
|
}
|
|
560
367
|
getDescriptionWrapper() {
|
|
561
|
-
this.descWrapper = document.createElement("div");
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
updateDescriptionWrapper(fileItem) {
|
|
566
|
-
if (this.descWrapper) {
|
|
567
|
-
this.descWrapper.classList.remove("is-uploading");
|
|
568
|
-
this.descWrapper.classList.remove("is-preloaded");
|
|
569
|
-
this.descWrapper.classList.remove("is-error");
|
|
570
|
-
this.descWrapper.classList.remove("is-uploaded");
|
|
571
|
-
if (fileItem.status === "uploading") {
|
|
572
|
-
this.descWrapper.classList.add("is-uploading");
|
|
573
|
-
} else if (fileItem.status === "preloaded") {
|
|
574
|
-
this.descWrapper.classList.add("is-preloaded");
|
|
575
|
-
} else if (fileItem.status === "error") {
|
|
576
|
-
this.descWrapper.classList.add("is-error");
|
|
577
|
-
} else if (fileItem.status === "uploaded") {
|
|
578
|
-
this.descWrapper.classList.add("is-uploaded");
|
|
579
|
-
}
|
|
580
|
-
}
|
|
368
|
+
return this.descWrapper = document.createElement("div"), this.descWrapper.classList.add(this.baseCssClass + "-desc"), this.descWrapper;
|
|
369
|
+
}
|
|
370
|
+
updateDescriptionWrapper(e) {
|
|
371
|
+
this.descWrapper && (this.descWrapper.classList.remove("is-uploading"), this.descWrapper.classList.remove("is-preloaded"), this.descWrapper.classList.remove("is-error"), this.descWrapper.classList.remove("is-uploaded"), e.status === "uploading" ? this.descWrapper.classList.add("is-uploading") : e.status === "preloaded" ? this.descWrapper.classList.add("is-preloaded") : e.status === "error" ? this.descWrapper.classList.add("is-error") : e.status === "uploaded" && this.descWrapper.classList.add("is-uploaded"));
|
|
581
372
|
}
|
|
582
373
|
getUploadIcon() {
|
|
583
|
-
this.uploadIcon = document.createElement("div");
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
}
|
|
588
|
-
updateUploadIcon(fileItem) {
|
|
589
|
-
if (this.uploadIcon) {
|
|
590
|
-
if (fileItem.status === "uploading" && fileItem.uploadProcess === 0) {
|
|
591
|
-
this.uploadIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M264 24C264 10.75 274.7 0 288 0C429.4 0 544 114.6 544 256C544 302.6 531.5 346.4 509.7 384C503.1 395.5 488.4 399.4 476.9 392.8C465.5 386.2 461.5 371.5 468.2 360C485.9 329.4 496 293.9 496 255.1C496 141.1 402.9 47.1 288 47.1C274.7 47.1 264 37.25 264 23.1V24z"/></svg>';
|
|
592
|
-
} else if (fileItem.status === "error") {
|
|
593
|
-
this.uploadIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 464c-114.7 0-208-93.31-208-208S141.3 48 256 48s208 93.31 208 208S370.7 464 256 464zM256 304c13.25 0 24-10.75 24-24v-128C280 138.8 269.3 128 256 128S232 138.8 232 152v128C232 293.3 242.8 304 256 304zM256 337.1c-17.36 0-31.44 14.08-31.44 31.44C224.6 385.9 238.6 400 256 400s31.44-14.08 31.44-31.44C287.4 351.2 273.4 337.1 256 337.1z"/></svg>';
|
|
594
|
-
} else if (fileItem.status === "uploaded") {
|
|
595
|
-
this.uploadIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M243.8 339.8C232.9 350.7 215.1 350.7 204.2 339.8L140.2 275.8C129.3 264.9 129.3 247.1 140.2 236.2C151.1 225.3 168.9 225.3 179.8 236.2L224 280.4L332.2 172.2C343.1 161.3 360.9 161.3 371.8 172.2C382.7 183.1 382.7 200.9 371.8 211.8L243.8 339.8zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z"/></svg>';
|
|
596
|
-
} else if (fileItem.status === "deleted" && this.store.getFilesUploading().length === 0) {
|
|
597
|
-
this.uploadIcon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M303 175C312.4 165.7 327.6 165.7 336.1 175L416.1 255C426.3 264.4 426.3 279.6 416.1 288.1C407.6 298.3 392.4 298.3 383 288.1L344 249.9V384C344 397.3 333.3 408 320 408C306.7 408 296 397.3 296 384V249.9L256.1 288.1C247.6 298.3 232.4 298.3 223 288.1C213.7 279.6 213.7 264.4 223 255L303 175zM144 480C64.47 480 0 415.5 0 336C0 273.3 40.07 219.1 96 200.2V200C96 107.2 171.2 32 264 32C314.9 32 360.4 54.6 391.3 90.31C406.2 83.68 422.6 80 440 80C506.3 80 560 133.7 560 200C560 206.6 559.5 213 558.5 219.3C606.5 240.3 640 288.3 640 344C640 416.4 583.4 475.6 512 479.8V480H144zM264 80C197.7 80 144 133.7 144 200L144 234.1L111.1 245.5C74.64 258.7 48 294.3 48 336C48 389 90.98 432 144 432H506.6L509.2 431.8C555.4 429.2 592 390.8 592 344C592 308 570.4 276.9 539.2 263.3L505.1 248.4L511.1 211.7C511.7 207.9 512 204 512 200C512 160.2 479.8 128 440 128C429.5 128 419.6 130.2 410.8 134.2L378.2 148.7L354.9 121.7C332.8 96.08 300.3 80 263.1 80L264 80z"/></svg>`;
|
|
598
|
-
} else if (fileItem.status === "preloaded") {
|
|
599
|
-
this.uploadIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M454.7 288.1c-12.78-3.75-26.06 3.594-29.75 16.31C403.3 379.9 333.8 432 255.1 432c-66.53 0-126.8-38.28-156.5-96h100.4c13.25 0 24-10.75 24-24S213.2 288 199.9 288h-160c-13.25 0-24 10.75-24 24v160c0 13.25 10.75 24 24 24s24-10.75 24-24v-102.1C103.7 436.4 176.1 480 255.1 480c99 0 187.4-66.31 215.1-161.3C474.8 305.1 467.4 292.7 454.7 288.1zM472 16C458.8 16 448 26.75 448 40v102.1C408.3 75.55 335.8 32 256 32C157 32 68.53 98.31 40.91 193.3C37.19 206 44.5 219.3 57.22 223c12.84 3.781 26.09-3.625 29.75-16.31C108.7 132.1 178.2 80 256 80c66.53 0 126.8 38.28 156.5 96H312C298.8 176 288 186.8 288 200S298.8 224 312 224h160c13.25 0 24-10.75 24-24v-160C496 26.75 485.3 16 472 16z"/></svg>';
|
|
600
|
-
}
|
|
601
|
-
}
|
|
374
|
+
return this.uploadIcon = document.createElement("div"), this.uploadIcon.classList.add(this.baseCssClass + "-icon-upload"), this.uploadIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M303 175C312.4 165.7 327.6 165.7 336.1 175L416.1 255C426.3 264.4 426.3 279.6 416.1 288.1C407.6 298.3 392.4 298.3 383 288.1L344 249.9V384C344 397.3 333.3 408 320 408C306.7 408 296 397.3 296 384V249.9L256.1 288.1C247.6 298.3 232.4 298.3 223 288.1C213.7 279.6 213.7 264.4 223 255L303 175zM144 480C64.47 480 0 415.5 0 336C0 273.3 40.07 219.1 96 200.2V200C96 107.2 171.2 32 264 32C314.9 32 360.4 54.6 391.3 90.31C406.2 83.68 422.6 80 440 80C506.3 80 560 133.7 560 200C560 206.6 559.5 213 558.5 219.3C606.5 240.3 640 288.3 640 344C640 416.4 583.4 475.6 512 479.8V480H144zM264 80C197.7 80 144 133.7 144 200L144 234.1L111.1 245.5C74.64 258.7 48 294.3 48 336C48 389 90.98 432 144 432H506.6L509.2 431.8C555.4 429.2 592 390.8 592 344C592 308 570.4 276.9 539.2 263.3L505.1 248.4L511.1 211.7C511.7 207.9 512 204 512 200C512 160.2 479.8 128 440 128C429.5 128 419.6 130.2 410.8 134.2L378.2 148.7L354.9 121.7C332.8 96.08 300.3 80 263.1 80L264 80z"/></svg>', this.uploadIcon;
|
|
375
|
+
}
|
|
376
|
+
updateUploadIcon(e) {
|
|
377
|
+
this.uploadIcon && (e.status === "uploading" && e.uploadProcess === 0 ? this.uploadIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M264 24C264 10.75 274.7 0 288 0C429.4 0 544 114.6 544 256C544 302.6 531.5 346.4 509.7 384C503.1 395.5 488.4 399.4 476.9 392.8C465.5 386.2 461.5 371.5 468.2 360C485.9 329.4 496 293.9 496 255.1C496 141.1 402.9 47.1 288 47.1C274.7 47.1 264 37.25 264 23.1V24z"/></svg>' : e.status === "error" ? this.uploadIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 464c-114.7 0-208-93.31-208-208S141.3 48 256 48s208 93.31 208 208S370.7 464 256 464zM256 304c13.25 0 24-10.75 24-24v-128C280 138.8 269.3 128 256 128S232 138.8 232 152v128C232 293.3 242.8 304 256 304zM256 337.1c-17.36 0-31.44 14.08-31.44 31.44C224.6 385.9 238.6 400 256 400s31.44-14.08 31.44-31.44C287.4 351.2 273.4 337.1 256 337.1z"/></svg>' : e.status === "uploaded" ? this.uploadIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M243.8 339.8C232.9 350.7 215.1 350.7 204.2 339.8L140.2 275.8C129.3 264.9 129.3 247.1 140.2 236.2C151.1 225.3 168.9 225.3 179.8 236.2L224 280.4L332.2 172.2C343.1 161.3 360.9 161.3 371.8 172.2C382.7 183.1 382.7 200.9 371.8 211.8L243.8 339.8zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z"/></svg>' : e.status === "deleted" && this.store.getFilesUploading().length === 0 ? this.uploadIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M303 175C312.4 165.7 327.6 165.7 336.1 175L416.1 255C426.3 264.4 426.3 279.6 416.1 288.1C407.6 298.3 392.4 298.3 383 288.1L344 249.9V384C344 397.3 333.3 408 320 408C306.7 408 296 397.3 296 384V249.9L256.1 288.1C247.6 298.3 232.4 298.3 223 288.1C213.7 279.6 213.7 264.4 223 255L303 175zM144 480C64.47 480 0 415.5 0 336C0 273.3 40.07 219.1 96 200.2V200C96 107.2 171.2 32 264 32C314.9 32 360.4 54.6 391.3 90.31C406.2 83.68 422.6 80 440 80C506.3 80 560 133.7 560 200C560 206.6 559.5 213 558.5 219.3C606.5 240.3 640 288.3 640 344C640 416.4 583.4 475.6 512 479.8V480H144zM264 80C197.7 80 144 133.7 144 200L144 234.1L111.1 245.5C74.64 258.7 48 294.3 48 336C48 389 90.98 432 144 432H506.6L509.2 431.8C555.4 429.2 592 390.8 592 344C592 308 570.4 276.9 539.2 263.3L505.1 248.4L511.1 211.7C511.7 207.9 512 204 512 200C512 160.2 479.8 128 440 128C429.5 128 419.6 130.2 410.8 134.2L378.2 148.7L354.9 121.7C332.8 96.08 300.3 80 263.1 80L264 80z"/></svg>' : e.status === "preloaded" && (this.uploadIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M454.7 288.1c-12.78-3.75-26.06 3.594-29.75 16.31C403.3 379.9 333.8 432 255.1 432c-66.53 0-126.8-38.28-156.5-96h100.4c13.25 0 24-10.75 24-24S213.2 288 199.9 288h-160c-13.25 0-24 10.75-24 24v160c0 13.25 10.75 24 24 24s24-10.75 24-24v-102.1C103.7 436.4 176.1 480 255.1 480c99 0 187.4-66.31 215.1-161.3C474.8 305.1 467.4 292.7 454.7 288.1zM472 16C458.8 16 448 26.75 448 40v102.1C408.3 75.55 335.8 32 256 32C157 32 68.53 98.31 40.91 193.3C37.19 206 44.5 219.3 57.22 223c12.84 3.781 26.09-3.625 29.75-16.31C108.7 132.1 178.2 80 256 80c66.53 0 126.8 38.28 156.5 96H312C298.8 176 288 186.8 288 200S298.8 224 312 224h160c13.25 0 24-10.75 24-24v-160C496 26.75 485.3 16 472 16z"/></svg>'));
|
|
602
378
|
}
|
|
603
379
|
getDeleteIcon() {
|
|
604
|
-
this.deleteIcon = document.createElement("a")
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
this.deleteIcon
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
const fileIndex = this.store.files.findIndex((currentItem) => {
|
|
613
|
-
var _a;
|
|
614
|
-
return ((_a = this.deleteIcon) == null ? void 0 : _a.getAttribute("data-file-id")) == currentItem.id;
|
|
615
|
-
});
|
|
616
|
-
if (fileIndex !== -1) {
|
|
617
|
-
this.store.deleteFileItem(this.store.files[fileIndex]);
|
|
618
|
-
}
|
|
619
|
-
});
|
|
620
|
-
return this.deleteIcon;
|
|
621
|
-
}
|
|
622
|
-
updateDeleteIcon(fileItem) {
|
|
623
|
-
if (this.deleteIcon) {
|
|
624
|
-
if (fileItem.status === "uploaded" || fileItem.status === "preloaded") {
|
|
625
|
-
this.deleteIcon.classList.remove("is-hidden");
|
|
626
|
-
this.deleteIcon.setAttribute("data-file-id", fileItem.id);
|
|
627
|
-
} else {
|
|
628
|
-
this.deleteIcon.classList.add("is-hidden");
|
|
629
|
-
}
|
|
630
|
-
}
|
|
380
|
+
return this.deleteIcon = document.createElement("a"), this.deleteIcon.setAttribute("href", "#"), this.deleteIcon.classList.add(this.baseCssClass + "-icon-delete"), this.deleteIcon.classList.add("is-hidden"), this.deleteIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M424 80C437.3 80 448 90.75 448 104C448 117.3 437.3 128 424 128H412.4L388.4 452.7C385.9 486.1 358.1 512 324.6 512H123.4C89.92 512 62.09 486.1 59.61 452.7L35.56 128H24C10.75 128 0 117.3 0 104C0 90.75 10.75 80 24 80H93.82L130.5 24.94C140.9 9.357 158.4 0 177.1 0H270.9C289.6 0 307.1 9.358 317.5 24.94L354.2 80H424zM177.1 48C174.5 48 171.1 49.34 170.5 51.56L151.5 80H296.5L277.5 51.56C276 49.34 273.5 48 270.9 48H177.1zM364.3 128H83.69L107.5 449.2C108.1 457.5 115.1 464 123.4 464H324.6C332.9 464 339.9 457.5 340.5 449.2L364.3 128z"/></svg>', this.deleteIcon.addEventListener("click", (e) => {
|
|
381
|
+
e.preventDefault(), e.stopPropagation();
|
|
382
|
+
const t = this.store.files.findIndex((s) => this.deleteIcon?.getAttribute("data-file-id") == s.id);
|
|
383
|
+
t !== -1 && this.store.deleteFileItem(this.store.files[t]);
|
|
384
|
+
}), this.deleteIcon;
|
|
385
|
+
}
|
|
386
|
+
updateDeleteIcon(e) {
|
|
387
|
+
this.deleteIcon && (e.status === "uploaded" || e.status === "preloaded" ? (this.deleteIcon.classList.remove("is-hidden"), this.deleteIcon.setAttribute("data-file-id", e.id)) : this.deleteIcon.classList.add("is-hidden"));
|
|
631
388
|
}
|
|
632
389
|
getHeadline() {
|
|
633
|
-
this.headline = document.createElement("p");
|
|
634
|
-
this.headline.classList.add(this.baseCssClass + "-headline");
|
|
635
|
-
this.headline.innerHTML = this.getHeadlineText();
|
|
636
|
-
return this.headline;
|
|
390
|
+
return this.headline = document.createElement("p"), this.headline.classList.add(this.baseCssClass + "-headline"), this.headline.innerHTML = this.getHeadlineText(), this.headline;
|
|
637
391
|
}
|
|
638
392
|
getHeadlineText() {
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
if (this.headline) {
|
|
644
|
-
if (fileItem.status === "deleted") {
|
|
645
|
-
this.headline.innerHTML = this.getHeadlineText();
|
|
646
|
-
} else {
|
|
647
|
-
this.headline.innerHTML = `<strong>${fileItem.name}</strong>`;
|
|
648
|
-
}
|
|
649
|
-
}
|
|
393
|
+
return `<strong>${this.store?.options.multiple ? d("chooseFiles") : d("chooseFile")}</strong>`;
|
|
394
|
+
}
|
|
395
|
+
updateHeadline(e) {
|
|
396
|
+
this.headline && (e.status === "deleted" ? this.headline.innerHTML = this.getHeadlineText() : this.headline.innerHTML = `<strong>${e.name}</strong>`);
|
|
650
397
|
}
|
|
651
398
|
getSubline() {
|
|
652
|
-
this.subline = document.createElement("p");
|
|
653
|
-
this.subline.innerText = this.getSublineText();
|
|
654
|
-
this.subline.classList.add(this.baseCssClass + "-subline");
|
|
655
|
-
return this.subline;
|
|
399
|
+
return this.subline = document.createElement("p"), this.subline.innerText = this.getSublineText(), this.subline.classList.add(this.baseCssClass + "-subline"), this.subline;
|
|
656
400
|
}
|
|
657
401
|
getSublineText() {
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
}
|
|
664
|
-
updateSubline(fileItem) {
|
|
665
|
-
var _a;
|
|
666
|
-
if (this.subline) {
|
|
667
|
-
this.subline.classList.remove("is-uploading");
|
|
668
|
-
this.subline.classList.remove("is-preloaded");
|
|
669
|
-
this.subline.classList.remove("is-error");
|
|
670
|
-
this.subline.classList.remove("is-uploaded");
|
|
671
|
-
if (fileItem.status === "uploading" && fileItem.uploadProcess) {
|
|
672
|
-
this.subline.innerHTML = $t("fileItemStatusUploading") + " (" + fileItem.uploadProcess.toFixed(0) + "%)";
|
|
673
|
-
} else if (fileItem.status === "error") {
|
|
674
|
-
this.subline.innerHTML = (_a = fileItem.statusMsg) != null ? _a : $t("fileItemStatusError");
|
|
675
|
-
} else if (fileItem.status === "uploaded" || fileItem.status === "preloaded") {
|
|
676
|
-
if (fileItem.size && fileItem.size > 0) {
|
|
677
|
-
this.subline.textContent = fileItem.sizeMb && fileItem.sizeMb < 1 ? `${fileItem.sizeKb} KB` : `${getHumanNumber(fileItem.sizeMb)} MB`;
|
|
678
|
-
} else {
|
|
679
|
-
this.subline.innerHTML = " ";
|
|
680
|
-
}
|
|
681
|
-
} else {
|
|
682
|
-
this.subline.innerHTML = this.getSublineText();
|
|
683
|
-
}
|
|
684
|
-
}
|
|
402
|
+
const e = [];
|
|
403
|
+
return e.push(d("allowedFileTypes", { allowedFileTypes: this.store?.options.allowedFileTypes })), e.push(d("maxFileSize", { maxFileSize: this.store?.options.maxFileSize })), e.join(", ");
|
|
404
|
+
}
|
|
405
|
+
updateSubline(e) {
|
|
406
|
+
this.subline && (this.subline.classList.remove("is-uploading"), this.subline.classList.remove("is-preloaded"), this.subline.classList.remove("is-error"), this.subline.classList.remove("is-uploaded"), e.status === "uploading" && e.uploadProcess ? this.subline.innerHTML = d("fileItemStatusUploading") + " (" + e.uploadProcess.toFixed(0) + "%)" : e.status === "error" ? this.subline.innerHTML = e.statusMsg ?? d("fileItemStatusError") : e.status === "uploaded" || e.status === "preloaded" ? e.size && e.size > 0 ? this.subline.textContent = e.sizeMb && e.sizeMb < 1 ? `${e.sizeKb} KB` : `${w(e.sizeMb)} MB` : this.subline.innerHTML = " " : this.subline.innerHTML = this.getSublineText());
|
|
685
407
|
}
|
|
686
408
|
}
|
|
687
|
-
class
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
409
|
+
class U extends S {
|
|
410
|
+
baseCssClass = "huply-dropzone-lg";
|
|
411
|
+
constructor(e) {
|
|
412
|
+
super(e);
|
|
691
413
|
}
|
|
692
414
|
getTemplate() {
|
|
693
415
|
if (this.dropzone) {
|
|
694
416
|
this.dropzone.appendChild(this.getDeleteIcon());
|
|
695
|
-
const
|
|
696
|
-
|
|
697
|
-
dropzoneDescriptionWrapper.appendChild(this.getHeadline());
|
|
698
|
-
dropzoneDescriptionWrapper.appendChild(this.getSubline());
|
|
699
|
-
this.dropzone.appendChild(dropzoneDescriptionWrapper);
|
|
700
|
-
return this.dropzone;
|
|
417
|
+
const e = this.getDescriptionWrapper();
|
|
418
|
+
return e.appendChild(this.getUploadIcon()), e.appendChild(this.getHeadline()), e.appendChild(this.getSubline()), this.dropzone.appendChild(e), this.dropzone;
|
|
701
419
|
}
|
|
702
420
|
}
|
|
703
421
|
}
|
|
704
|
-
class
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
store.events.subscribe("fileDeleted", (fileItem) => {
|
|
713
|
-
this.updateWrapper(fileItem);
|
|
714
|
-
});
|
|
715
|
-
}
|
|
422
|
+
class A extends S {
|
|
423
|
+
baseCssClass = "huply-dropzone-sm";
|
|
424
|
+
constructor(e) {
|
|
425
|
+
super(e), this.store.options.multiple || (e.events.subscribe("fileItemUpdate", (t) => {
|
|
426
|
+
this.updateWrapper(t);
|
|
427
|
+
}), e.events.subscribe("fileDeleted", (t) => {
|
|
428
|
+
this.updateWrapper(t);
|
|
429
|
+
}));
|
|
716
430
|
}
|
|
717
431
|
getTemplate() {
|
|
718
432
|
if (this.dropzone) {
|
|
719
|
-
const
|
|
720
|
-
|
|
721
|
-
dropzoneWrapper.appendChild(this.getSubline());
|
|
722
|
-
dropzoneWrapper.appendChild(this.getUploadIcon());
|
|
723
|
-
dropzoneWrapper.appendChild(this.getDeleteIcon());
|
|
724
|
-
this.dropzone.appendChild(dropzoneWrapper);
|
|
725
|
-
return this.dropzone;
|
|
433
|
+
const e = this.getWrapper();
|
|
434
|
+
return e.appendChild(this.getHeadline()), e.appendChild(this.getSubline()), e.appendChild(this.getUploadIcon()), e.appendChild(this.getDeleteIcon()), this.dropzone.appendChild(e), this.dropzone;
|
|
726
435
|
}
|
|
727
436
|
}
|
|
728
437
|
getWrapper() {
|
|
729
|
-
this.descWrapper = document.createElement("div");
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
updateWrapper(fileItem) {
|
|
734
|
-
if (this.descWrapper) {
|
|
735
|
-
this.descWrapper.classList.remove("is-uploading");
|
|
736
|
-
this.descWrapper.classList.remove("is-preloaded");
|
|
737
|
-
this.descWrapper.classList.remove("is-error");
|
|
738
|
-
this.descWrapper.classList.remove("is-uploaded");
|
|
739
|
-
if (fileItem.status === "uploading") {
|
|
740
|
-
this.descWrapper.classList.add("is-uploading");
|
|
741
|
-
} else if (fileItem.status === "preloaded") {
|
|
742
|
-
this.descWrapper.classList.add("is-preloaded");
|
|
743
|
-
} else if (fileItem.status === "error") {
|
|
744
|
-
this.descWrapper.classList.add("is-error");
|
|
745
|
-
} else if (fileItem.status === "uploaded") {
|
|
746
|
-
this.descWrapper.classList.add("is-uploaded");
|
|
747
|
-
}
|
|
748
|
-
}
|
|
438
|
+
return this.descWrapper = document.createElement("div"), this.descWrapper.classList.add("huply-dropzone-sm-wrapper"), this.descWrapper;
|
|
439
|
+
}
|
|
440
|
+
updateWrapper(e) {
|
|
441
|
+
this.descWrapper && (this.descWrapper.classList.remove("is-uploading"), this.descWrapper.classList.remove("is-preloaded"), this.descWrapper.classList.remove("is-error"), this.descWrapper.classList.remove("is-uploaded"), e.status === "uploading" ? this.descWrapper.classList.add("is-uploading") : e.status === "preloaded" ? this.descWrapper.classList.add("is-preloaded") : e.status === "error" ? this.descWrapper.classList.add("is-error") : e.status === "uploaded" && this.descWrapper.classList.add("is-uploaded"));
|
|
749
442
|
}
|
|
750
443
|
}
|
|
751
|
-
class
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
this.el =
|
|
757
|
-
this.store = store;
|
|
758
|
-
this.input = document.createElement("input");
|
|
759
|
-
store.events.subscribe("fileItemUpdate", () => {
|
|
444
|
+
class W {
|
|
445
|
+
el;
|
|
446
|
+
store;
|
|
447
|
+
input;
|
|
448
|
+
constructor(e, t) {
|
|
449
|
+
this.el = e, this.store = t, this.input = document.createElement("input"), t.events.subscribe("fileItemUpdate", () => {
|
|
760
450
|
this.input.setAttribute("value", this.getValue());
|
|
761
|
-
})
|
|
762
|
-
store.events.subscribe("fileDeleted", () => {
|
|
451
|
+
}), t.events.subscribe("fileDeleted", () => {
|
|
763
452
|
this.input.setAttribute("value", this.getValue());
|
|
764
453
|
});
|
|
765
454
|
}
|
|
766
455
|
render() {
|
|
767
456
|
this.input.setAttribute("type", "hidden");
|
|
768
|
-
const
|
|
769
|
-
|
|
770
|
-
this.input.setAttribute("name", nameAttr);
|
|
771
|
-
}
|
|
772
|
-
return this.input;
|
|
457
|
+
const e = this.el.getAttribute("name");
|
|
458
|
+
return e && this.input.setAttribute("name", e), this.input;
|
|
773
459
|
}
|
|
774
460
|
getValue() {
|
|
775
|
-
const
|
|
776
|
-
|
|
777
|
-
fileItem.url = void 0;
|
|
778
|
-
fileItem.data = void 0;
|
|
779
|
-
return fileItem;
|
|
780
|
-
});
|
|
781
|
-
categorizedFiles.deleted = categorizedFiles.deleted.map((fileItem) => {
|
|
782
|
-
fileItem.url = void 0;
|
|
783
|
-
fileItem.data = void 0;
|
|
784
|
-
return fileItem;
|
|
785
|
-
});
|
|
786
|
-
categorizedFiles.preloaded = categorizedFiles.preloaded.map((fileItem) => {
|
|
787
|
-
fileItem.url = void 0;
|
|
788
|
-
return fileItem;
|
|
789
|
-
});
|
|
790
|
-
return JSON.stringify(categorizedFiles);
|
|
461
|
+
const e = this.store.getCategorizedFiles();
|
|
462
|
+
return e.uploaded = e.uploaded.map((t) => (t.url = void 0, t.data = void 0, t)), e.deleted = e.deleted.map((t) => (t.url = void 0, t.data = void 0, t)), e.preloaded = e.preloaded.map((t) => (t.url = void 0, t)), JSON.stringify(e);
|
|
791
463
|
}
|
|
792
464
|
}
|
|
793
|
-
class
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
this.el =
|
|
798
|
-
this.store = store;
|
|
465
|
+
class P {
|
|
466
|
+
el;
|
|
467
|
+
store;
|
|
468
|
+
constructor(e, t) {
|
|
469
|
+
this.el = e, this.store = t;
|
|
799
470
|
}
|
|
800
471
|
render() {
|
|
801
|
-
const
|
|
802
|
-
|
|
803
|
-
const
|
|
804
|
-
|
|
805
|
-
const
|
|
806
|
-
|
|
807
|
-
let
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
} else {
|
|
812
|
-
dropzoneComponent = new FileDropzoneLgComponent(this.store);
|
|
813
|
-
wrapper.appendChild(dropzoneComponent.render());
|
|
814
|
-
}
|
|
815
|
-
const fileListComponent = new FileListComponent(this.store);
|
|
816
|
-
wrapper.appendChild(fileListComponent.render());
|
|
817
|
-
this.store.setComponent("input", inputComponent);
|
|
818
|
-
this.store.setComponent("dropzone", dropzoneComponent);
|
|
819
|
-
this.store.setComponent("fileList", fileListComponent);
|
|
820
|
-
return wrapper;
|
|
472
|
+
const e = document.createElement("div");
|
|
473
|
+
e.classList.add("huply-wrapper");
|
|
474
|
+
const t = new M(this.el, this.store).render();
|
|
475
|
+
e.appendChild(t);
|
|
476
|
+
const s = new W(this.el, this.store).render();
|
|
477
|
+
e.appendChild(s);
|
|
478
|
+
let i;
|
|
479
|
+
this.store.options.dropzoneTheme === "sm" ? (i = new A(this.store), e.appendChild(i.render())) : (i = new U(this.store), e.appendChild(i.render()));
|
|
480
|
+
const l = new D(this.store);
|
|
481
|
+
return e.appendChild(l.render()), this.store.setComponent("input", t), this.store.setComponent("dropzone", i), this.store.setComponent("fileList", l), e;
|
|
821
482
|
}
|
|
822
483
|
}
|
|
823
|
-
|
|
824
|
-
chooseFiles: "Dateien
|
|
825
|
-
chooseFile: "Datei
|
|
484
|
+
const k = {
|
|
485
|
+
chooseFiles: "Dateien auswählen",
|
|
486
|
+
chooseFile: "Datei auswählen",
|
|
826
487
|
allowedFileTypes: "Erlaubte Dateitypen: {{allowedFileTypes}}",
|
|
827
|
-
maxFileSize: "Maximale
|
|
488
|
+
maxFileSize: "Maximale Dateigröße: {{maxFileSize}} MB",
|
|
828
489
|
fileItemStatusWaiting: "In Warteschlange",
|
|
829
490
|
fileItemStatusUploading: "Wird hochgeladen",
|
|
830
491
|
fileItemStatusUploaded: "Erfolgreich hochgeladen",
|
|
831
492
|
fileItemStatusPreloaded: "Bereits hochgeladen",
|
|
832
493
|
fileItemStatusError: "Ein Fehler ist aufgetreten.",
|
|
833
|
-
fileItemStatusErrorFileSize: "Die
|
|
494
|
+
fileItemStatusErrorFileSize: "Die Dateigröße überschreitet die Maximalgröße: {{maxFileSize}} MB",
|
|
834
495
|
fileItemStatusErrorFileType: "Der Dateityp ist nicht erlaubt. Erlaubte Dateitypen: {{allowedFileTypes}}",
|
|
835
|
-
delete: "
|
|
836
|
-
}
|
|
837
|
-
var en = {
|
|
496
|
+
delete: "Löschen"
|
|
497
|
+
}, B = {
|
|
838
498
|
chooseFiles: "Choose files",
|
|
839
499
|
chooseFile: "Choose file",
|
|
840
500
|
allowedFileTypes: "Allowed file types: {{allowedFileTypes}}",
|
|
@@ -848,88 +508,52 @@ var en = {
|
|
|
848
508
|
fileItemStatusErrorFileType: "The file type is not allowed. Allowed file types: {{allowedFileTypes}}",
|
|
849
509
|
delete: "Delete"
|
|
850
510
|
};
|
|
851
|
-
class
|
|
511
|
+
class V {
|
|
512
|
+
events = {};
|
|
852
513
|
constructor() {
|
|
853
|
-
__publicField(this, "events", {});
|
|
854
514
|
}
|
|
855
|
-
subscribe(
|
|
856
|
-
|
|
857
|
-
this.events[event] = [];
|
|
858
|
-
}
|
|
859
|
-
return this.events[event].push(callback);
|
|
515
|
+
subscribe(e, t) {
|
|
516
|
+
return f(this.events[e]) || (this.events[e] = []), this.events[e].push(t);
|
|
860
517
|
}
|
|
861
|
-
publish(
|
|
862
|
-
|
|
863
|
-
return [];
|
|
864
|
-
}
|
|
865
|
-
return this.events[event].map((callback) => callback(data));
|
|
518
|
+
publish(e, t = {}) {
|
|
519
|
+
return f(this.events[e]) ? this.events[e].map((s) => s(t)) : [];
|
|
866
520
|
}
|
|
867
521
|
}
|
|
868
|
-
class
|
|
522
|
+
class O {
|
|
523
|
+
events;
|
|
524
|
+
files;
|
|
525
|
+
components;
|
|
526
|
+
translations;
|
|
527
|
+
options;
|
|
528
|
+
maxSizeImageView;
|
|
529
|
+
imgExt;
|
|
869
530
|
constructor() {
|
|
870
|
-
|
|
871
|
-
__publicField(this, "files");
|
|
872
|
-
__publicField(this, "components");
|
|
873
|
-
__publicField(this, "translations");
|
|
874
|
-
__publicField(this, "options");
|
|
875
|
-
__publicField(this, "maxSizeImageView");
|
|
876
|
-
__publicField(this, "imgExt");
|
|
877
|
-
this.events = new PubSub();
|
|
878
|
-
this.components = {};
|
|
879
|
-
this.files = [];
|
|
880
|
-
this.translations = {};
|
|
881
|
-
this.options = {
|
|
531
|
+
this.events = new V(), this.components = {}, this.files = [], this.translations = {}, this.options = {
|
|
882
532
|
allowedFileTypes: [],
|
|
883
|
-
multiple:
|
|
533
|
+
multiple: !1,
|
|
884
534
|
uploadUrl: "",
|
|
885
535
|
dropzoneTheme: "lg"
|
|
886
|
-
};
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
if (fileItem.status === "uploaded") {
|
|
905
|
-
this.events.publish("fileUploaded", fileItem);
|
|
906
|
-
if (this.getFilesUploading().length === 0) {
|
|
907
|
-
this.events.publish("filesUploaded", fileItem);
|
|
908
|
-
}
|
|
909
|
-
}
|
|
910
|
-
}
|
|
911
|
-
}
|
|
912
|
-
deleteFileItem(fileItem) {
|
|
913
|
-
if (this.options.deleteUrl && fileItem.status === "uploaded") {
|
|
914
|
-
let request = new HttpRequestService(this).request("DELETE", this.options.deleteUrl.replace("{{filename}}", encodeURI(fileItem.name)));
|
|
915
|
-
request.setRequestHeader("accept", "application/json");
|
|
916
|
-
let data = new FormData();
|
|
917
|
-
data.append("filename", fileItem.name);
|
|
918
|
-
request.send(data);
|
|
919
|
-
request.addEventListener("load", () => {
|
|
920
|
-
if (request.status === 200) {
|
|
921
|
-
this.files = this.files.filter((item) => fileItem.id !== item.id);
|
|
922
|
-
fileItem.status = "deleted";
|
|
923
|
-
this.events.publish("fileDeleted", fileItem);
|
|
924
|
-
} else {
|
|
925
|
-
fileItem.status = "error";
|
|
926
|
-
this.events.publish("fileItemUpdate", fileItem);
|
|
927
|
-
}
|
|
536
|
+
}, this.maxSizeImageView = 2e6, this.imgExt = [".jpg", ".jpeg", ".png"];
|
|
537
|
+
}
|
|
538
|
+
addFileItem(e) {
|
|
539
|
+
!this.options.multiple && this.files.length && this.files.forEach((t) => {
|
|
540
|
+
this.deleteFileItem(t);
|
|
541
|
+
}), this.files.push(e), this.events.publish("fileAdded", e);
|
|
542
|
+
}
|
|
543
|
+
updateFileItem(e) {
|
|
544
|
+
const t = this.files.findIndex((s) => s.id === e.id);
|
|
545
|
+
t !== -1 && (this.files[t] = e, this.events.publish("fileItemUpdate", e), e.status === "uploaded" && (this.events.publish("fileUploaded", e), this.getFilesUploading().length === 0 && this.events.publish("filesUploaded", e)));
|
|
546
|
+
}
|
|
547
|
+
deleteFileItem(e) {
|
|
548
|
+
if (this.options.deleteUrl && e.status === "uploaded") {
|
|
549
|
+
let t = new C(this).request("DELETE", this.options.deleteUrl.replace("{{filename}}", encodeURI(e.name)));
|
|
550
|
+
t.setRequestHeader("accept", "application/json");
|
|
551
|
+
let s = new FormData();
|
|
552
|
+
s.append("filename", e.name), t.send(s), t.addEventListener("load", () => {
|
|
553
|
+
t.status === 200 ? (this.files = this.files.filter((i) => e.id !== i.id), e.status = "deleted", this.events.publish("fileDeleted", e)) : (e.status = "error", this.events.publish("fileItemUpdate", e));
|
|
928
554
|
});
|
|
929
|
-
} else
|
|
930
|
-
|
|
931
|
-
this.events.publish("fileDeleted", fileItem);
|
|
932
|
-
}
|
|
555
|
+
} else
|
|
556
|
+
e.status = "deleted", this.events.publish("fileDeleted", e);
|
|
933
557
|
}
|
|
934
558
|
getCategorizedFiles() {
|
|
935
559
|
return {
|
|
@@ -939,178 +563,162 @@ class AppStore {
|
|
|
939
563
|
};
|
|
940
564
|
}
|
|
941
565
|
getFilesDeleted() {
|
|
942
|
-
return this.files.filter((
|
|
566
|
+
return this.files.filter((e) => e.status === "deleted");
|
|
943
567
|
}
|
|
944
568
|
getFilesPreloaded() {
|
|
945
|
-
return this.files.filter((
|
|
569
|
+
return this.files.filter((e) => e.status === "preloaded");
|
|
946
570
|
}
|
|
947
571
|
getFilesUploaded() {
|
|
948
|
-
return this.files.filter((
|
|
572
|
+
return this.files.filter((e) => e.status === "uploaded");
|
|
949
573
|
}
|
|
950
574
|
getFilesWaiting() {
|
|
951
|
-
return this.files.filter((
|
|
575
|
+
return this.files.filter((e) => e.status === "waiting");
|
|
952
576
|
}
|
|
953
577
|
getFilesUploading() {
|
|
954
|
-
return this.files.filter((
|
|
578
|
+
return this.files.filter((e) => e.status === "uploading");
|
|
579
|
+
}
|
|
580
|
+
reorderFiles(e) {
|
|
581
|
+
const t = [];
|
|
582
|
+
e.forEach((s) => {
|
|
583
|
+
const i = this.files.find((l) => l.id === s);
|
|
584
|
+
i && t.push(i);
|
|
585
|
+
}), this.files.forEach((s) => {
|
|
586
|
+
e.includes(s.id) || t.push(s);
|
|
587
|
+
}), this.files = t, this.events.publish("filesReordered", this.files);
|
|
955
588
|
}
|
|
956
|
-
setComponent(
|
|
957
|
-
this.components[
|
|
589
|
+
setComponent(e, t) {
|
|
590
|
+
this.components[e] = t;
|
|
958
591
|
}
|
|
959
|
-
setTranslations(
|
|
960
|
-
this.translations =
|
|
592
|
+
setTranslations(e) {
|
|
593
|
+
this.translations = e;
|
|
961
594
|
}
|
|
962
|
-
setOptions(
|
|
963
|
-
this.options =
|
|
595
|
+
setOptions(e) {
|
|
596
|
+
this.options = e;
|
|
964
597
|
}
|
|
965
598
|
}
|
|
966
|
-
class
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
this.el =
|
|
970
|
-
}
|
|
971
|
-
parseOptions(
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
multiple: false,
|
|
599
|
+
class q {
|
|
600
|
+
el;
|
|
601
|
+
constructor(e) {
|
|
602
|
+
this.el = e;
|
|
603
|
+
}
|
|
604
|
+
parseOptions(e) {
|
|
605
|
+
let t = {
|
|
606
|
+
multiple: !1,
|
|
975
607
|
maxConcurrentUploads: 3,
|
|
976
608
|
maxFileSize: 5,
|
|
977
609
|
lang: "de",
|
|
978
610
|
uploadUrl: "",
|
|
979
611
|
deleteUrl: "",
|
|
980
612
|
allowedFileTypes: [".jpg", ".jpeg", ".png", ".pdf", ".zip", ".mp4"],
|
|
981
|
-
dropzoneTheme: "lg"
|
|
613
|
+
dropzoneTheme: "lg",
|
|
614
|
+
sortable: !1,
|
|
615
|
+
fileListTheme: "list"
|
|
982
616
|
};
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
}
|
|
999
|
-
const uploadUrl = (_e = this.el) == null ? void 0 : _e.getAttribute("data-upload-url");
|
|
1000
|
-
if (uploadUrl) {
|
|
1001
|
-
defaultOptions.uploadUrl = uploadUrl;
|
|
1002
|
-
}
|
|
1003
|
-
const deleteUrl = (_f = this.el) == null ? void 0 : _f.getAttribute("data-delete-url");
|
|
1004
|
-
if (deleteUrl) {
|
|
1005
|
-
defaultOptions.deleteUrl = deleteUrl;
|
|
1006
|
-
}
|
|
1007
|
-
const headers = (_g = this.el) == null ? void 0 : _g.getAttribute("data-headers");
|
|
1008
|
-
if (headers) {
|
|
1009
|
-
defaultOptions.headers = JSON.parse(headers);
|
|
1010
|
-
}
|
|
1011
|
-
const preloadedFiles = (_h = this.el) == null ? void 0 : _h.getAttribute("data-preloaded-files");
|
|
1012
|
-
if (preloadedFiles) {
|
|
617
|
+
v(e) && (t = { ...t, ...e }), t.multiple = this.el?.hasAttribute("multiple");
|
|
618
|
+
const s = this.el?.getAttribute("data-dropzone-theme");
|
|
619
|
+
s && (t.dropzoneTheme = s);
|
|
620
|
+
const i = this.el?.getAttribute("data-max-concurrent-uploads");
|
|
621
|
+
i && (t.maxConcurrentUploads = Number(i));
|
|
622
|
+
const l = this.el?.getAttribute("data-max-file-size");
|
|
623
|
+
l && (t.maxFileSize = Number(l));
|
|
624
|
+
const n = this.el?.getAttribute("data-upload-url");
|
|
625
|
+
n && (t.uploadUrl = n);
|
|
626
|
+
const a = this.el?.getAttribute("data-delete-url");
|
|
627
|
+
a && (t.deleteUrl = a);
|
|
628
|
+
const o = this.el?.getAttribute("data-headers");
|
|
629
|
+
o && (t.headers = JSON.parse(o));
|
|
630
|
+
const g = this.el?.getAttribute("data-preloaded-files");
|
|
631
|
+
if (g)
|
|
1013
632
|
try {
|
|
1014
|
-
const
|
|
1015
|
-
|
|
633
|
+
const E = atob(g);
|
|
634
|
+
t.preloadedFiles = JSON.parse(E);
|
|
1016
635
|
} catch {
|
|
1017
|
-
|
|
636
|
+
t.preloadedFiles = [];
|
|
1018
637
|
}
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
const chunkSize = (_l = this.el) == null ? void 0 : _l.getAttribute("data-chunk-size");
|
|
1033
|
-
if (chunkSize) {
|
|
1034
|
-
defaultOptions.chunkSize = Number(chunkSize);
|
|
1035
|
-
}
|
|
1036
|
-
return defaultOptions;
|
|
1037
|
-
}
|
|
1038
|
-
validateOptions(options) {
|
|
1039
|
-
if (!options.uploadUrl || options.uploadUrl.length === 0) {
|
|
638
|
+
const p = this.el?.getAttribute("data-lang");
|
|
639
|
+
p && (t.lang = p);
|
|
640
|
+
const m = this.el?.getAttribute("data-translations");
|
|
641
|
+
m && (t.translations = JSON.parse(m));
|
|
642
|
+
const h = this.el?.getAttribute("accept");
|
|
643
|
+
h && (t.allowedFileTypes = h.split(","));
|
|
644
|
+
const u = this.el?.getAttribute("data-chunk-size");
|
|
645
|
+
u && (t.chunkSize = Number(u)), this.el?.hasAttribute("data-sortable") && (t.sortable = this.el.getAttribute("data-sortable") !== "false");
|
|
646
|
+
const L = this.el?.getAttribute("data-file-list-theme");
|
|
647
|
+
return L && (t.fileListTheme = L), t;
|
|
648
|
+
}
|
|
649
|
+
validateOptions(e) {
|
|
650
|
+
if (!e.uploadUrl || e.uploadUrl.length === 0)
|
|
1040
651
|
throw new Error('Option "uploadUrl" not set');
|
|
1041
|
-
|
|
1042
|
-
if (!options.deleteUrl || options.deleteUrl.length === 0) {
|
|
652
|
+
if (!e.deleteUrl || e.deleteUrl.length === 0)
|
|
1043
653
|
throw new Error('Option "deleteUrl" not set');
|
|
1044
|
-
}
|
|
1045
654
|
}
|
|
1046
655
|
}
|
|
1047
|
-
class
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
"en": en
|
|
656
|
+
class I {
|
|
657
|
+
options;
|
|
658
|
+
el;
|
|
659
|
+
store;
|
|
660
|
+
/**
|
|
661
|
+
* Parsing global options, initializing global app store and setting translations
|
|
662
|
+
*
|
|
663
|
+
* @param el
|
|
664
|
+
* @param options
|
|
665
|
+
*/
|
|
666
|
+
constructor(e, t) {
|
|
667
|
+
if (!x(e))
|
|
668
|
+
throw new Error('Selected element is not type of "Element". Current type: ' + typeof e);
|
|
669
|
+
this.el = e;
|
|
670
|
+
const s = new q(e);
|
|
671
|
+
this.store = new O(), this.options = s.parseOptions(t), this.options && this.store.setOptions(this.options), s.validateOptions(this.options);
|
|
672
|
+
const i = {
|
|
673
|
+
de: k,
|
|
674
|
+
en: B
|
|
1067
675
|
};
|
|
1068
|
-
if (
|
|
676
|
+
if (v(window.huplyTranslations))
|
|
1069
677
|
this.store.setTranslations(window.huplyTranslations);
|
|
1070
|
-
|
|
1071
|
-
const
|
|
1072
|
-
|
|
1073
|
-
window.huplyTranslations = defaultTranslations[this.options.lang];
|
|
1074
|
-
this.store.setTranslations(defaultTranslations[this.options.lang]);
|
|
1075
|
-
} else {
|
|
1076
|
-
window.huplyTranslations = defaultTranslations["en"];
|
|
1077
|
-
this.store.setTranslations(defaultTranslations["en"]);
|
|
1078
|
-
}
|
|
678
|
+
else {
|
|
679
|
+
const l = document.querySelector("html")?.getAttribute("lang");
|
|
680
|
+
l === "en" || l === "de" ? (window.huplyTranslations = i[this.options.lang], this.store.setTranslations(i[this.options.lang])) : (window.huplyTranslations = i.en, this.store.setTranslations(i.en));
|
|
1079
681
|
}
|
|
1080
682
|
return this;
|
|
1081
683
|
}
|
|
684
|
+
/**
|
|
685
|
+
* Initialize function for Huply
|
|
686
|
+
*/
|
|
1082
687
|
init() {
|
|
1083
|
-
var _a, _b, _c;
|
|
1084
688
|
if (this.el) {
|
|
1085
|
-
const
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
this.options.preloadedFiles.forEach((fileItem) => {
|
|
1094
|
-
fileService.generateFileItemFromPreloaded(fileItem).then((newItem) => {
|
|
1095
|
-
this.store.addFileItem(newItem);
|
|
1096
|
-
newItem.status = "preloaded";
|
|
1097
|
-
this.store.updateFileItem(newItem);
|
|
689
|
+
const e = new P(this.el, this.store).render();
|
|
690
|
+
this.el?.parentNode && this.el.parentNode.replaceChild(e, this.el), this.el = e.querySelector(this.el.tagName);
|
|
691
|
+
}
|
|
692
|
+
if (this.options?.preloadedFiles?.length) {
|
|
693
|
+
const e = new c(this.store);
|
|
694
|
+
this.options.preloadedFiles.forEach((t) => {
|
|
695
|
+
e.generateFileItemFromPreloaded(t).then((s) => {
|
|
696
|
+
this.store.addFileItem(s), s.status = "preloaded", this.store.updateFileItem(s);
|
|
1098
697
|
});
|
|
1099
698
|
});
|
|
1100
699
|
}
|
|
1101
700
|
return this;
|
|
1102
701
|
}
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
702
|
+
/**
|
|
703
|
+
* Subscription handler for events
|
|
704
|
+
*
|
|
705
|
+
* @param eventName
|
|
706
|
+
* @param listener
|
|
707
|
+
*/
|
|
708
|
+
on(e, t) {
|
|
709
|
+
this.store.events.subscribe(e, t);
|
|
710
|
+
}
|
|
711
|
+
/**
|
|
712
|
+
* Adds a new file item to preloaded file list
|
|
713
|
+
* @param fileItem
|
|
714
|
+
*/
|
|
715
|
+
addFileItem(e) {
|
|
716
|
+
new c(this.store).generateFileItemFromPreloaded(e).then((s) => {
|
|
717
|
+
this.store.addFileItem(s), s.status = "preloaded", this.store.updateFileItem(s);
|
|
1112
718
|
});
|
|
1113
719
|
}
|
|
1114
720
|
}
|
|
1115
|
-
export {
|
|
721
|
+
export {
|
|
722
|
+
I as default
|
|
723
|
+
};
|
|
1116
724
|
//# sourceMappingURL=huply.es.js.map
|