[Editor] Hide visible popups when editing
This commit is contained in:
parent
b8f5a14925
commit
8ae1c8dd81
@ -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 {
|
||||
|
@ -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`
|
||||
);
|
||||
})
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
Loading…
x
Reference in New Issue
Block a user