Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #14962 from Snuffleupagus/sidebar-more-visibleView

Browse Source 
Improve the `PDFSidebar` implementation
This commit is contained in:
Tim van der Meij 2022-05-29 13:43:54 +02:00 committed by GitHub
commit a0eca3e34f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 47 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/app.js
View File

@ -1770,7 +1770,7 @@ const PDFViewerApplication = {
forceRendering() { forceRendering() {
this.pdfRenderingQueue.printing = !!this.printService; this.pdfRenderingQueue.printing = !!this.printService;
this.pdfRenderingQueue.isThumbnailViewEnabled = this.pdfRenderingQueue.isThumbnailViewEnabled =
this.pdfSidebar.isThumbnailViewVisible; this.pdfSidebar.visibleView === SidebarView.THUMBS;
this.pdfRenderingQueue.renderHighestPriority(); this.pdfRenderingQueue.renderHighestPriority();
}, },
@ -2266,7 +2266,7 @@ function webViewerPageRendered({ pageNumber, error }) {
} }
// Use the rendered page to set the corresponding thumbnail image. // Use the rendered page to set the corresponding thumbnail image.
if (PDFViewerApplication.pdfSidebar.isThumbnailViewVisible) { if (PDFViewerApplication.pdfSidebar.visibleView === SidebarView.THUMBS) {
const pageView = PDFViewerApplication.pdfViewer.getPageView( const pageView = PDFViewerApplication.pdfViewer.getPageView(
/* index = */ pageNumber - 1 /* index = */ pageNumber - 1
); );
@ -2343,21 +2343,19 @@ function webViewerPresentationModeChanged(evt) {
PDFViewerApplication.pdfViewer.presentationModeState = evt.state; PDFViewerApplication.pdfViewer.presentationModeState = evt.state;
} }
function webViewerSidebarViewChanged(evt) { function webViewerSidebarViewChanged({ view }) {
PDFViewerApplication.pdfRenderingQueue.isThumbnailViewEnabled = PDFViewerApplication.pdfRenderingQueue.isThumbnailViewEnabled =
PDFViewerApplication.pdfSidebar.isThumbnailViewVisible; view === SidebarView.THUMBS;
if (PDFViewerApplication.isInitialViewSet) { if (PDFViewerApplication.isInitialViewSet) {
// Only update the storage when the document has been loaded *and* rendered. // Only update the storage when the document has been loaded *and* rendered.
PDFViewerApplication.store?.set("sidebarView", evt.view).catch(() => { PDFViewerApplication.store?.set("sidebarView", view).catch(() => {
// Unable to write to storage. // Unable to write to storage.
}); });
} }
} }
function webViewerUpdateViewarea(evt) { function webViewerUpdateViewarea({ location }) {
const location = evt.location;
if (PDFViewerApplication.isInitialViewSet) { if (PDFViewerApplication.isInitialViewSet) {
// Only update the storage when the document has been loaded *and* rendered. // Only update the storage when the document has been loaded *and* rendered.
PDFViewerApplication.store PDFViewerApplication.store
@ -2592,7 +2590,7 @@ function webViewerPageChanging({ pageNumber, pageLabel }) {
PDFViewerApplication.toolbar.setPageNumber(pageNumber, pageLabel); PDFViewerApplication.toolbar.setPageNumber(pageNumber, pageLabel);
PDFViewerApplication.secondaryToolbar.setPageNumber(pageNumber); PDFViewerApplication.secondaryToolbar.setPageNumber(pageNumber);
if (PDFViewerApplication.pdfSidebar.isThumbnailViewVisible) { if (PDFViewerApplication.pdfSidebar.visibleView === SidebarView.THUMBS) {
PDFViewerApplication.pdfThumbnailViewer.scrollThumbnailIntoView(pageNumber); PDFViewerApplication.pdfThumbnailViewer.scrollThumbnailIntoView(pageNumber);
} }
} }

116
web/pdf_sidebar.js
View File

@ -68,6 +68,7 @@ class PDFSidebar {
this.isOpen = false; this.isOpen = false;
this.active = SidebarView.THUMBS; this.active = SidebarView.THUMBS;
this.isInitialViewSet = false; this.isInitialViewSet = false;
this.isInitialEventDispatched = false;
/** /**
* Callback used when the sidebar has been opened/closed, to ensure that * Callback used when the sidebar has been opened/closed, to ensure that
@ -98,13 +99,14 @@ class PDFSidebar {
this.eventBus = eventBus; this.eventBus = eventBus;
this.l10n = l10n; this.l10n = l10n;
this._addEventListeners(); this.#addEventListeners();
} }
reset() { reset() {
this.isInitialViewSet = false; this.isInitialViewSet = false;
this.isInitialEventDispatched = false;
this._hideUINotification(/* reset = */ true); this.#hideUINotification(/* reset = */ true);
this.switchView(SidebarView.THUMBS); this.switchView(SidebarView.THUMBS);
this.outlineButton.disabled = false; this.outlineButton.disabled = false;
@ -120,22 +122,6 @@ class PDFSidebar {
return this.isOpen ? this.active : SidebarView.NONE; return this.isOpen ? this.active : SidebarView.NONE;
} }
get isThumbnailViewVisible() {
return this.isOpen && this.active === SidebarView.THUMBS;
}
get isOutlineViewVisible() {
return this.isOpen && this.active === SidebarView.OUTLINE;
}
get isAttachmentsViewVisible() {
return this.isOpen && this.active === SidebarView.ATTACHMENTS;
}
get isLayersViewVisible() {
return this.isOpen && this.active === SidebarView.LAYERS;
}
/** /**
* @param {number} view - The sidebar view that should become visible, * @param {number} view - The sidebar view that should become visible,
* must be one of the values in {SidebarView}. * must be one of the values in {SidebarView}.
@ -149,13 +135,15 @@ class PDFSidebar {
// If the user has already manually opened the sidebar, immediately closing // If the user has already manually opened the sidebar, immediately closing
// it would be bad UX; also ignore the "unknown" sidebar view value. // it would be bad UX; also ignore the "unknown" sidebar view value.
if (view === SidebarView.NONE || view === SidebarView.UNKNOWN) { if (view === SidebarView.NONE || view === SidebarView.UNKNOWN) {
this._dispatchEvent(); this.#dispatchEvent();
return; return;
} }
// Prevent dispatching two back-to-back `sidebarviewchanged` events, this.switchView(view, /* forceOpen = */ true);
// since `this._switchView` dispatched the event if the view changed.
if (!this._switchView(view, /* forceOpen */ true)) { // Prevent dispatching two back-to-back "sidebarviewchanged" events,
this._dispatchEvent(); // since `this.switchView` dispatched the event if the view changed.
if (!this.isInitialEventDispatched) {
this.#dispatchEvent();
} }
} }
@ -166,14 +154,6 @@ class PDFSidebar {
* The default value is `false`. * The default value is `false`.
*/ */
switchView(view, forceOpen = false) { switchView(view, forceOpen = false) {
this._switchView(view, forceOpen);
}
/**
* @returns {boolean} Indicating if `this._dispatchEvent` was called.
* @private
*/
_switchView(view, forceOpen = false) {
const isViewChanged = view !== this.active; const isViewChanged = view !== this.active;
let shouldForceRendering = false; let shouldForceRendering = false;
@ -181,9 +161,8 @@ class PDFSidebar {
case SidebarView.NONE: case SidebarView.NONE:
if (this.isOpen) { if (this.isOpen) {
this.close(); this.close();
return true; // Closing will trigger rendering and dispatch the event.
} }
return false; return; // Closing will trigger rendering and dispatch the event.
case SidebarView.THUMBS: case SidebarView.THUMBS:
if (this.isOpen && isViewChanged) { if (this.isOpen && isViewChanged) {
shouldForceRendering = true; shouldForceRendering = true;
@ -191,22 +170,22 @@ class PDFSidebar {
break; break;
case SidebarView.OUTLINE: case SidebarView.OUTLINE:
if (this.outlineButton.disabled) { if (this.outlineButton.disabled) {
return false; return;
} }
break; break;
case SidebarView.ATTACHMENTS: case SidebarView.ATTACHMENTS:
if (this.attachmentsButton.disabled) { if (this.attachmentsButton.disabled) {
return false; return;
} }
break; break;
case SidebarView.LAYERS: case SidebarView.LAYERS:
if (this.layersButton.disabled) { if (this.layersButton.disabled) {
return false; return;
} }
break; break;
default: default:
console.error(`PDFSidebar._switchView: "${view}" is not a valid view.`); console.error(`PDFSidebar.switchView: "${view}" is not a valid view.`);
return false; return;
} }
// Update the active view *after* it has been validated above, // Update the active view *after* it has been validated above,
// in order to prevent setting it to an invalid state. // in order to prevent setting it to an invalid state.
@ -238,16 +217,15 @@ class PDFSidebar {
if (forceOpen && !this.isOpen) { if (forceOpen && !this.isOpen) {
this.open(); this.open();
return true; // Opening will trigger rendering and dispatch the event. return; // Opening will trigger rendering and dispatch the event.
} }
if (shouldForceRendering) { if (shouldForceRendering) {
this._updateThumbnailViewer(); this.#updateThumbnailViewer();
this._forceRendering(); this.#forceRendering();
} }
if (isViewChanged) { if (isViewChanged) {
this._dispatchEvent(); this.#dispatchEvent();
} }
return isViewChanged;
} }
open() { open() {
@ -261,12 +239,12 @@ class PDFSidebar {
this.outerContainer.classList.add("sidebarMoving", "sidebarOpen"); this.outerContainer.classList.add("sidebarMoving", "sidebarOpen");
if (this.active === SidebarView.THUMBS) { if (this.active === SidebarView.THUMBS) {
this._updateThumbnailViewer(); this.#updateThumbnailViewer();
} }
this._forceRendering(); this.#forceRendering();
this._dispatchEvent(); this.#dispatchEvent();
this._hideUINotification(); this.#hideUINotification();
} }
close() { close() {
@ -280,8 +258,8 @@ class PDFSidebar {
this.outerContainer.classList.add("sidebarMoving"); this.outerContainer.classList.add("sidebarMoving");
this.outerContainer.classList.remove("sidebarOpen"); this.outerContainer.classList.remove("sidebarOpen");
this._forceRendering(); this.#forceRendering();
this._dispatchEvent(); this.#dispatchEvent();
} }
toggle() { toggle() {
@ -292,20 +270,18 @@ class PDFSidebar {
} }
} }
/** #dispatchEvent() {
* @private if (this.isInitialViewSet && !this.isInitialEventDispatched) {
*/ this.isInitialEventDispatched = true;
_dispatchEvent() { }
this.eventBus.dispatch("sidebarviewchanged", { this.eventBus.dispatch("sidebarviewchanged", {
source: this, source: this,
view: this.visibleView, view: this.visibleView,
}); });
} }
/** #forceRendering() {
* @private
*/
_forceRendering() {
if (this.onToggled) { if (this.onToggled) {
this.onToggled(); this.onToggled();
} else { } else {
@ -315,10 +291,7 @@ class PDFSidebar {
} }
} }
/** #updateThumbnailViewer() {
* @private
*/
_updateThumbnailViewer() {
const { pdfViewer, pdfThumbnailViewer } = this; const { pdfViewer, pdfThumbnailViewer } = this;
// Use the rendered pages to set the corresponding thumbnail images. // Use the rendered pages to set the corresponding thumbnail images.
@ -333,10 +306,7 @@ class PDFSidebar {
pdfThumbnailViewer.scrollThumbnailIntoView(pdfViewer.currentPageNumber); pdfThumbnailViewer.scrollThumbnailIntoView(pdfViewer.currentPageNumber);
} }
/** #showUINotification() {
* @private
*/
_showUINotification() {
this.l10n.get("toggle_sidebar_notification2.title").then(msg => { this.l10n.get("toggle_sidebar_notification2.title").then(msg => {
this.toggleButton.title = msg; this.toggleButton.title = msg;
}); });
@ -348,10 +318,7 @@ class PDFSidebar {
} }
} }
/** #hideUINotification(reset = false) {
* @private
*/
_hideUINotification(reset = false) {
if (this.isOpen || reset) { if (this.isOpen || reset) {
// Only hide the notification on the `toggleButton` if the sidebar is // Only hide the notification on the `toggleButton` if the sidebar is
// currently open, or when the current PDF document is being closed. // currently open, or when the current PDF document is being closed.
@ -365,10 +332,7 @@ class PDFSidebar {
} }
} }
/** #addEventListeners() {
* @private
*/
_addEventListeners() {
this.sidebarContainer.addEventListener("transitionend", evt => { this.sidebarContainer.addEventListener("transitionend", evt => {
if (evt.target === this.sidebarContainer) { if (evt.target === this.sidebarContainer) {
this.outerContainer.classList.remove("sidebarMoving"); this.outerContainer.classList.remove("sidebarMoving");
@ -412,7 +376,7 @@ class PDFSidebar {
button.disabled = !count; button.disabled = !count;
if (count) { if (count) {
this._showUINotification(); this.#showUINotification();
} else if (this.active === view) { } else if (this.active === view) {
// If the `view` was opened by the user during document load, // If the `view` was opened by the user during document load,
// switch away from it if it turns out to be empty. // switch away from it if it turns out to be empty.
@ -447,9 +411,9 @@ class PDFSidebar {
this.eventBus._on("presentationmodechanged", evt => { this.eventBus._on("presentationmodechanged", evt => {
if ( if (
evt.state === PresentationModeState.NORMAL && evt.state === PresentationModeState.NORMAL &&
this.isThumbnailViewVisible this.visibleView === SidebarView.THUMBS
) { ) {
this._updateThumbnailViewer(); this.#updateThumbnailViewer();
} }
}); });
} }