alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-21 21:22:11 -03:00
Code Issues Packages Projects Releases Wiki Activity

feat: add dynamic loading overlay creation with accessibility

Browse Source 
Add fallback DOM element creation in LoadingManager constructor to handle cases where loading overlay elements don't exist in the DOM. This ensures the loading functionality works even when the required HTML elements are missing.

- Create loading overlay, content container, progress bar, and status text elements dynamically
- Add ARIA attributes to progress bar for accessibility
- Move details container insertion to use the created loadingContent reference
- Maintain existing functionality while adding robustness for missing DOM elements
This commit is contained in:
Will Miao
2025-10-26 10:52:24 +08:00
parent 188fe407b6
commit 7892df21ec
1 changed files with 36 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
static/js/managers/LoadingManager.js
View File

@@ -5,8 +5,40 @@ import { formatFileSize } from '../utils/formatters.js';
export class LoadingManager {
constructor() {
this.overlay = document.getElementById('loading-overlay');
this.progressBar = this.overlay.querySelector('.progress-bar');
this.statusText = this.overlay.querySelector('.loading-status');
if (!this.overlay) {
this.overlay = document.createElement('div');
this.overlay.id = 'loading-overlay';
this.overlay.style.display = 'none';
document.body.appendChild(this.overlay);
}
this.loadingContent = this.overlay.querySelector('.loading-content');
if (!this.loadingContent) {
this.loadingContent = document.createElement('div');
this.loadingContent.className = 'loading-content';
this.overlay.appendChild(this.loadingContent);
}
this.progressBar = this.loadingContent.querySelector('.progress-bar');
if (!this.progressBar) {
this.progressBar = document.createElement('div');
this.progressBar.className = 'progress-bar';
this.progressBar.setAttribute('role', 'progressbar');
this.progressBar.setAttribute('aria-valuemin', '0');
this.progressBar.setAttribute('aria-valuemax', '100');
this.progressBar.setAttribute('aria-valuenow', '0');
this.progressBar.style.width = '0%';
this.loadingContent.appendChild(this.progressBar);
}
this.statusText = this.loadingContent.querySelector('.loading-status');
if (!this.statusText) {
this.statusText = document.createElement('div');
this.statusText.className = 'loading-status';
this.loadingContent.appendChild(this.statusText);
}
this.detailsContainer = null; // Will be created when needed
}
@@ -51,9 +83,8 @@ export class LoadingManager {
this.detailsContainer.className = 'progress-details-container';
// Insert after the main progress bar
const loadingContent = this.overlay.querySelector('.loading-content');
if (loadingContent) {
loadingContent.appendChild(this.detailsContainer);
if (this.loadingContent) {
this.loadingContent.appendChild(this.detailsContainer);
}
return this.detailsContainer;