pdf.js/web/pdf_sidebar.js
Jonas Jenwald de36b2aaba Enable auto-formatting of the entire code-base using Prettier (issue 11444)
Note that Prettier, purposely, has only limited [configuration options](https://prettier.io/docs/en/options.html). The configuration file is based on [the one in `mozilla central`](https://searchfox.org/mozilla-central/source/.prettierrc) with just a few additions (to avoid future breakage if the defaults ever changes).

Prettier is being used for a couple of reasons:

 - To be consistent with `mozilla-central`, where Prettier is already in use across the tree.

 - To ensure a *consistent* coding style everywhere, which is automatically enforced during linting (since Prettier is used as an ESLint plugin). This thus ends "all" formatting disussions once and for all, removing the need for review comments on most stylistic matters.

Many ESLint options are now redundant, and I've tried my best to remove all the now unnecessary options (but I may have missed some).
Note also that since Prettier considers the `printWidth` option as a guide, rather than a hard rule, this patch resorts to a small hack in the ESLint config to ensure that *comments* won't become too long.

*Please note:* This patch is generated automatically, by appending the `--fix` argument to the ESLint call used in the `gulp lint` task. It will thus require some additional clean-up, which will be done in a *separate* commit.

(On a more personal note, I'll readily admit that some of the changes Prettier makes are *extremely* ugly. However, in the name of consistency we'll probably have to live with that.)
2019-12-26 12:34:24 +01:00

484 lines
14 KiB
JavaScript

/* Copyright 2016 Mozilla Foundation
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { NullL10n } from "./ui_utils";
import { RenderingStates } from "./pdf_rendering_queue";
const UI_NOTIFICATION_CLASS = "pdfSidebarNotification";
const SidebarView = {
UNKNOWN: -1,
NONE: 0,
THUMBS: 1, // Default value.
OUTLINE: 2,
ATTACHMENTS: 3,
LAYERS: 4,
};
/**
* @typedef {Object} PDFSidebarOptions
* @property {PDFSidebarElements} elements - The DOM elements.
* @property {PDFViewer} pdfViewer - The document viewer.
* @property {PDFThumbnailViewer} pdfThumbnailViewer - The thumbnail viewer.
* @property {EventBus} eventBus - The application event bus.
* @property {IL10n} l10n - The localization service.
* @property {boolean} [disableNotification] - Disable the notification for
* documents containing outline/attachments. The default value is `false`.
*/
/**
* @typedef {Object} PDFSidebarElements
* @property {HTMLDivElement} outerContainer - The outer container
* (encasing both the viewer and sidebar elements).
* @property {HTMLDivElement} viewerContainer - The viewer container
* (in which the viewer element is placed).
* @property {HTMLButtonElement} toggleButton - The button used for
* opening/closing the sidebar.
* @property {HTMLButtonElement} thumbnailButton - The button used to show
* the thumbnail view.
* @property {HTMLButtonElement} outlineButton - The button used to show
* the outline view.
* @property {HTMLButtonElement} attachmentsButton - The button used to show
* the attachments 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.
*/
class PDFSidebar {
/**
* @param {PDFSidebarOptions} options
*/
constructor({
elements,
pdfViewer,
pdfThumbnailViewer,
eventBus,
l10n = NullL10n,
disableNotification = false,
}) {
this.isOpen = false;
this.active = SidebarView.THUMBS;
this.isInitialViewSet = false;
/**
* Callback used when the sidebar has been opened/closed, to ensure that
* the viewers (PDFViewer/PDFThumbnailViewer) are updated correctly.
*/
this.onToggled = null;
this.pdfViewer = pdfViewer;
this.pdfThumbnailViewer = pdfThumbnailViewer;
this.outerContainer = elements.outerContainer;
this.viewerContainer = elements.viewerContainer;
this.toggleButton = elements.toggleButton;
this.thumbnailButton = elements.thumbnailButton;
this.outlineButton = elements.outlineButton;
this.attachmentsButton = elements.attachmentsButton;
this.thumbnailView = elements.thumbnailView;
this.outlineView = elements.outlineView;
this.attachmentsView = elements.attachmentsView;
this.eventBus = eventBus;
this.l10n = l10n;
this._disableNotification = disableNotification;
this._addEventListeners();
}
reset() {
this.isInitialViewSet = false;
this._hideUINotification(null);
this.switchView(SidebarView.THUMBS);
this.outlineButton.disabled = false;
this.attachmentsButton.disabled = false;
}
/**
* @type {number} One of the values in {SidebarView}.
*/
get visibleView() {
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;
}
/**
* @param {number} view - The sidebar view that should become visible,
* must be one of the values in {SidebarView}.
*/
setInitialView(view = SidebarView.NONE) {
if (this.isInitialViewSet) {
return;
}
this.isInitialViewSet = true;
// If the user has already manually opened the sidebar, immediately closing
// it would be bad UX; also ignore the "unknown" sidebar view value.
if (view === SidebarView.NONE || view === SidebarView.UNKNOWN) {
this._dispatchEvent();
return;
}
// Prevent dispatching two back-to-back `sidebarviewchanged` events,
// since `this._switchView` dispatched the event if the view changed.
if (!this._switchView(view, /* forceOpen */ true)) {
this._dispatchEvent();
}
}
/**
* @param {number} view - The sidebar view that should be switched to,
* must be one of the values in {SidebarView}.
* @param {boolean} [forceOpen] - Ensure that the sidebar is open.
* The default value is `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;
let shouldForceRendering = false;
switch (view) {
case SidebarView.NONE:
if (this.isOpen) {
this.close();
return true; // Closing will trigger rendering and dispatch the event.
}
return false;
case SidebarView.THUMBS:
if (this.isOpen && isViewChanged) {
shouldForceRendering = true;
}
break;
case SidebarView.OUTLINE:
if (this.outlineButton.disabled) {
return false;
}
break;
case SidebarView.ATTACHMENTS:
if (this.attachmentsButton.disabled) {
return false;
}
break;
default:
console.error(`PDFSidebar._switchView: "${view}" is not a valid view.`);
return false;
}
// Update the active view *after* it has been validated above,
// in order to prevent setting it to an invalid state.
this.active = view;
// Update the CSS classes, for all buttons...
this.thumbnailButton.classList.toggle(
"toggled",
view === SidebarView.THUMBS
);
this.outlineButton.classList.toggle(
"toggled",
view === SidebarView.OUTLINE
);
this.attachmentsButton.classList.toggle(
"toggled",
view === SidebarView.ATTACHMENTS
);
// ... and for all views.
this.thumbnailView.classList.toggle("hidden", view !== SidebarView.THUMBS);
this.outlineView.classList.toggle("hidden", view !== SidebarView.OUTLINE);
this.attachmentsView.classList.toggle(
"hidden",
view !== SidebarView.ATTACHMENTS
);
if (forceOpen && !this.isOpen) {
this.open();
return true; // Opening will trigger rendering and dispatch the event.
}
if (shouldForceRendering) {
this._updateThumbnailViewer();
this._forceRendering();
}
if (isViewChanged) {
this._dispatchEvent();
}
this._hideUINotification(this.active);
return isViewChanged;
}
open() {
if (this.isOpen) {
return;
}
this.isOpen = true;
this.toggleButton.classList.add("toggled");
this.outerContainer.classList.add("sidebarMoving", "sidebarOpen");
if (this.active === SidebarView.THUMBS) {
this._updateThumbnailViewer();
}
this._forceRendering();
this._dispatchEvent();
this._hideUINotification(this.active);
}
close() {
if (!this.isOpen) {
return;
}
this.isOpen = false;
this.toggleButton.classList.remove("toggled");
this.outerContainer.classList.add("sidebarMoving");
this.outerContainer.classList.remove("sidebarOpen");
this._forceRendering();
this._dispatchEvent();
}
toggle() {
if (this.isOpen) {
this.close();
} else {
this.open();
}
}
/**
* @private
*/
_dispatchEvent() {
this.eventBus.dispatch("sidebarviewchanged", {
source: this,
view: this.visibleView,
});
}
/**
* @private
*/
_forceRendering() {
if (this.onToggled) {
this.onToggled();
} else {
// Fallback
this.pdfViewer.forceRendering();
this.pdfThumbnailViewer.forceRendering();
}
}
/**
* @private
*/
_updateThumbnailViewer() {
let { pdfViewer, pdfThumbnailViewer } = this;
// Use the rendered pages to set the corresponding thumbnail images.
let pagesCount = pdfViewer.pagesCount;
for (let pageIndex = 0; pageIndex < pagesCount; pageIndex++) {
let pageView = pdfViewer.getPageView(pageIndex);
if (pageView && pageView.renderingState === RenderingStates.FINISHED) {
let thumbnailView = pdfThumbnailViewer.getThumbnail(pageIndex);
thumbnailView.setImage(pageView);
}
}
pdfThumbnailViewer.scrollThumbnailIntoView(pdfViewer.currentPageNumber);
}
/**
* @private
*/
_showUINotification(view) {
if (this._disableNotification) {
return;
}
this.l10n
.get(
"toggle_sidebar_notification.title",
null,
"Toggle Sidebar (document contains outline/attachments)"
)
.then(msg => {
this.toggleButton.title = msg;
});
if (!this.isOpen) {
// Only show the notification on the `toggleButton` if the sidebar is
// currently closed, to avoid unnecessarily bothering the user.
this.toggleButton.classList.add(UI_NOTIFICATION_CLASS);
} else if (view === this.active) {
// If the sidebar is currently open *and* the `view` is visible, do not
// bother the user with a notification on the corresponding button.
return;
}
switch (view) {
case SidebarView.OUTLINE:
this.outlineButton.classList.add(UI_NOTIFICATION_CLASS);
break;
case SidebarView.ATTACHMENTS:
this.attachmentsButton.classList.add(UI_NOTIFICATION_CLASS);
break;
}
}
/**
* @private
*/
_hideUINotification(view) {
if (this._disableNotification) {
return;
}
let removeNotification = view => {
switch (view) {
case SidebarView.OUTLINE:
this.outlineButton.classList.remove(UI_NOTIFICATION_CLASS);
break;
case SidebarView.ATTACHMENTS:
this.attachmentsButton.classList.remove(UI_NOTIFICATION_CLASS);
break;
}
};
if (!this.isOpen && view !== null) {
// Only hide the notifications when the sidebar is currently open,
// or when it is being reset (i.e. `view === null`).
return;
}
this.toggleButton.classList.remove(UI_NOTIFICATION_CLASS);
if (view !== null) {
removeNotification(view);
return;
}
for (view in SidebarView) {
// Remove all sidebar notifications on reset.
removeNotification(SidebarView[view]);
}
this.l10n.get("toggle_sidebar.title", null, "Toggle Sidebar").then(msg => {
this.toggleButton.title = msg;
});
}
/**
* @private
*/
_addEventListeners() {
this.viewerContainer.addEventListener("transitionend", evt => {
if (evt.target === this.viewerContainer) {
this.outerContainer.classList.remove("sidebarMoving");
}
});
this.toggleButton.addEventListener("click", () => {
this.toggle();
});
// Buttons for switching views.
this.thumbnailButton.addEventListener("click", () => {
this.switchView(SidebarView.THUMBS);
});
this.outlineButton.addEventListener("click", () => {
this.switchView(SidebarView.OUTLINE);
});
this.outlineButton.addEventListener("dblclick", () => {
this.eventBus.dispatch("toggleoutlinetree", { source: this });
});
this.attachmentsButton.addEventListener("click", () => {
this.switchView(SidebarView.ATTACHMENTS);
});
// Disable/enable views.
this.eventBus.on("outlineloaded", evt => {
let outlineCount = evt.outlineCount;
this.outlineButton.disabled = !outlineCount;
if (outlineCount) {
this._showUINotification(SidebarView.OUTLINE);
} else if (this.active === SidebarView.OUTLINE) {
// If the outline view was opened during document load, switch away
// from it if it turns out that the document has no outline.
this.switchView(SidebarView.THUMBS);
}
});
this.eventBus.on("attachmentsloaded", evt => {
if (evt.attachmentsCount) {
this.attachmentsButton.disabled = false;
this._showUINotification(SidebarView.ATTACHMENTS);
return;
}
// Attempt to avoid temporarily disabling, and switching away from, the
// attachment view for documents that do not contain proper attachments
// but *only* FileAttachment annotations. Hence we defer those operations
// slightly to allow time for parsing any FileAttachment annotations that
// may be present on the *initially* rendered page of the document.
Promise.resolve().then(() => {
if (this.attachmentsView.hasChildNodes()) {
// FileAttachment annotations were appended to the attachment view.
return;
}
this.attachmentsButton.disabled = true;
if (this.active === SidebarView.ATTACHMENTS) {
// If the attachment view was opened during document load, switch away
// from it if it turns out that the document has no attachments.
this.switchView(SidebarView.THUMBS);
}
});
});
// Update the thumbnailViewer, if visible, when exiting presentation mode.
this.eventBus.on("presentationmodechanged", evt => {
if (!evt.active && !evt.switchInProgress && this.isThumbnailViewVisible) {
this._updateThumbnailViewer();
}
});
}
}
export { SidebarView, PDFSidebar };