From 1f3da032b4e61dc766676f1cff6feb2a57148905 Mon Sep 17 00:00:00 2001 From: Jonas Jenwald Date: Sat, 14 May 2022 13:10:13 +0200 Subject: [PATCH] [api-minor] Modernize and simplify the `ProgressBar` class The original `ProgressBar`-functionality is very old, and could thus do with some general clean-up. In particular, while it currently accepts various options those have never really been used in either the default viewer or in any examples. The sort of "styling" that these options provided are *much better*, not to mention simpler, done directly with CSS rules. As part of these changes, the "progress" is now updated using CSS variables rather than by directly modifying the `style` of DOM elements. This should hopefully simplify future changes to this code, see e.g. PR 14898. Finally, this also fixes a couple of other small things in the "mobile viewer" example. --- examples/mobile-viewer/viewer.css | 8 ++++++-- examples/mobile-viewer/viewer.js | 8 +++++--- web/ui_utils.js | 33 +++++++++++++++---------------- web/viewer.css | 8 +++++--- 4 files changed, 32 insertions(+), 25 deletions(-) diff --git a/examples/mobile-viewer/viewer.css b/examples/mobile-viewer/viewer.css index e1f0f2f0c85ab..c46c87a3fd834 100644 --- a/examples/mobile-viewer/viewer.css +++ b/examples/mobile-viewer/viewer.css @@ -13,6 +13,10 @@ * limitations under the License. */ +:root { + --progressBar-percent: 0%; +} + * { padding: 0; margin: 0; @@ -191,13 +195,12 @@ canvas { height: 0.6rem; background-color: rgba(51, 51, 51, 1); border-bottom: 1px solid rgba(51, 51, 51, 1); - margin-top: 5rem; } #loadingBar .progress { position: absolute; left: 0; - width: 0; + width: var(--progressBar-percent); height: 100%; background-color: rgba(221, 221, 221, 1); overflow: hidden; @@ -217,6 +220,7 @@ canvas { } #loadingBar .progress.indeterminate { + width: 100%; background-color: rgba(153, 153, 153, 1); transition: none; } diff --git a/examples/mobile-viewer/viewer.js b/examples/mobile-viewer/viewer.js index 18b28688c8cc4..7ee86fe0ec58e 100644 --- a/examples/mobile-viewer/viewer.js +++ b/examples/mobile-viewer/viewer.js @@ -82,7 +82,9 @@ const PDFViewerApplication = { self.pdfDocument = pdfDocument; self.pdfViewer.setDocument(pdfDocument); self.pdfLinkService.setDocument(pdfDocument); - self.pdfHistory.initialize({ fingerprint: pdfDocument.fingerprint }); + self.pdfHistory.initialize({ + fingerprint: pdfDocument.fingerprints[0], + }); self.loadingBar.hide(); self.setTitleUsingMetadata(pdfDocument); @@ -159,7 +161,7 @@ const PDFViewerApplication = { }, get loadingBar() { - const bar = new pdfjsViewer.ProgressBar("#loadingBar", {}); + const bar = new pdfjsViewer.ProgressBar("#loadingBar"); return pdfjsLib.shadow(this, "loadingBar", bar); }, @@ -187,7 +189,7 @@ const PDFViewerApplication = { // Provides some basic debug information console.log( "PDF " + - pdfDocument.fingerprint + + pdfDocument.fingerprints[0] + " [" + info.PDFFormatVersion + " " + diff --git a/web/ui_utils.js b/web/ui_utils.js index 0e362b3da13db..948f6b55289de 100644 --- a/web/ui_utils.js +++ b/web/ui_utils.js @@ -23,8 +23,6 @@ const MAX_AUTO_SCALE = 1.25; const SCROLLBAR_PADDING = 40; const VERTICAL_PADDING = 5; -const LOADINGBAR_END_OFFSET_VAR = "--loadingBar-end-offset"; - const RenderingStates = { INITIAL: 0, RUNNING: 1, @@ -684,7 +682,16 @@ function clamp(v, min, max) { } class ProgressBar { - constructor(id, { height, width, units } = {}) { + constructor(id) { + if ( + (typeof PDFJSDev === "undefined" || PDFJSDev.test("GENERIC")) && + arguments.length > 1 + ) { + throw new Error( + "ProgressBar no longer accepts any additional options, " + + "please use CSS rules to modify its appearance instead." + ); + } this.visible = true; // Fetch the sub-elements for later. @@ -692,26 +699,18 @@ class ProgressBar { // Get the loading bar element, so it can be resized to fit the viewer. this.bar = this.div.parentNode; - // Get options, with sensible defaults. - this.height = height || 100; - this.width = width || 100; - this.units = units || "%"; - - // Initialize heights. - this.div.style.height = this.height + this.units; this.percent = 0; } - _updateBar() { + #updateBar() { if (this._indeterminate) { this.div.classList.add("indeterminate"); - this.div.style.width = this.width + this.units; return; } - this.div.classList.remove("indeterminate"); - const progressSize = (this.width * this._percent) / 100; - this.div.style.width = progressSize + this.units; + + const doc = document.documentElement; + doc.style.setProperty("--progressBar-percent", `${this._percent}%`); } get percent() { @@ -721,7 +720,7 @@ class ProgressBar { set percent(val) { this._indeterminate = isNaN(val); this._percent = clamp(val, 0, 100); - this._updateBar(); + this.#updateBar(); } setWidth(viewer) { @@ -732,7 +731,7 @@ class ProgressBar { const scrollbarWidth = container.offsetWidth - viewer.offsetWidth; if (scrollbarWidth > 0) { const doc = document.documentElement; - doc.style.setProperty(LOADINGBAR_END_OFFSET_VAR, `${scrollbarWidth}px`); + doc.style.setProperty("--progressBar-end-offset", `${scrollbarWidth}px`); } } diff --git a/web/viewer.css b/web/viewer.css index 5ba13bd93fed0..612886994e696 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -22,7 +22,6 @@ --sidebar-transition-timing-function: ease; --scale-select-container-width: 140px; --scale-select-overflow: 22px; - --loadingBar-end-offset: 0; --toolbar-icon-opacity: 0.7; --doorhanger-icon-opacity: 0.9; @@ -32,6 +31,8 @@ /*#if !MOZCENTRAL*/ --errorWrapper-bg-color: rgba(255, 110, 110, 1); /*#endif*/ + --progressBar-percent: 0%; + --progressBar-end-offset: 0; --progressBar-color: rgba(10, 132, 255, 1); --progressBar-indeterminate-bg-color: rgba(221, 221, 222, 1); --progressBar-indeterminate-blend-color: rgba(116, 177, 239, 1); @@ -344,7 +345,7 @@ select { #loadingBar { position: absolute; - inset-inline: 0 var(--loadingBar-end-offset); + inset-inline: 0 var(--progressBar-end-offset); height: 4px; background-color: var(--body-bg-color); border-bottom: 1px solid var(--toolbar-border-color); @@ -361,7 +362,7 @@ select { position: absolute; top: 0; left: 0; - width: 0%; + width: var(--progressBar-percent); height: 100%; background-color: var(--progressBar-color); overflow: hidden; @@ -378,6 +379,7 @@ select { } #loadingBar .progress.indeterminate { + width: 100%; background-color: var(--progressBar-indeterminate-bg-color); transition: none; }