feat: Preloader inital test
This commit is contained in:
154
templates/assets/js/loading-enhanced.js
Normal file
154
templates/assets/js/loading-enhanced.js
Normal file
@@ -0,0 +1,154 @@
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const loadingScreen = document.getElementById("loading-screen");
|
||||
|
||||
// Terminal simulation data
|
||||
const commands = [
|
||||
{ pre: '┌──(<span class="blue">nathan@NWTux</span>)-[<span class="white">~</span>]', message: "cd Git" },
|
||||
{ pre: '┌──(<span class="blue">nathan@NWTux</span>)-[<span class="white">~/Git</span>]', message: "cd Nathanwoodburn.github.io" },
|
||||
{ pre: '┌──(<span class="blue">nathan@NWTux</span>)-[<span class="white">~/Git/Nathanwoodburn.github.io</span>]', message: "python3 main.py" }
|
||||
];
|
||||
|
||||
const serverMessages = [
|
||||
"Starting server with 1 workers and 2 threads",
|
||||
"+0000] [1] [INFO] Starting gunicorn 22.0.0",
|
||||
"+0000] [1] [INFO] Listening at: http://0.0.0.0:5000 (1)",
|
||||
"+0000] [1] [INFO] Using worker: gthread",
|
||||
"+0000] [8] [INFO] Booting worker with pid: 8",
|
||||
"Preloading assets for faster navigation..."
|
||||
];
|
||||
|
||||
let currentCommand = 0;
|
||||
let assetsLoaded = false;
|
||||
let terminalComplete = false;
|
||||
|
||||
// Enhanced asset preloading function
|
||||
function preloadAssets() {
|
||||
const assets = [
|
||||
// Additional CSS files that might not be in preload
|
||||
'/assets/css/animate.min.min.css',
|
||||
'/assets/css/fixes.min.css',
|
||||
'/assets/css/Footer-Dark-icons.min.css',
|
||||
'/assets/css/GridSystem-1.min.css',
|
||||
// Font files
|
||||
'/assets/fonts/fa-solid-900.woff2',
|
||||
'/assets/fonts/fa-brands-400.woff2',
|
||||
'/assets/fonts/fa-regular-400.woff2'
|
||||
];
|
||||
|
||||
let loadedCount = 0;
|
||||
const totalAssets = assets.length;
|
||||
|
||||
function onAssetLoad() {
|
||||
loadedCount++;
|
||||
if (loadedCount === totalAssets) {
|
||||
assetsLoaded = true;
|
||||
checkReadyToRedirect();
|
||||
}
|
||||
}
|
||||
|
||||
// Load additional assets
|
||||
assets.forEach(assetUrl => {
|
||||
const link = document.createElement('link');
|
||||
link.rel = 'preload';
|
||||
link.as = assetUrl.endsWith('.css') ? 'style' :
|
||||
assetUrl.endsWith('.js') ? 'script' :
|
||||
assetUrl.includes('/fonts/') ? 'font' : 'fetch';
|
||||
if (link.as === 'font') {
|
||||
link.crossOrigin = 'anonymous';
|
||||
}
|
||||
link.href = assetUrl;
|
||||
link.onload = onAssetLoad;
|
||||
link.onerror = onAssetLoad; // Count errors as loaded to prevent hanging
|
||||
document.head.appendChild(link);
|
||||
});
|
||||
|
||||
// If no additional assets, mark as loaded
|
||||
if (totalAssets === 0) {
|
||||
assetsLoaded = true;
|
||||
checkReadyToRedirect();
|
||||
}
|
||||
}
|
||||
|
||||
function checkReadyToRedirect() {
|
||||
if (assetsLoaded && terminalComplete) {
|
||||
setTimeout(redirectToIndex, 200);
|
||||
}
|
||||
}
|
||||
|
||||
function getCurrentTime() {
|
||||
const now = new Date();
|
||||
return `${now.getUTCFullYear()}-${String(now.getUTCMonth() + 1).padStart(2, '0')}-${String(now.getUTCDate()).padStart(2, '0')} ${String(now.getUTCHours()).padStart(2, '0')}:${String(now.getUTCMinutes()).padStart(2, '0')}:${String(now.getUTCSeconds()).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function displayServerMessages(messages, callback) {
|
||||
const timestamp = getCurrentTime();
|
||||
|
||||
for (let i = 0; i < messages.length; i++) {
|
||||
const messageDiv = document.createElement("div");
|
||||
messageDiv.classList.add("loading-line");
|
||||
messageDiv.innerHTML = i !== 0 ? "[" + timestamp + "] " + messages[i] : messages[i];
|
||||
loadingScreen.appendChild(messageDiv);
|
||||
}
|
||||
|
||||
callback();
|
||||
}
|
||||
|
||||
function redirectToIndex() {
|
||||
if (window.location.pathname === "/") {
|
||||
window.location.reload();
|
||||
} else {
|
||||
window.location.href = "/";
|
||||
}
|
||||
}
|
||||
|
||||
// Event listeners for manual redirect
|
||||
window.addEventListener("keypress", redirectToIndex);
|
||||
|
||||
if (window.innerWidth < 768) {
|
||||
console.log("Screen width is less than 768px, allowing click to redirect");
|
||||
window.addEventListener("click", redirectToIndex);
|
||||
}
|
||||
|
||||
function typeCommand(command, callback) {
|
||||
const preDiv = document.createElement("div");
|
||||
preDiv.classList.add("loading-pre");
|
||||
preDiv.innerHTML = command.pre;
|
||||
loadingScreen.appendChild(preDiv);
|
||||
|
||||
const commandDiv = document.createElement("div");
|
||||
commandDiv.classList.add("loading-line");
|
||||
commandDiv.innerHTML = '└─<span class="blue">$</span> <span class="cursor"></span>';
|
||||
loadingScreen.appendChild(commandDiv);
|
||||
|
||||
let charIndex = 0;
|
||||
const typeInterval = setInterval(() => {
|
||||
commandDiv.removeChild(commandDiv.querySelector(".cursor"));
|
||||
commandDiv.innerHTML += command.message[charIndex] + '<span class="cursor"></span>';
|
||||
charIndex++;
|
||||
|
||||
if (charIndex === command.message.length) {
|
||||
commandDiv.removeChild(commandDiv.querySelector(".cursor"));
|
||||
clearInterval(typeInterval);
|
||||
callback();
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
|
||||
function runTerminalSimulation() {
|
||||
if (currentCommand < commands.length) {
|
||||
typeCommand(commands[currentCommand], () => {
|
||||
currentCommand++;
|
||||
setTimeout(runTerminalSimulation, 200);
|
||||
});
|
||||
} else {
|
||||
displayServerMessages(serverMessages, () => {
|
||||
terminalComplete = true;
|
||||
checkReadyToRedirect();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Start the loading process
|
||||
preloadAssets();
|
||||
runTerminalSimulation();
|
||||
});
|
||||
1
templates/assets/js/loading-enhanced.min.js
vendored
Normal file
1
templates/assets/js/loading-enhanced.min.js
vendored
Normal file
@@ -0,0 +1 @@
|
||||
document.addEventListener("DOMContentLoaded",(function(){const e=document.getElementById("loading-screen"),t=[{pre:'┌──(<span class="blue">nathan@NWTux</span>)-[<span class="white">~</span>]',message:"cd Git"},{pre:'┌──(<span class="blue">nathan@NWTux</span>)-[<span class="white">~/Git</span>]',message:"cd Nathanwoodburn.github.io"},{pre:'┌──(<span class="blue">nathan@NWTux</span>)-[<span class="white">~/Git/Nathanwoodburn.github.io</span>]',message:"python3 main.py"}],n=["Starting server with 1 workers and 2 threads","+0000] [1] [INFO] Starting gunicorn 22.0.0","+0000] [1] [INFO] Listening at: http://0.0.0.0:5000 (1)","+0000] [1] [INFO] Using worker: gthread","+0000] [8] [INFO] Booting worker with pid: 8","Preloading assets for faster navigation..."];let a=0,s=!1,o=!1;function r(){s&&o&&setTimeout(c,200)}function l(){const t=["/assets/css/animate.min.min.css","/assets/css/fixes.min.css","/assets/css/Footer-Dark-icons.min.css","/assets/css/GridSystem-1.min.css","/assets/fonts/fa-solid-900.woff2","/assets/fonts/fa-brands-400.woff2","/assets/fonts/fa-regular-400.woff2"];let n=0;const a=t.length;function s(){n++,n===a&&(s=!0,r())}t.forEach((t=>{const n=document.createElement("link");n.rel="preload",n.as=t.endsWith(".css")?"style":t.endsWith(".js")?"script":t.includes("/fonts/")?"font":"fetch","font"===n.as&&(n.crossOrigin="anonymous"),n.href=t,n.onload=s,n.onerror=s,document.head.appendChild(n)})),0===a&&(s=!0,r())}function i(){const t=new Date;return`${t.getUTCFullYear()}-${String(t.getUTCMonth()+1).padStart(2,"0")}-${String(t.getUTCDate()).padStart(2,"0")} ${String(t.getUTCHours()).padStart(2,"0")}:${String(t.getUTCMinutes()).padStart(2,"0")}:${String(t.getUTCSeconds()).padStart(2,"0")}`}function d(t,n){const a=i();for(let n=0;n<t.length;n++){const s=document.createElement("div");s.classList.add("loading-line"),s.innerHTML=0!==n?"["+a+"] "+t[n]:t[n],e.appendChild(s)}n()}function c(){"/"===window.location.pathname?window.location.reload():window.location.href="/"}function u(t,n){const a=document.createElement("div");a.classList.add("loading-pre"),a.innerHTML=t.pre,e.appendChild(a);const s=document.createElement("div");s.classList.add("loading-line"),s.innerHTML='└─<span class="blue">$</span> <span class="cursor"></span>',e.appendChild(s);let o=0;const r=setInterval((()=>{s.removeChild(s.querySelector(".cursor")),s.innerHTML+=t.message[o]+'<span class="cursor"></span>',o++,o===t.message.length&&(s.removeChild(s.querySelector(".cursor")),clearInterval(r),n())}),50)}function g(){a<t.length?u(t[a],(()=>{a++,setTimeout(g,200)})):d(n,(()=>{o=!0,r()}))}window.addEventListener("keypress",c),window.innerWidth<768&&(console.log("Screen width is less than 768px, allowing click to redirect"),window.addEventListener("click",c)),l(),g()}));
|
||||
Reference in New Issue
Block a user