class LoadingManager {
|
constructor() {
|
this.quips = {
|
logo: [
|
"Fetching items...",
|
],
|
uploading: [
|
"Sending to server..."
|
],
|
... JSON.parse(loadingQuips.quips),
|
};
|
|
this.isLoading = false;
|
this.overlay = document.querySelector('.loading-overlay');
|
if (!this.overlay) {
|
return;
|
}
|
this.overlayMessage = this.overlay.querySelector('.message');
|
this.overlayTitle = this.overlay.querySelector('h3');
|
this.overlayIcon = this.overlay.querySelector('div.icon');
|
this.quipInterval = null;
|
this.activeLoads = 0;
|
this.currentQuips = this.defaultQuips;
|
}
|
|
showLoading(message = '', title = 'Loading', customQuips = null) {
|
this.isLoading = true;
|
this.activeLoads++;
|
this.overlayTitle.textContent = title;
|
|
// Set custom or default quips
|
this.currentQuips = customQuips || this.defaultQuips;
|
|
if (message) {
|
this.overlayMessage.textContent = message;
|
}
|
this.overlay.classList.add('active');
|
document.body.classList.add('loading');
|
document.body.style.overflow = 'hidden';
|
this.startQuipCycle();
|
}
|
|
hideLoading() {
|
this.activeLoads--;
|
if (this.activeLoads <= 0) {
|
this.activeLoads = 0;
|
this.overlay.classList.remove('active');
|
document.body.style.overflow = '';
|
document.body.classList.remove('loading');
|
this.stopQuipCycle();
|
}
|
this.isLoading = false;
|
// if(window.formManager.pendingChanges){
|
// window.formManager.handleFormChange();
|
// }
|
}
|
|
setContent(content) {
|
console.log(content);
|
let keys = Object.keys(this.quips);
|
content = keys.map((c) => {
|
return (keys.includes(content)) ? content : false;
|
}).filter(Boolean);
|
content = (content.length === 0) ? ['logo'] : content;
|
this.currentContent = content;
|
}
|
|
startQuipCycle() {
|
if (this.quipInterval) {
|
clearInterval(this.quipInterval);
|
}
|
|
let quips = {};
|
this.currentContent.forEach(content => {
|
this.quips[content].forEach((c) => {
|
quips[c] = content;
|
});
|
});
|
let keys = this.shuffleArray(Object.keys(quips));
|
|
let currentIndex = 0;
|
// Set initial message
|
this.overlayMessage.textContent = keys[0];
|
this.overlayMessage.classList.remove('changing');
|
let content = '';
|
let lastContent = '';
|
this.quipInterval = setInterval(() => {
|
this.overlayMessage.classList.add('changing');
|
|
setTimeout(() => {
|
currentIndex = (currentIndex + 1) % keys.length;
|
|
content = quips[keys[currentIndex]];
|
if (content !== lastContent) {
|
window.removeChildren(this.overlayIcon);
|
this.overlayIcon.append(window.getIcon(content));
|
}
|
window.typeText(this.overlayMessage, keys[currentIndex]);
|
this.overlayMessage.classList.remove('changing');
|
lastContent = content;
|
}, 300);
|
}, 2000);
|
}
|
|
stopQuipCycle() {
|
if (this.quipInterval) {
|
clearInterval(this.quipInterval);
|
this.quipInterval = null;
|
}
|
}
|
|
shuffleArray(array) {
|
for (let i = array.length - 1; i > 0; i--) {
|
const j = Math.floor(Math.random() * (i + 1));
|
[array[i], array[j]] = [array[j], array[i]];
|
}
|
return array;
|
}
|
|
startAutosaving() {
|
document.body.classList.add('autosaving');
|
}
|
|
stopAutosaving(message = 'Saved!') {
|
document.body.classList.remove('autosaving');
|
// Show the save popup
|
const popup = document.querySelector('.save-popup');
|
popup.classList.add('show');
|
if(message !== 'Saved!'){
|
popup.innerText = message;
|
}
|
|
setTimeout(() => {
|
popup.classList.remove('show');
|
}, 1500);
|
}
|
showError(message) {
|
// Update overlay to show error state
|
this.overlayTitle.textContent = 'Error';
|
this.overlayMessage.textContent = message;
|
this.overlay.classList.add('active', 'error');
|
document.body.style.overflow = 'hidden';
|
|
// Auto-hide after delay
|
setTimeout(() => {
|
this.overlay.classList.remove('active', 'error');
|
document.body.style.overflow = '';
|
}, 3000);
|
}
|
}
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
window.jvbLoading = new LoadingManager();
|
});
|
