-
-
Notifications
You must be signed in to change notification settings - Fork 53
/
progress-minimal.js
118 lines (98 loc) · 2.41 KB
/
progress-minimal.js
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
/*
Copyright © 2018 Andrew Powell, Matheus Gonçalves da Silva
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of this Source Code Form.
*/
const { addCss, addHtml } = require('./util');
const ns = 'wps-progress-minimal';
const html = `
<div id="${ns}" class="${ns}-hidden">
<div id="${ns}-bar"></div>
</div>
`;
const css = `
#${ns} {
position: fixed;
top: 0;
left: 0;
height: 4px;
width: 100vw;
z-index: 2147483645;
}
#${ns}-bar {
width: 0%;
height: 4px;
background-color: rgb(186, 223, 172);
}
@keyframes ${ns}-fade {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.${ns}-disappear {
animation: ${ns}-fade .3s;
animation-fill-mode: forwards;
animation-delay: .5s;
}
.${ns}-hidden {
display: none;
}
`;
let hideOnPageVisible = false;
const update = (percent) => {
const bar = document.querySelector(`#${ns}-bar`);
bar.style.width = `${percent}%`;
};
const reset = (wrapper) => {
wrapper.classList.add(`${ns}-disappear`);
};
const init = (options, socket) => {
if (options.firstInstance) {
document.addEventListener('DOMContentLoaded', () => {
addCss(css);
addHtml(html);
const wrapper = document.querySelector(`#${ns}`);
wrapper.addEventListener('animationend', () => {
update(0);
wrapper.classList.add(`${ns}-hidden`);
});
});
document.addEventListener('visibilitychange', () => {
if (!document.hidden && hideOnPageVisible) {
const wrapper = document.querySelector(`#${ns}`);
reset(wrapper);
hideOnPageVisible = false;
}
});
}
socket.addEventListener('message', (message) => {
const { action, data } = JSON.parse(message.data);
if (action !== 'progress') {
return;
}
const percent = Math.floor(data.percent * 100);
const wrapper = document.querySelector(`#${ns}`);
if (wrapper) {
wrapper.classList.remove(`${ns}-hidden`, `${ns}-disappear`);
}
if (data.percent === 1) {
if (document.hidden) {
hideOnPageVisible = true;
} else {
reset(wrapper);
}
} else {
hideOnPageVisible = false;
}
update(percent);
});
};
module.exports = {
init
};