Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #17010 from calixteman/alt_text_mask_1

Browse Source 
[Editor] Darken the toolbar when the alt-text dialog is opened
This commit is contained in:
calixteman 2023-09-22 13:34:57 +02:00 committed by GitHub
commit 3f859f76e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
web/alt_text_manager.js
View File

@ -50,6 +50,8 @@ class AltTextManager {
#rectElement = null; #rectElement = null;
#container;
constructor( constructor(
{ {
dialog, dialog,
@ -59,6 +61,7 @@ class AltTextManager {
cancelButton, cancelButton,
saveButton, saveButton,
}, },
container,
overlayManager, overlayManager,
eventBus eventBus
) { ) {
@ -70,6 +73,7 @@ class AltTextManager {
this.#saveButton = saveButton; this.#saveButton = saveButton;
this.#overlayManager = overlayManager; this.#overlayManager = overlayManager;
this.#eventBus = eventBus; this.#eventBus = eventBus;
this.#container = container;
dialog.addEventListener("close", this.#close.bind(this)); dialog.addEventListener("close", this.#close.bind(this));
cancelButton.addEventListener("click", this.#cancel.bind(this)); cancelButton.addEventListener("click", this.#cancel.bind(this));
@ -167,19 +171,29 @@ class AltTextManager {
} }
const dialog = this.#dialog; const dialog = this.#dialog;
const { style } = dialog; const { style } = dialog;
const {
x: containerX,
y: containerY,
width: containerW,
height: containerH,
} = this.#container.getBoundingClientRect();
const { innerWidth: windowW, innerHeight: windowH } = window; const { innerWidth: windowW, innerHeight: windowH } = window;
const { width: dialogW, height: dialogH } = dialog.getBoundingClientRect(); const { width: dialogW, height: dialogH } = dialog.getBoundingClientRect();
const { x, y, width, height } = this.#currentEditor.getClientDimensions(); const { x, y, width, height } = this.#currentEditor.getClientDimensions();
const MARGIN = 10; const MARGIN = 10;
const isLTR = this.#uiManager.direction === "ltr"; const isLTR = this.#uiManager.direction === "ltr";
this.#rectElement.setAttribute("width", `${width / windowW}`); const xs = Math.max(x, containerX);
this.#rectElement.setAttribute("height", `${height / windowH}`); const xe = Math.min(x + width, containerX + containerW);
this.#rectElement.setAttribute("x", `${x / windowW}`); const ys = Math.max(y, containerY);
this.#rectElement.setAttribute("y", `${y / windowH}`); const ye = Math.min(y + height, containerY + containerH);
this.#rectElement.setAttribute("width", `${(xe - xs) / windowW}`);
this.#rectElement.setAttribute("height", `${(ye - ys) / windowH}`);
this.#rectElement.setAttribute("x", `${xs / windowW}`);
this.#rectElement.setAttribute("y", `${ys / windowH}`);
let left = null; let left = null;
let top = y; let top = Math.max(y, 0);
top += Math.min(windowH - (top + dialogH), 0); top += Math.min(windowH - (top + dialogH), 0);
if (isLTR) { if (isLTR) {
@ -197,7 +211,7 @@ class AltTextManager {
if (left === null) { if (left === null) {
top = null; top = null;
left = x; left = Math.max(x, 0);
left += Math.min(windowW - (left + dialogW), 0); left += Math.min(windowW - (left + dialogW), 0);
if (y > dialogH + MARGIN) { if (y > dialogH + MARGIN) {
top = y - dialogH - MARGIN; top = y - dialogH - MARGIN;

1
web/app.js
View File

@ -509,6 +509,7 @@ const PDFViewerApplication = {
const altTextManager = appConfig.altTextDialog const altTextManager = appConfig.altTextDialog
? new AltTextManager( ? new AltTextManager(
appConfig.altTextDialog, appConfig.altTextDialog,
container,
this.overlayManager, this.overlayManager,
eventBus eventBus
) )