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

Merge pull request #18593 from Snuffleupagus/PDFSidebar-AbortController

Browse source 
Remove the sidebar resizing event listeners with an `AbortController`
This commit is contained in:
Tim van der Meij 2024-08-10 18:28:38 +02:00 • committed by GitHub
commit 6e4b347e1b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 25 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

46
web/pdf_sidebar.js
View file

@ -69,9 +69,7 @@ const UI_NOTIFICATION_CLASS = "pdfSidebarNotification";
class PDFSidebar { class PDFSidebar {
#isRTL = false; #isRTL = false;
#mouseMoveBound = this.#mouseMove.bind(this); #mouseAC = null;
#mouseUpBound = this.#mouseUp.bind(this);
#outerContainerWidth = null; #outerContainerWidth = null;
@ -325,11 +323,13 @@ class PDFSidebar {
} }
#addEventListeners() { #addEventListeners() {
const { eventBus, outerContainer } = this;
this.sidebarContainer.addEventListener("transitionend", evt => { this.sidebarContainer.addEventListener("transitionend", evt => {
if (evt.target === this.sidebarContainer) { if (evt.target === this.sidebarContainer) {
this.outerContainer.classList.remove("sidebarMoving"); outerContainer.classList.remove("sidebarMoving");
// Ensure that rendering is triggered after opening/closing the sidebar. // Ensure that rendering is triggered after opening/closing the sidebar.
this.eventBus.dispatch("resize", { source: this }); eventBus.dispatch("resize", { source: this });
} }
}); });
@ -346,7 +346,7 @@ class PDFSidebar {
this.switchView(SidebarView.OUTLINE); this.switchView(SidebarView.OUTLINE);
}); });
this.outlineButton.addEventListener("dblclick", () => { this.outlineButton.addEventListener("dblclick", () => {
this.eventBus.dispatch("toggleoutlinetree", { source: this }); eventBus.dispatch("toggleoutlinetree", { source: this });
}); });
this.attachmentsButton.addEventListener("click", () => { this.attachmentsButton.addEventListener("click", () => {
@ -357,12 +357,12 @@ class PDFSidebar {
this.switchView(SidebarView.LAYERS); this.switchView(SidebarView.LAYERS);
}); });
this.layersButton.addEventListener("dblclick", () => { this.layersButton.addEventListener("dblclick", () => {
this.eventBus.dispatch("resetlayers", { source: this }); eventBus.dispatch("resetlayers", { source: this });
}); });
// Buttons for view-specific options. // Buttons for view-specific options.
this._currentOutlineItemButton.addEventListener("click", () => { this._currentOutlineItemButton.addEventListener("click", () => {
this.eventBus.dispatch("currentoutlineitem", { source: this }); eventBus.dispatch("currentoutlineitem", { source: this });
}); });
// Disable/enable views. // Disable/enable views.
@ -378,7 +378,7 @@ class PDFSidebar {
} }
}; };
this.eventBus._on("outlineloaded", evt => { eventBus._on("outlineloaded", evt => {
onTreeLoaded(evt.outlineCount, this.outlineButton, SidebarView.OUTLINE); onTreeLoaded(evt.outlineCount, this.outlineButton, SidebarView.OUTLINE);
evt.currentOutlineItemPromise.then(enabled => { evt.currentOutlineItemPromise.then(enabled => {
@ -389,7 +389,7 @@ class PDFSidebar {
}); });
}); });
this.eventBus._on("attachmentsloaded", evt => { eventBus._on("attachmentsloaded", evt => {
onTreeLoaded( onTreeLoaded(
evt.attachmentsCount, evt.attachmentsCount,
this.attachmentsButton, this.attachmentsButton,
@ -397,12 +397,12 @@ class PDFSidebar {
); );
}); });
this.eventBus._on("layersloaded", evt => { eventBus._on("layersloaded", evt => {
onTreeLoaded(evt.layersCount, this.layersButton, SidebarView.LAYERS); onTreeLoaded(evt.layersCount, this.layersButton, SidebarView.LAYERS);
}); });
// Update the thumbnailViewer, if visible, when exiting presentation mode. // Update the thumbnailViewer, if visible, when exiting presentation mode.
this.eventBus._on("presentationmodechanged", evt => { eventBus._on("presentationmodechanged", evt => {
if ( if (
evt.state === PresentationModeState.NORMAL && evt.state === PresentationModeState.NORMAL &&
this.visibleView === SidebarView.THUMBS this.visibleView === SidebarView.THUMBS
@ -418,13 +418,17 @@ class PDFSidebar {
} }
// Disable the `transition-duration` rules when sidebar resizing begins, // Disable the `transition-duration` rules when sidebar resizing begins,
// in order to improve responsiveness and to avoid visual glitches. // 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); this.#mouseAC = new AbortController();
window.addEventListener("mouseup", this.#mouseUpBound); const opts = { signal: this.#mouseAC.signal };
window.addEventListener("mousemove", this.#mouseMove.bind(this), opts);
window.addEventListener("mouseup", this.#mouseUp.bind(this), opts);
window.addEventListener("blur", this.#mouseUp.bind(this), opts);
}); });
this.eventBus._on("resize", evt => { eventBus._on("resize", evt => {
// When the *entire* viewer is resized, such that it becomes narrower, // When the *entire* viewer is resized, such that it becomes narrower,
// ensure that the sidebar doesn't end up being too wide. // ensure that the sidebar doesn't end up being too wide.
if (evt.source !== window) { if (evt.source !== window) {
@ -443,15 +447,15 @@ class PDFSidebar {
this.#updateWidth(this.#width); this.#updateWidth(this.#width);
return; return;
} }
this.outerContainer.classList.add(SIDEBAR_RESIZING_CLASS); outerContainer.classList.add(SIDEBAR_RESIZING_CLASS);
const updated = this.#updateWidth(this.#width); const updated = this.#updateWidth(this.#width);
Promise.resolve().then(() => { 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 // Trigger rendering if the sidebar width changed, to avoid
// depending on the order in which 'resize' events are handled. // depending on the order in which 'resize' events are handled.
if (updated) { if (updated) {
this.eventBus.dispatch("resize", { source: this }); eventBus.dispatch("resize", { source: this });
} }
}); });
}); });
@ -502,8 +506,8 @@ class PDFSidebar {
// ... and ensure that rendering will always be triggered. // ... and ensure that rendering will always be triggered.
this.eventBus.dispatch("resize", { source: this }); this.eventBus.dispatch("resize", { source: this });
window.removeEventListener("mousemove", this.#mouseMoveBound); this.#mouseAC?.abort();
window.removeEventListener("mouseup", this.#mouseUpBound); this.#mouseAC = null;
} }
} }