Skip to content

Commit 1522495

Browse files
rootroot
root
authored and
root
committed
update(other): 🧩 udpate loading screen for image loading
update loading screen: image loading and progress bar
1 parent 7638a1f commit 1522495

19 files changed

+1016
-630
lines changed

‎.prettierignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Ignore all HTML files:
2+
*.html

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -317,7 +317,8 @@ I handled for you executing **protect()** in this project, so you just only focu
317317
* successPath: string
318318
* }
319319
*/
320-
if(!certInfo || !certInfo.email) return import.meta.env.ROUTER_LOGIN_PATH
320+
const userInfo = certInfo?.user
321+
if(!userInfo || !userInfo.email) return import.meta.env.ROUTER_LOGIN_PATH
321322
return true
322323
}
323324
}

‎config/templates/index.development.image-loading.html

+348
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,348 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
7+
<title>
8+
<%= htmlWebpackPlugin.options.title %>
9+
</title>
10+
<% if(env==='development' ) { %>
11+
<script src="<%= require('@/config/libs/socket.io.min.js') %>"></script>
12+
<script>
13+
globalThis.__VUE_OPTIONS_API__ = <%= __VUE_OPTIONS_API__ || true %>;
14+
globalThis.__VUE_PROD_DEVTOOLS__ = <%= __VUE_PROD_DEVTOOLS__ || false %>;
15+
</script>
16+
<% } %>
17+
<% if(env==='development') { %>
18+
<style>
19+
/* Pacman style region */
20+
.compilation-loading-screen {
21+
position: fixed;
22+
top: 0;
23+
height: 100vh;
24+
width: 100vw;
25+
display: flex;
26+
align-items: center;
27+
justify-content: center;
28+
background: #ffffff;
29+
opacity: 1;
30+
z-index: 1000;
31+
}
32+
33+
.compilation-loading-screen.--is-hidden {
34+
opacity: 0;
35+
transition: opacity 0.3s ease;
36+
}
37+
38+
.compilation-loading-screen.--is-none {
39+
display: none;
40+
}
41+
42+
.compilation-loading-screen__inner {
43+
width: 280px;
44+
}
45+
46+
.compilation-loading-screen__image-outer {
47+
position: relative;
48+
max-width: 320px;
49+
height: 180px;
50+
left: 50%;
51+
transform: translateX(-50%);
52+
}
53+
54+
.compilation-loading-screen__image {
55+
position: absolute;
56+
max-width: 100%;
57+
max-height: 100%;
58+
margin-bottom: 24px;
59+
transition-property: opacity;
60+
transition-timing-function: ease;
61+
left: 50%;
62+
bottom: 0;
63+
transform: translateX(-50%);
64+
}
65+
66+
.compilation-loading-screen__image.--is-none {
67+
transition: none;
68+
display: none;
69+
}
70+
71+
.compilation-loading-screen__image.--is-hidden {
72+
opacity: 0;
73+
transition-duration: 0.2s;
74+
}
75+
76+
.compilation-loading-screen__image.--is-show {
77+
opacity: 1;
78+
transition-duration: 0.2s;
79+
}
80+
81+
@media screen and (min-width: 580px) {
82+
.compilation-loading-screen__image-outer {
83+
max-width: 480px;
84+
height: 320px;
85+
}
86+
.compilation-loading-screen__image {
87+
max-width: 480px;
88+
}
89+
}
90+
91+
/* Progress Bar style region */
92+
.compilation-loading-screen__progress-wrapper {
93+
background: #fff3cc;
94+
border: solid 1px #fff3cc;
95+
border-radius: 10px;
96+
height: 20px;
97+
/* overflow: hidden; */
98+
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05) inset;
99+
margin-top: 24px;
100+
}
101+
102+
.compilation-loading-screen__progress-bar {
103+
background: #fed75a;
104+
height: inherit;
105+
}
106+
107+
.compilation-loading-screen__progress-bar--width {
108+
border-radius: 10px;
109+
}
110+
111+
.compilation-loading-screen__progress-bar--transition {
112+
transition: width 0.1s ease-out;
113+
}
114+
115+
.compilation-loading-screen__progress-bar--anim {
116+
position: relative;
117+
animation: progress 3s linear infinite;
118+
/* Don't touch this anim bar color*/
119+
background: linear-gradient(
120+
-45deg,
121+
rgba(255, 255, 255, 0.25) 25%,
122+
transparent 25%,
123+
transparent 50%,
124+
rgba(255, 255, 255, 0.25) 50%,
125+
rgba(255, 255, 255, 0.25) 75%,
126+
transparent 75%,
127+
transparent
128+
);
129+
/* Don't touch this */
130+
background-repeat: repeat-x;
131+
/* The size of the bars must match the background-position in the @keyframes */
132+
background-size: 1.5em 1.5em;
133+
border-radius: 10px;
134+
height: inherit;
135+
width: 100%;
136+
}
137+
138+
.compilation-loading-screen__progress-bar--milestones {
139+
position: absolute;
140+
right: -25px;
141+
top: calc(100% + 4px);
142+
}
143+
144+
@keyframes progress {
145+
to {
146+
background-position: 1.5em 0;
147+
}
148+
}
149+
/* End Progress Bar style region */
150+
</style>
151+
<% } %>
152+
</head>
153+
154+
<body>
155+
<div id="root"></div>
156+
<% if(env==='development' ) { %>
157+
<div id="compilation-loading__screen" class="compilation-loading-screen">
158+
<div class="compilation-loading-screen__inner">
159+
<div class="compilation-loading-screen__image-outer">
160+
<img class="compilation-loading-screen__image --is-show" src="/images/development/png/kunfu_panda/01.png" alt="loading screen" />
161+
<img class="compilation-loading-screen__image --is-hidden" src="/images/development/png/kunfu_panda/02.png" alt="loading screen" />
162+
<img class="compilation-loading-screen__image --is-hidden" src="/images/development/png/kunfu_panda/03.png" alt="loading screen" />
163+
<img class="compilation-loading-screen__image --is-hidden" src="/images/development/png/kunfu_panda/04.png" alt="loading screen" />
164+
<img class="compilation-loading-screen__image --is-hidden" src="/images/development/png/kunfu_panda/05.png" alt="loading screen" />
165+
</div>
166+
<!-- .compilation-loading-screen__image-outer -->
167+
168+
<div class="compilation-loading-screen__progress-wrapper">
169+
<div class="compilation-loading-screen__progress-bar compilation-loading-screen__progress-bar--width"
170+
style="width: 0">
171+
<div class="compilation-loading-screen__progress-bar--anim">
172+
<div class="compilation-loading-screen__progress-bar--milestones">
173+
<img width="50" style="max-width: none" src="/images/development/webp/kungfu-panda.webp" alt="">
174+
</div>
175+
</div>
176+
</div>
177+
</div>
178+
<!-- .progress-wrapper -->
179+
</div>
180+
<!-- .compilation-loading-screen__inner -->
181+
</div>
182+
<% } %>
183+
<% if(env==='development' ) { %>
184+
<script>
185+
let isFirstCompiling = true
186+
187+
const _setupLoadingScreenImage = () => {
188+
const elLoadingScreenImage = document.getElementsByClassName("compilation-loading-screen__image")
189+
190+
if(!elLoadingScreenImage || !elLoadingScreenImage.length) return () => {}
191+
192+
let timeout = null
193+
let curIndex = 0
194+
195+
function handler(isRecursive=false) {
196+
if(isFirstCompiling) {
197+
const prevIndex = curIndex
198+
curIndex = curIndex < elLoadingScreenImage.length - 1 ? curIndex + 1 : 0
199+
if(!timeout) {
200+
timeout = setTimeout(function() {
201+
elLoadingScreenImage[curIndex].classList.remove('--is-hidden')
202+
elLoadingScreenImage[curIndex].classList.add('--is-show')
203+
204+
elLoadingScreenImage[prevIndex].classList.remove('--is-show')
205+
elLoadingScreenImage[prevIndex].classList.add('--is-hidden')
206+
207+
clearTimeout(timeout)
208+
timeout = null
209+
210+
setTimeout(function() {
211+
handler(true)
212+
}, 200)
213+
}, 1300)
214+
}
215+
} else if(isRecursive) {
216+
for(const idx in elLoadingScreenImage) {
217+
if(idx === curIndex) {
218+
elLoadingScreenImage[idx].classList.remove('--is-show')
219+
} else if(elLoadingScreenImage[idx].classList) {
220+
elLoadingScreenImage[idx].classList.add('--is-none')
221+
elLoadingScreenImage[idx].classList.remove('--is-hidden')
222+
}
223+
}
224+
} else {
225+
const prevIndex = curIndex
226+
curIndex = curIndex < elLoadingScreenImage.length - 1 ? curIndex + 1 : 0
227+
228+
elLoadingScreenImage[curIndex].classList.remove('--is-none')
229+
elLoadingScreenImage[prevIndex].classList.add('--is-none')
230+
}
231+
}
232+
233+
return handler
234+
} // _setupLoadingScreenImage
235+
236+
;(function () {
237+
if (!window.io) return;
238+
239+
const handleLoadingScreen = _setupLoadingScreenImage()
240+
handleLoadingScreen()
241+
242+
const IO_HOST = <%= ioHost || "localhost:3030" %>;
243+
const socket = io(IO_HOST, {
244+
transports: ["websocket"],
245+
// forceNew: true,
246+
multiplex: false,
247+
upgrade: false,
248+
});
249+
250+
socket.on('connect', function () {
251+
const elRoot = document.getElementById('root');
252+
const elLoadingScreen = document.getElementById("compilation-loading__screen");
253+
const elProgressBarWidth = elLoadingScreen?.querySelector?.(".compilation-loading-screen__progress-bar--width") ?? null;
254+
if (elRoot && elLoadingScreen && elProgressBarWidth) {
255+
// NOTE - newestPercentage will keep new percentage of new progress
256+
let newestPercentage = 0;
257+
// NOTE - curPercentage will keep first percentage of first progress of each new change
258+
let curPercentage = 0;
259+
260+
socket.on("updateProgressPercentage", function (percentage) {
261+
newestPercentage = percentage < 100 ? percentage : 99.9;
262+
if (newestPercentage === 0 || newestPercentage <= curPercentage || elLoadingScreen.classList.contains('--is-hidden')) return
263+
curPercentage = newestPercentage
264+
elProgressBarWidth.style.width = curPercentage + '%'
265+
});
266+
267+
// (function () {
268+
// if (curPercentage > 0) return
269+
// curPercentage = 100;
270+
// elProgressBarWidth.style.width = '100%'
271+
// })()
272+
273+
setTimeout(function () {
274+
elProgressBarWidth.classList.add('compilation-loading-screen__progress-bar--transition')
275+
})
276+
// NOTE - Notice for server that ioClient socket has ready
277+
const intervalWatchingAppReady = setInterval(function () {
278+
if (!elRoot.innerHTML) return;
279+
280+
if(isFirstCompiling) isFirstCompiling = false
281+
282+
curPercentage = 100;
283+
elProgressBarWidth.style.width = curPercentage + '%'
284+
elLoadingScreen.classList.add("--is-hidden");
285+
286+
setTimeout(function () {
287+
elLoadingScreen.classList.add("--is-none");
288+
}, 350);
289+
290+
clearInterval(intervalWatchingAppReady);
291+
});
292+
293+
// NOTE - Listening socket from server
294+
socket.on("turnOnLoadingScreen", function () {
295+
/*console.log('newestPercentage', newestPercentage)
296+
console.log('curPercentage', curPercentage)
297+
console.log('--is-hidden', elLoadingScreen.classList.contains('--is-hidden'))
298+
console.log('--is-none', elLoadingScreen.
299+
classList.contains('--is-none'))*/
300+
if (curPercentage < 100 || !elLoadingScreen.classList.contains('--is-hidden') || (elLoadingScreen.classList.contains('--is-hidden') && !elLoadingScreen.classList.contains('--is-none'))) return
301+
handleLoadingScreen()
302+
curPercentage = 0;
303+
elProgressBarWidth.style.width = curPercentage;
304+
//curPercentage = newestPercentage;
305+
// console.log(curPercentage)
306+
307+
elProgressBarWidth.classList.add('compilation-loading-screen__progress-bar--transition')
308+
309+
if (curPercentage === 0) {
310+
curPercentage = 50;
311+
elProgressBarWidth.style.width = curPercentage;
312+
}
313+
314+
/*setTimeout(function() {
315+
elProgressBarWidth.classList.add('compilation-loading-screen__progress-bar--transition')
316+
317+
if(curPercentage === 0) {
318+
curPercentage = 50;
319+
elProgressBarWidth.style.width = curPercentage;
320+
}
321+
})*/
322+
elLoadingScreen.classList.remove("--is-hidden", "--is-none");
323+
});
324+
325+
socket.on("turnOffLoadingScreen", function () {
326+
// NOTE - System compiling maybe have multiple done event, so we will compare newestPercentage and curPercentage, if equality then that even is realy ending
327+
if (newestPercentage < curPercentage || curPercentage < 99.9) return
328+
curPercentage = 100;
329+
elProgressBarWidth.style.width = curPercentage + '%'
330+
elLoadingScreen.classList.add("--is-hidden");
331+
elProgressBarWidth.classList.remove('compilation-loading-screen__progress-bar--transition')
332+
333+
setTimeout(function () {
334+
elLoadingScreen.classList.add("--is-none");
335+
}, 350);
336+
});
337+
}
338+
})
339+
340+
socket.on('disconnect', function () {
341+
socket.close()
342+
})
343+
})()
344+
</script>
345+
<% } %>
346+
</body>
347+
348+
</html>

0 commit comments

Comments
 (0)