mirror of
https://github.com/zen-browser/pdf.js.git
synced 2025-07-08 17:30:09 +02:00
Merge pull request #18593 from Snuffleupagus/PDFSidebar-AbortController
Remove the sidebar resizing event listeners with an `AbortController`
This commit is contained in:
commit
6e4b347e1b
1 changed files with 25 additions and 21 deletions
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue