ZenBrowserMirrors/pdf.js
1
0
Fork 0
mirror of https://github.com/zen-browser/pdf.js.git synced 2025-07-08 01:10:08 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

[api-minor] Add support for toggling of Optional Content in the viewer (issue 12096)

Browse source 
*Besides, obviously, adding viewer support:* This patch attempts to improve the general API for Optional Content Groups slightly, by adding a couple of new methods for interacting with the (more complex) data structures of `OptionalContentConfig`-instances. (Thus allowing us to mark some of the data as "private", given that it probably shouldn't be manipulated directly.)

By utilizing not just the "raw" Optional Content Groups, but the data from the `/Order` array when available, we can thus display the Layers in a proper tree-structure with collapsible headings for PDF documents that utilizes that feature.

Note that it's possible to reset all Optional Content Groups to their default visibility state, simply by double-clicking on the Layers-button in the sidebar.
(Currently that's indicated in the Layers-button tooltip, which is obviously easy to overlook, however it's probably the best we can do for now without adding more buttons, or even a dropdown-toolbar, to the sidebar.)

Also, the current Layers-button icons are a little rough around the edges, quite literally, but given that the viewer will soon have its UI modernized anyway they hopefully suffice in the meantime.

To give users *full* control of the visibility of the various Optional Content Groups, even those which according to the `/Order` array should not (by default) be toggleable in the UI, this patch will place those under a *custom* heading which:
 - Is collapsed by default, and placed at the bottom of the Layers-tree, to be a bit less obtrusive.
 - Uses a slightly different formatting, compared to the "regular" headings.
 - Is localizable.

Finally, note that the thumbnails are *purposely* always rendered with all Optional Content Groups at their default visibility state, since that seems the most useful and it's also consistent with other viewers.
To ensure that this works as intended, we'll thus disable the `PDFThumbnailView.setImage` functionality when the Optional Content Groups have been changed in the viewer. (This obviously means that we'll re-render thumbnails instead of using the rendered pages. However, this situation ought to be rare enough for this to not really be a problem.)
This commit is contained in:
Jonas Jenwald 2020-08-06 21:01:03 +02:00
parent 2393443e73
commit 66aabe3ec7
17 changed files with 485 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

39
web/pdf_sidebar.js
View file

@ -52,12 +52,16 @@ const SidebarView = {
* the outline view.
* @property {HTMLButtonElement} attachmentsButton - The button used to show
* the attachments view.
* @property {HTMLButtonElement} layersButton - The button used to show
* the layers view.
* @property {HTMLDivElement} thumbnailView - The container in which
* the thumbnails are placed.
* @property {HTMLDivElement} outlineView - The container in which
* the outline is placed.
* @property {HTMLDivElement} attachmentsView - The container in which
* the attachments are placed.
* @property {HTMLDivElement} layersView - The container in which
* the layers are placed.
*/
class PDFSidebar {
@ -92,10 +96,12 @@ class PDFSidebar {
this.thumbnailButton = elements.thumbnailButton;
this.outlineButton = elements.outlineButton;
this.attachmentsButton = elements.attachmentsButton;
this.layersButton = elements.layersButton;
this.thumbnailView = elements.thumbnailView;
this.outlineView = elements.outlineView;
this.attachmentsView = elements.attachmentsView;
this.layersView = elements.layersView;
this.eventBus = eventBus;
this.l10n = l10n;
@ -112,6 +118,7 @@ class PDFSidebar {
this.outlineButton.disabled = false;
this.attachmentsButton.disabled = false;
this.layersButton.disabled = false;
}
/**
@ -133,6 +140,10 @@ class PDFSidebar {
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,
* must be one of the values in {SidebarView}.
@ -196,6 +207,11 @@ class PDFSidebar {
return false;
}
break;
case SidebarView.LAYERS:
if (this.layersButton.disabled) {
return false;
}
break;
default:
console.error(`PDFSidebar._switchView: "${view}" is not a valid view.`);
return false;
@ -217,6 +233,7 @@ class PDFSidebar {
"toggled",
view === SidebarView.ATTACHMENTS
);
this.layersButton.classList.toggle("toggled", view === SidebarView.LAYERS);
// ... and for all views.
this.thumbnailView.classList.toggle("hidden", view !== SidebarView.THUMBS);
this.outlineView.classList.toggle("hidden", view !== SidebarView.OUTLINE);
@ -224,6 +241,7 @@ class PDFSidebar {
"hidden",
view !== SidebarView.ATTACHMENTS
);
this.layersView.classList.toggle("hidden", view !== SidebarView.LAYERS);
if (forceOpen && !this.isOpen) {
this.open();
@ -331,9 +349,9 @@ class PDFSidebar {
this.l10n
.get(
"toggle_sidebar_notification.title",
"toggle_sidebar_notification2.title",
null,
"Toggle Sidebar (document contains outline/attachments)"
"Toggle Sidebar (document contains outline/attachments/layers)"
)
.then(msg => {
this.toggleButton.title = msg;
@ -356,6 +374,9 @@ class PDFSidebar {
case SidebarView.ATTACHMENTS:
this.attachmentsButton.classList.add(UI_NOTIFICATION_CLASS);
break;
case SidebarView.LAYERS:
this.layersButton.classList.add(UI_NOTIFICATION_CLASS);
break;
}
}
@ -375,6 +396,9 @@ class PDFSidebar {
case SidebarView.ATTACHMENTS:
this.attachmentsButton.classList.remove(UI_NOTIFICATION_CLASS);
break;
case SidebarView.LAYERS:
this.layersButton.classList.remove(UI_NOTIFICATION_CLASS);
break;
}
};
@ -429,6 +453,13 @@ class PDFSidebar {
this.switchView(SidebarView.ATTACHMENTS);
});
this.layersButton.addEventListener("click", () => {
this.switchView(SidebarView.LAYERS);
});
this.layersButton.addEventListener("dblclick", () => {
this.eventBus.dispatch("resetlayers", { source: this });
});
// Disable/enable views.
const onTreeLoaded = (count, button, view) => {
button.disabled = !count;
@ -454,6 +485,10 @@ class PDFSidebar {
);
});
this.eventBus._on("layersloaded", evt => {
onTreeLoaded(evt.layersCount, this.layersButton, SidebarView.LAYERS);
});
// Update the thumbnailViewer, if visible, when exiting presentation mode.
this.eventBus._on("presentationmodechanged", evt => {
if (!evt.active && !evt.switchInProgress && this.isThumbnailViewVisible) {