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
|
const progress_width = 100;
const progress_radius = 20;
const progress_len = progress_radius * 2 * Math.PI;
const PREVIEW_TEMPLATE = `
<div class="eternal-progress-wrapper">
<div class="eternal-progress-bg"></div>
<svg class="eternal-progress-svg">
<circle class="eternal-progress-path"
cx="${progress_width / 2}"
cy="${progress_width / 2}"
r="${progress_radius}"
fill="none"
stroke-width="5"
stroke-miterlimit="10" />
</svg>
<pre class="eternal-progress-status"></pre>
</div>
`
const REMOTE_LOAD_TEMPLATE = `
<form method='POST' autocomplete="off">
<input class="eternal-url-input" type="text" placeholder="Remote image">
<span class="eternal-url-span"></span>
</form>
`.trim();
function append_template_for_file (node, file, fileno) {
const imageurl = URL.createObjectURL(file);
node.insertAdjacentHTML('beforeend', PREVIEW_TEMPLATE);
let newnode = node.lastChild.previousSibling;
console.log(newnode);
let style = newnode.querySelector('.eternal-progress-bg').style;
style.background = 'url(' + imageurl + ')';
style.backgroundSize = 'cover';
style.backgroundPosition = 'center';
style.backgroundRepeat = 'no-repeat';
newnode.setAttribute('id', 'progress-files-' + fileno.toString());
return newnode;
}
class EternalLoad {
constructor (node) {
this.root = document.createElement('div');
this.root.setAttribute('id', 'eternal-root');
this.local = {};
this.remote = {};
}
attach (target) {
if (this.local.btn)
this.root.appendChild(this.local.btn);
target.appendChild(this.root);
return this;
}
use_local (url) {
this.local.btn = document.createElement('button');
this.local.btn.setAttribute('class', 'btn');
this.local.btn.textContent = 'local file';
this.local.total = 0;
this.local.processed = 0;
this.local.page_hard_lock = 1;
this.local.btn.addEventListener('click', (e) => {
let input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.multiple = true;
input.addEventListener('change', (input_event) => {
Array.prototype.forEach.call(input_event.target.files, file => {
let data = new FormData();
data.append('im', file);
data.append('content-type', file.type)
let fileno = this.local.total;
this.local.total += 1;
let wrapper = append_template_for_file (this.root, file, fileno);
let progress = wrapper.querySelector('.eternal-progress-path');
let status = wrapper.querySelector('.eternal-progress-status');
let req = new XMLHttpRequest();
req.addEventListener('load', (e) => {
let bg = wrapper.querySelector('.eternal-progress-bg');
bg.style.filter = 'none';
progress.style.stroke = '#0000';
this.local.processed += 1;
if (this.local.processed == this.local.total && !this.local.page_hard_lock)
location.reload();
});
req.upload.addEventListener('progress', (e) => {
let complete = 0;
if (e.lengthComputable)
complete = e.loaded / e.total;
status.innerHTML = `${(e.loaded / 1000000).toFixed(2)}/${(e.total / 1000000).toFixed(2)}M`;
progress.style.strokeDasharray = `${(complete * Math.PI * 2 * progress_radius)},${progress_len}`;
});
req.open('POST', url);
req.send(data);
});
this.local.page_hard_lock = 0;
});
input.click();
});
return this;
}
use_remote (url) {
return this;
}
}
export default EternalLoad;
|
