From e0b70ba0c636c9b877dd2596229b033962e32723 Mon Sep 17 00:00:00 2001 From: awsr <43862868+awsr@users.noreply.github.com> Date: Thu, 1 Jan 2026 12:02:45 -0800 Subject: [PATCH] Simplify and lint --- javascript/_simpleProgressBar.js | 64 ++++++++++++++------------------ javascript/gallery.js | 20 +++++----- 2 files changed, 39 insertions(+), 45 deletions(-) diff --git a/javascript/_simpleProgressBar.js b/javascript/_simpleProgressBar.js index 75cbfe49c..b900573cb 100644 --- a/javascript/_simpleProgressBar.js +++ b/javascript/_simpleProgressBar.js @@ -1,8 +1,8 @@ class SimpleProgressBar { - #container = document.createElement("div"); - #progress = document.createElement("div"); - #textDiv = document.createElement("div"); - #text = document.createElement("span"); + #container = document.createElement('div'); + #progress = document.createElement('div'); + #textDiv = document.createElement('div'); + #text = document.createElement('span'); #visible = false; #hideTimeout = null; #interval = null; @@ -10,46 +10,44 @@ class SimpleProgressBar { /** @type {Set} */ #monitoredSet; - constructor() { - this.#container.style.cssText = "position:relative;width:100%;background-color:hsla(0,0%,36%,0.3);height:1.2rem;margin:0;padding:0;display:none;" - this.#progress.style.cssText = "position:absolute;left:0;height:100%;width:0;transition:width 200ms;" - this.#progress.style.backgroundColor = "hsla(110, 32%, 35%, 0.80)"; // alt: "#27911d" - this.#textDiv.style.cssText = "margin:auto;width:max-content;height:100%;"; - this.#text.style.cssText = "position:relative;user-select:none;color:white;" + constructor(monitoredSet) { + this.#monitoredSet = monitoredSet; // This is required because incrementing a variable with a class method turned out to not be an atomic operation + this.#container.style.cssText = 'position:relative;width:100%;background-color:hsla(0,0%,36%,0.3);height:1.2rem;margin:0;padding:0;display:none;' + this.#progress.style.cssText = 'position:absolute;left:0;height:100%;width:0;transition:width 200ms;' + this.#progress.style.backgroundColor = 'hsla(110, 32%, 35%, 0.80)'; // alt: '#27911d' + this.#textDiv.style.cssText = 'position:relative;margin:auto;width:max-content;height:100%;'; + this.#text.style.cssText = 'user-select:none;color:white;' this.#textDiv.append(this.#text); this.#container.append(this.#progress, this.#textDiv); } - setMax(max) { - this.clearProgress(); - this.#max = max; - this.#startUpdating(); + start(total) { + this.clear(); + this.#max = total; + this.#interval = setInterval(() => { + this.#update(this.#monitoredSet.size, this.#max); + }, 250); } - attach(element) { + attachTo(element) { if (element.hasChildNodes) { element.innerHTML = ''; } element.appendChild(this.#container); } - monitor(hashes) { - // This is required because incrementing a variable with a class method turned out to not be an atomic operation - this.#monitoredSet = hashes; - } - - clearProgress() { - this.#stopUpdating(); + clear() { + this.#stop(); clearTimeout(this.#hideTimeout); this.#hideTimeout = null; - this.#container.style.display = "none"; + this.#container.style.display = 'none'; this.#visible = false; - this.#progress.style.width = "0"; - this.#text.textContent = ""; + this.#progress.style.width = '0'; + this.#text.textContent = ''; } - #setProgress(loaded, max) { + #update(loaded, max) { if (this.#hideTimeout) { this.#hideTimeout = null; } @@ -58,24 +56,18 @@ class SimpleProgressBar { this.#text.textContent = `${loaded}/${max}`; if (!this.#visible) { - this.#container.style.display = "block"; + this.#container.style.display = 'block'; this.#visible = true; } if (loaded >= max) { - this.#stopUpdating() + this.#stop() this.#hideTimeout = setTimeout(() => { - this.clearProgress(); + this.clear(); }, 1000); } } - #startUpdating() { - this.#interval = setInterval(() => { - this.#setProgress(this.#monitoredSet.size, this.#max); - }, 250); - } - - #stopUpdating() { + #stop() { clearInterval(this.#interval); this.#interval = null; } diff --git a/javascript/gallery.js b/javascript/gallery.js index 7bfaaa4a6..585d4ac27 100644 --- a/javascript/gallery.js +++ b/javascript/gallery.js @@ -13,13 +13,12 @@ const fileStylesheet = new CSSStyleSheet(); const iconStopwatch = String.fromCodePoint(9201); // Store separator states for the session const separatorStates = new Map(); -const galleryProgressBar = new SimpleProgressBar(); +const galleryProgressBar = new SimpleProgressBar(galleryHashes); const el = { folders: undefined, files: undefined, search: undefined, status: undefined, - progress: undefined, btnSend: undefined, }; @@ -863,7 +862,7 @@ async function fetchFilesHT(evt, controller) { const t1 = performance.now(); log(`gallery: folder=${evt.target.name} num=${numFiles} time=${Math.floor(t1 - t0)}ms`); updateStatusWithSort(['Folder', evt.target.name], ['Images', numFiles.toLocaleString()], `${iconStopwatch} ${Math.floor(t1 - t0).toLocaleString()}ms`); - galleryProgressBar.setMax(numFiles); + galleryProgressBar.start(numFiles); addSeparators(); thumbCacheCleanup(evt.target.name, numFiles, controller); } @@ -874,7 +873,7 @@ async function fetchFilesWS(evt) { // fetch file-by-file list over websockets maintenanceController.abort('Gallery update'); // Abort previous controller maintenanceController = controller; // Point to new controller for next time galleryHashes.clear(); // Must happen AFTER the AbortController steps - galleryProgressBar.clearProgress(); + galleryProgressBar.clear(); el.files.innerHTML = ''; updateGalleryStyles(); @@ -924,7 +923,7 @@ async function fetchFilesWS(evt) { // fetch file-by-file list over websockets // gallerySort(); log(`gallery: folder=${evt.target.name} num=${numFiles} time=${Math.floor(t1 - t0)}ms`); updateStatusWithSort(['Folder', evt.target.name], ['Images', numFiles.toLocaleString()], `${iconStopwatch} ${Math.floor(t1 - t0).toLocaleString()}ms`); - galleryProgressBar.setMax(numFiles); + galleryProgressBar.start(numFiles); addSeparators(); thumbCacheCleanup(evt.target.name, numFiles, controller); }; @@ -990,16 +989,19 @@ async function initGallery() { // triggered on gradio change to monitor when ui el.files = gradioApp().getElementById('tab-gallery-files'); el.status = gradioApp().getElementById('tab-gallery-status'); el.search = gradioApp().querySelector('#tab-gallery-search textarea'); - el.progress = gradioApp().getElementById('tab-gallery-progress'); - if (!el.folders || !el.files || !el.status || !el.search || el.progress) { + if (!el.folders || !el.files || !el.status || !el.search) { error('initGallery', 'Missing gallery elements'); return; } updateGalleryStyles(); injectGalleryStatusCSS(); setOverlayAnimation(); - galleryProgressBar.attachTo(el.progress); - galleryProgressBar.monitor(galleryHashes); + const progress = gradioApp().getElementById('tab-gallery-progress'); + if (progress) { + galleryProgressBar.attachTo(progress); + } else { + log('initGallery', 'Failed to attach loading progress bar'); + } el.search.addEventListener('input', gallerySearch); el.btnSend = gradioApp().getElementById('tab-gallery-send-image'); document.getElementById('tab-gallery-files').style.height = opts.logmonitor_show ? '75vh' : '85vh';