123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423 |
- import {
- PresentationModeState,
- RenderingStates,
- SidebarView,
- } from "./ui_utils.js";
- const UI_NOTIFICATION_CLASS = "pdfSidebarNotification";
- class PDFSidebar {
-
- constructor({ elements, pdfViewer, pdfThumbnailViewer, eventBus, l10n }) {
- this.isOpen = false;
- this.active = SidebarView.THUMBS;
- this.isInitialViewSet = false;
- this.isInitialEventDispatched = false;
-
- this.onToggled = null;
- this.pdfViewer = pdfViewer;
- this.pdfThumbnailViewer = pdfThumbnailViewer;
- this.outerContainer = elements.outerContainer;
- this.sidebarContainer = elements.sidebarContainer;
- this.toggleButton = elements.toggleButton;
- 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._outlineOptionsContainer = elements.outlineOptionsContainer;
- this._currentOutlineItemButton = elements.currentOutlineItemButton;
- this.eventBus = eventBus;
- this.l10n = l10n;
- this.#addEventListeners();
- }
- reset() {
- this.isInitialViewSet = false;
- this.isInitialEventDispatched = false;
- this.#hideUINotification( true);
- this.switchView(SidebarView.THUMBS);
- this.outlineButton.disabled = false;
- this.attachmentsButton.disabled = false;
- this.layersButton.disabled = false;
- this._currentOutlineItemButton.disabled = true;
- }
-
- get visibleView() {
- return this.isOpen ? this.active : SidebarView.NONE;
- }
-
- setInitialView(view = SidebarView.NONE) {
- if (this.isInitialViewSet) {
- return;
- }
- this.isInitialViewSet = true;
-
-
- if (view === SidebarView.NONE || view === SidebarView.UNKNOWN) {
- this.#dispatchEvent();
- return;
- }
- this.switchView(view, true);
-
-
- if (!this.isInitialEventDispatched) {
- this.#dispatchEvent();
- }
- }
-
- switchView(view, forceOpen = false) {
- const isViewChanged = view !== this.active;
- let shouldForceRendering = false;
- switch (view) {
- case SidebarView.NONE:
- if (this.isOpen) {
- this.close();
- }
- return;
- case SidebarView.THUMBS:
- if (this.isOpen && isViewChanged) {
- shouldForceRendering = true;
- }
- break;
- case SidebarView.OUTLINE:
- if (this.outlineButton.disabled) {
- return;
- }
- break;
- case SidebarView.ATTACHMENTS:
- if (this.attachmentsButton.disabled) {
- return;
- }
- break;
- case SidebarView.LAYERS:
- if (this.layersButton.disabled) {
- return;
- }
- break;
- default:
- console.error(`PDFSidebar.switchView: "${view}" is not a valid view.`);
- return;
- }
-
-
- this.active = view;
- const isThumbs = view === SidebarView.THUMBS,
- isOutline = view === SidebarView.OUTLINE,
- isAttachments = view === SidebarView.ATTACHMENTS,
- isLayers = view === SidebarView.LAYERS;
-
- this.thumbnailButton.classList.toggle("toggled", isThumbs);
- this.outlineButton.classList.toggle("toggled", isOutline);
- this.attachmentsButton.classList.toggle("toggled", isAttachments);
- this.layersButton.classList.toggle("toggled", isLayers);
- this.thumbnailButton.setAttribute("aria-checked", isThumbs);
- this.outlineButton.setAttribute("aria-checked", isOutline);
- this.attachmentsButton.setAttribute("aria-checked", isAttachments);
- this.layersButton.setAttribute("aria-checked", isLayers);
-
- this.thumbnailView.classList.toggle("hidden", !isThumbs);
- this.outlineView.classList.toggle("hidden", !isOutline);
- this.attachmentsView.classList.toggle("hidden", !isAttachments);
- this.layersView.classList.toggle("hidden", !isLayers);
-
- this._outlineOptionsContainer.classList.toggle("hidden", !isOutline);
- if (forceOpen && !this.isOpen) {
- this.open();
- return;
- }
- if (shouldForceRendering) {
- this.#updateThumbnailViewer();
- this.#forceRendering();
- }
- if (isViewChanged) {
- this.#dispatchEvent();
- }
- }
- open() {
- if (this.isOpen) {
- return;
- }
- this.isOpen = true;
- this.toggleButton.classList.add("toggled");
- this.toggleButton.setAttribute("aria-expanded", "true");
- this.outerContainer.classList.add("sidebarMoving", "sidebarOpen");
- if (this.active === SidebarView.THUMBS) {
- this.#updateThumbnailViewer();
- }
- this.#forceRendering();
- this.#dispatchEvent();
- this.#hideUINotification();
- }
- close() {
- if (!this.isOpen) {
- return;
- }
- this.isOpen = false;
- this.toggleButton.classList.remove("toggled");
- this.toggleButton.setAttribute("aria-expanded", "false");
- this.outerContainer.classList.add("sidebarMoving");
- this.outerContainer.classList.remove("sidebarOpen");
- this.#forceRendering();
- this.#dispatchEvent();
- }
- toggle() {
- if (this.isOpen) {
- this.close();
- } else {
- this.open();
- }
- }
- #dispatchEvent() {
- if (this.isInitialViewSet && !this.isInitialEventDispatched) {
- this.isInitialEventDispatched = true;
- }
- this.eventBus.dispatch("sidebarviewchanged", {
- source: this,
- view: this.visibleView,
- });
- }
- #forceRendering() {
- if (this.onToggled) {
- this.onToggled();
- } else {
-
- this.pdfViewer.forceRendering();
- this.pdfThumbnailViewer.forceRendering();
- }
- }
- #updateThumbnailViewer() {
- const { pdfViewer, pdfThumbnailViewer } = this;
-
- const pagesCount = pdfViewer.pagesCount;
- for (let pageIndex = 0; pageIndex < pagesCount; pageIndex++) {
- const pageView = pdfViewer.getPageView(pageIndex);
- if (pageView?.renderingState === RenderingStates.FINISHED) {
- const thumbnailView = pdfThumbnailViewer.getThumbnail(pageIndex);
- thumbnailView.setImage(pageView);
- }
- }
- pdfThumbnailViewer.scrollThumbnailIntoView(pdfViewer.currentPageNumber);
- }
- #showUINotification() {
- this.toggleButton.setAttribute(
- "data-l10n-id",
- "toggle_sidebar_notification2"
- );
- this.l10n.translate(this.toggleButton);
- if (!this.isOpen) {
-
-
- this.toggleButton.classList.add(UI_NOTIFICATION_CLASS);
- }
- }
- #hideUINotification(reset = false) {
- if (this.isOpen || reset) {
-
-
- this.toggleButton.classList.remove(UI_NOTIFICATION_CLASS);
- }
- if (reset) {
- this.toggleButton.setAttribute("data-l10n-id", "toggle_sidebar");
- this.l10n.translate(this.toggleButton);
- }
- }
- #addEventListeners() {
- this.sidebarContainer.addEventListener("transitionend", evt => {
- if (evt.target === this.sidebarContainer) {
- this.outerContainer.classList.remove("sidebarMoving");
- }
- });
- this.toggleButton.addEventListener("click", () => {
- this.toggle();
- });
-
- 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);
- });
- this.layersButton.addEventListener("click", () => {
- this.switchView(SidebarView.LAYERS);
- });
- this.layersButton.addEventListener("dblclick", () => {
- this.eventBus.dispatch("resetlayers", { source: this });
- });
-
- this._currentOutlineItemButton.addEventListener("click", () => {
- this.eventBus.dispatch("currentoutlineitem", { source: this });
- });
-
- const onTreeLoaded = (count, button, view) => {
- button.disabled = !count;
- if (count) {
- this.#showUINotification();
- } else if (this.active === view) {
-
-
- this.switchView(SidebarView.THUMBS);
- }
- };
- this.eventBus._on("outlineloaded", evt => {
- onTreeLoaded(evt.outlineCount, this.outlineButton, SidebarView.OUTLINE);
- evt.currentOutlineItemPromise.then(enabled => {
- if (!this.isInitialViewSet) {
- return;
- }
- this._currentOutlineItemButton.disabled = !enabled;
- });
- });
- this.eventBus._on("attachmentsloaded", evt => {
- onTreeLoaded(
- evt.attachmentsCount,
- this.attachmentsButton,
- SidebarView.ATTACHMENTS
- );
- });
- this.eventBus._on("layersloaded", evt => {
- onTreeLoaded(evt.layersCount, this.layersButton, SidebarView.LAYERS);
- });
-
- this.eventBus._on("presentationmodechanged", evt => {
- if (
- evt.state === PresentationModeState.NORMAL &&
- this.visibleView === SidebarView.THUMBS
- ) {
- this.#updateThumbnailViewer();
- }
- });
- }
- }
- export { PDFSidebar };
|