1
0
Fork 0
mirror of https://github.com/mozilla/pdf.js.git synced 2025-04-19 06:38:07 +02:00

[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.
This commit is contained in:
Jonas Jenwald 2022-05-14 13:10:13 +02:00
parent b5f2bd8bfd
commit 1f3da032b4
4 changed files with 32 additions and 25 deletions

View file

@ -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;
}

View file

@ -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 +
" " +