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

Toggle the visibility of the outlineOptionsContainer, in the sidebar, using only CSS

Browse Source 
Now that `:has()` is available we no longer need to use JavaScript to toggle the visibility of this DOM element.
This commit is contained in:
Jonas Jenwald 2023-12-19 10:01:16 +01:00
parent 52ffd26da9
commit 82464294b9
4 changed files with 9 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/pdf_sidebar.js
View File

@ -59,8 +59,6 @@ const UI_NOTIFICATION_CLASS = "pdfSidebarNotification";
* the attachments are placed. * the attachments are placed.
* @property {HTMLDivElement} layersView - The container in which * @property {HTMLDivElement} layersView - The container in which
* the layers are placed. * the layers are placed.
* @property {HTMLDivElement} outlineOptionsContainer - The container in which
* the outline view-specific option button(s) are placed.
* @property {HTMLButtonElement} currentOutlineItemButton - The button used to * @property {HTMLButtonElement} currentOutlineItemButton - The button used to
* find the current outline item. * find the current outline item.
*/ */
@ -107,7 +105,6 @@ class PDFSidebar {
this.attachmentsView = elements.attachmentsView; this.attachmentsView = elements.attachmentsView;
this.layersView = elements.layersView; this.layersView = elements.layersView;
this._outlineOptionsContainer = elements.outlineOptionsContainer;
this._currentOutlineItemButton = elements.currentOutlineItemButton; this._currentOutlineItemButton = elements.currentOutlineItemButton;
this.eventBus = eventBus; this.eventBus = eventBus;
@ -227,12 +224,6 @@ class PDFSidebar {
this.layersView this.layersView
); );
// Finally, update view-specific CSS classes.
this._outlineOptionsContainer.classList.toggle(
"hidden",
view !== SidebarView.OUTLINE
);
if (forceOpen && !this.isOpen) { if (forceOpen && !this.isOpen) {
this.open(); this.open();
return; // Opening will trigger rendering and dispatch the event. return; // Opening will trigger rendering and dispatch the event.

8
web/viewer.css
View File

@ -1301,6 +1301,14 @@ a:focus > .thumbnail > .thumbnailImage,
color: var(--treeitem-hover-color); color: var(--treeitem-hover-color);
} }
#outlineOptionsContainer {
display: none;
#sidebarContainer:has(#outlineView:not(.hidden)) & {
display: inherit;
}
}
.dialogButton { .dialogButton {
width: auto; width: auto;
margin: 3px 4px 2px !important; margin: 3px 4px 2px !important;

2
web/viewer.html
View File

@ -113,7 +113,7 @@ See https://github.com/adobe-type-tools/cmap-resources
</div> </div>
<div id="toolbarSidebarRight"> <div id="toolbarSidebarRight">
<div id="outlineOptionsContainer" class="hidden"> <div id="outlineOptionsContainer">
<div class="verticalToolbarSeparator"></div> <div class="verticalToolbarSeparator"></div>
<button id="currentOutlineItem" class="toolbarButton" disabled="disabled" title="Find Current Outline Item" tabindex="6" data-l10n-id="pdfjs-current-outline-item-button"> <button id="currentOutlineItem" class="toolbarButton" disabled="disabled" title="Find Current Outline Item" tabindex="6" data-l10n-id="pdfjs-current-outline-item-button">

3
web/viewer.js
View File

@ -115,9 +115,6 @@ function getViewerConfiguration() {
attachmentsView: document.getElementById("attachmentsView"), attachmentsView: document.getElementById("attachmentsView"),
layersView: document.getElementById("layersView"), layersView: document.getElementById("layersView"),
// View-specific options // View-specific options
outlineOptionsContainer: document.getElementById(
"outlineOptionsContainer"
),
currentOutlineItemButton: document.getElementById("currentOutlineItem"), currentOutlineItemButton: document.getElementById("currentOutlineItem"),
}, },
findBar: { findBar: {