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

Convert the existing overlays to use <dialog> elements (issue 14698)

Browse source 
This replaces our *custom* overlays with standard `<dialog>` DOM elements, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog, thus simplifying the related CSS, HTML, and JavaScript code.

With these changes, some of the functionality of the `OverlayManager` class is now handled natively (e.g. `Esc` to close the dialog). However, since we still need to be able to prevent dialogs from overlaying one another, it still makes sense to keep this functionality (as far as I'm concerned).
This commit is contained in:
Jonas Jenwald 2022-03-25 14:10:13 +01:00
parent 0dd6bc9a85
commit f0aa08b464
9 changed files with 221 additions and 272 deletions
Download patch file Download diff file Expand all files Collapse all files

62
web/overlay_manager.js
View file

@ -18,43 +18,29 @@ class OverlayManager {
#active = null;
#keyDownBound = null;
get active() {
return this.#active;
}
/**
* @param {string} name - The name of the overlay that is registered.
* @param {HTMLDivElement} element - The overlay's DOM element.
* @param {function} [callerCloseMethod] - The method that, if present, calls
* `OverlayManager.close` from the object registering the
* overlay. Access to this method is necessary in order to
* run cleanup code when e.g. the overlay is force closed.
* The default is `null`.
* @param {HTMLDialogElement} dialog - The overlay's DOM element.
* @param {boolean} [canForceClose] - Indicates if opening the overlay closes
* an active overlay. The default is `false`.
* @returns {Promise} A promise that is resolved when the overlay has been
* registered.
*/
async register(
name,
element,
callerCloseMethod = null,
canForceClose = false
) {
let container;
if (!name || !element || !(container = element.parentNode)) {
async register(name, dialog, canForceClose = false) {
if (!name || !dialog) {
throw new Error("Not enough parameters.");
} else if (this.#overlays[name]) {
throw new Error("The overlay is already registered.");
}
this.#overlays[name] = {
element,
container,
callerCloseMethod,
canForceClose,
};
this.#overlays[name] = { dialog, canForceClose };
dialog.addEventListener("cancel", evt => {
this.#active = null;
});
}
/**
@ -83,17 +69,13 @@ class OverlayManager {
if (this.#active === name) {
throw new Error("The overlay is already active.");
} else if (this.#overlays[name].canForceClose) {
this.#closeThroughCaller();
await this.close();
} else {
throw new Error("Another overlay is currently active.");
}
}
this.#active = name;
this.#overlays[this.#active].element.classList.remove("hidden");
this.#overlays[this.#active].container.classList.remove("hidden");
this.#keyDownBound = this.#keyDown.bind(this);
window.addEventListener("keydown", this.#keyDownBound);
this.#overlays[this.#active].dialog.showModal();
}
/**
@ -101,7 +83,7 @@ class OverlayManager {
* @returns {Promise} A promise that is resolved when the overlay has been
* closed.
*/
async close(name) {
async close(name = this.#active) {
if (!this.#overlays[name]) {
throw new Error("The overlay does not exist.");
} else if (!this.#active) {
@ -109,28 +91,8 @@ class OverlayManager {
} else if (this.#active !== name) {
throw new Error("Another overlay is currently active.");
}
this.#overlays[this.#active].container.classList.add("hidden");
this.#overlays[this.#active].element.classList.add("hidden");
this.#overlays[this.#active].dialog.close();
this.#active = null;
window.removeEventListener("keydown", this.#keyDownBound);
this.#keyDownBound = null;
}
#keyDown(evt) {
if (this.#active && evt.keyCode === /* Esc = */ 27) {
this.#closeThroughCaller();
evt.preventDefault();
}
}
#closeThroughCaller() {
if (this.#overlays[this.#active].callerCloseMethod) {
this.#overlays[this.#active].callerCloseMethod();
}
if (this.#active) {
this.close(this.#active);
}
}
}