diff --git a/web/pdf_sidebar.js b/web/pdf_sidebar.js index 5f3ab9431..fa62ca53e 100644 --- a/web/pdf_sidebar.js +++ b/web/pdf_sidebar.js @@ -325,11 +325,13 @@ class PDFSidebar { } #addEventListeners() { + const { eventBus, outerContainer } = this; + this.sidebarContainer.addEventListener("transitionend", evt => { if (evt.target === this.sidebarContainer) { - this.outerContainer.classList.remove("sidebarMoving"); + outerContainer.classList.remove("sidebarMoving"); // Ensure that rendering is triggered after opening/closing the sidebar. - this.eventBus.dispatch("resize", { source: this }); + eventBus.dispatch("resize", { source: this }); } }); @@ -346,7 +348,7 @@ class PDFSidebar { this.switchView(SidebarView.OUTLINE); }); this.outlineButton.addEventListener("dblclick", () => { - this.eventBus.dispatch("toggleoutlinetree", { source: this }); + eventBus.dispatch("toggleoutlinetree", { source: this }); }); this.attachmentsButton.addEventListener("click", () => { @@ -357,12 +359,12 @@ class PDFSidebar { this.switchView(SidebarView.LAYERS); }); this.layersButton.addEventListener("dblclick", () => { - this.eventBus.dispatch("resetlayers", { source: this }); + eventBus.dispatch("resetlayers", { source: this }); }); // Buttons for view-specific options. this._currentOutlineItemButton.addEventListener("click", () => { - this.eventBus.dispatch("currentoutlineitem", { source: this }); + eventBus.dispatch("currentoutlineitem", { source: this }); }); // Disable/enable views. @@ -378,7 +380,7 @@ class PDFSidebar { } }; - this.eventBus._on("outlineloaded", evt => { + eventBus._on("outlineloaded", evt => { onTreeLoaded(evt.outlineCount, this.outlineButton, SidebarView.OUTLINE); evt.currentOutlineItemPromise.then(enabled => { @@ -389,7 +391,7 @@ class PDFSidebar { }); }); - this.eventBus._on("attachmentsloaded", evt => { + eventBus._on("attachmentsloaded", evt => { onTreeLoaded( evt.attachmentsCount, this.attachmentsButton, @@ -397,12 +399,12 @@ class PDFSidebar { ); }); - this.eventBus._on("layersloaded", evt => { + 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 => { + eventBus._on("presentationmodechanged", evt => { if ( evt.state === PresentationModeState.NORMAL && this.visibleView === SidebarView.THUMBS @@ -418,13 +420,13 @@ class PDFSidebar { } // Disable the `transition-duration` rules when sidebar resizing begins, // in order to improve responsiveness and to avoid visual glitches. - this.outerContainer.classList.add(SIDEBAR_RESIZING_CLASS); + outerContainer.classList.add(SIDEBAR_RESIZING_CLASS); window.addEventListener("mousemove", this.#mouseMoveBound); window.addEventListener("mouseup", this.#mouseUpBound); }); - this.eventBus._on("resize", evt => { + eventBus._on("resize", evt => { // When the *entire* viewer is resized, such that it becomes narrower, // ensure that the sidebar doesn't end up being too wide. if (evt.source !== window) { @@ -443,15 +445,15 @@ class PDFSidebar { this.#updateWidth(this.#width); return; } - this.outerContainer.classList.add(SIDEBAR_RESIZING_CLASS); + outerContainer.classList.add(SIDEBAR_RESIZING_CLASS); const updated = this.#updateWidth(this.#width); Promise.resolve().then(() => { - this.outerContainer.classList.remove(SIDEBAR_RESIZING_CLASS); + outerContainer.classList.remove(SIDEBAR_RESIZING_CLASS); // Trigger rendering if the sidebar width changed, to avoid // depending on the order in which 'resize' events are handled. if (updated) { - this.eventBus.dispatch("resize", { source: this }); + eventBus.dispatch("resize", { source: this }); } }); });