[Editor] Hide visible popups when editing

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

View File

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

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`
);
})
);
});
});
});