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

[Editor] Hide visible popups when editing

Browse Source
This commit is contained in:
Calixte Denizet 2023-06-21 10:41:19 +02:00
parent b8f5a14925
commit 8ae1c8dd81
2 changed files with 60 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/display/annotation_layer.js
View File

@ -577,12 +577,14 @@ class AnnotationElement {
if (this.container) { if (this.container) {
this.container.hidden = false; this.container.hidden = false;
} }
this.popup?.maybeShow();
} }
hide() { hide() {
if (this.container) { if (this.container) {
this.container.hidden = true; this.container.hidden = true;
} }
this.popup?.forceHide();
} }
getElementsToTriggerPopup() { getElementsToTriggerPopup() {
@ -1861,8 +1863,7 @@ class PopupAnnotationElement extends AnnotationElement {
render() { render() {
this.container.classList.add("popupAnnotation"); this.container.classList.add("popupAnnotation");
// eslint-disable-next-line no-new const popup = new PopupElement({
new PopupElement({
container: this.container, container: this.container,
color: this.data.color, color: this.data.color,
titleObj: this.data.titleObj, titleObj: this.data.titleObj,
@ -1875,10 +1876,14 @@ class PopupAnnotationElement extends AnnotationElement {
elements: this.elements, elements: this.elements,
open: this.data.open, open: this.data.open,
}); });
this.container.setAttribute(
"aria-controls", const elementIds = [];
this.elements.map(e => e.data.id).join(",") for (const element of this.elements) {
); element.popup = popup;
elementIds.push(element.data.id);
}
this.container.setAttribute("aria-controls", elementIds.join(","));
return this.container; return this.container;
} }
@ -1915,6 +1920,8 @@ class PopupElement {
#titleObj = null; #titleObj = null;
#wasVisible = false;
constructor({ constructor({
container, container,
color, color,
@ -2124,7 +2131,7 @@ class PopupElement {
if (!this.#popup) { if (!this.#popup) {
this.render(); this.render();
} }
if (this.#container.hidden) { if (!this.isVisible) {
this.#container.hidden = false; this.#container.hidden = false;
this.#container.style.zIndex = this.#container.style.zIndex =
parseInt(this.#container.style.zIndex) + 1000; parseInt(this.#container.style.zIndex) + 1000;
@ -2145,6 +2152,26 @@ class PopupElement {
this.#container.style.zIndex = this.#container.style.zIndex =
parseInt(this.#container.style.zIndex) - 1000; parseInt(this.#container.style.zIndex) - 1000;
} }
forceHide() {
this.#wasVisible = this.isVisible;
if (!this.#wasVisible) {
return;
}
this.#container.hidden = true;
}
maybeShow() {
if (!this.#wasVisible) {
return;
}
this.#wasVisible = false;
this.#container.hidden = false;
}
get isVisible() {
return this.#container.hidden === false;
}
} }
class FreeTextAnnotationElement extends AnnotationElement { class FreeTextAnnotationElement extends AnnotationElement {

26
test/integration/freetext_editor_spec.js
View File

@ -1153,5 +1153,31 @@ describe("FreeText Editor", () => {
}) })
); );
}); });
it("must hide the popup when editing", async () => {
await Promise.all(
pages.map(async ([browserName, page]) => {
await page.click("[data-annotation-id='20R']");
// Wait for the popup to be displayed.
await page.waitForFunction(
`document.querySelector("[data-annotation-id='popup_20R']").hidden === false`
);
// Enter in editing mode.
await page.click("#editorFreeText");
// Wait for the popup to be hidden.
await page.waitForFunction(
`document.querySelector("[data-annotation-id='popup_20R']").hidden === true`
);
// Exit editing mode.
await page.click("#editorFreeText");
// Wait for the popup to be visible.
await page.waitForFunction(
`document.querySelector("[data-annotation-id='popup_20R']").hidden === false`
);
})
);
});
}); });
}); });