fix: close more dropdown before opening segment modal
This commit is contained in:
@@ -3,10 +3,18 @@ import { formatTime, showControls } from "../controls";
|
|||||||
import { resolveActiveSegments, renderSegments } from "./segments";
|
import { resolveActiveSegments, renderSegments } from "./segments";
|
||||||
|
|
||||||
type SkipType = "op" | "ed";
|
type SkipType = "op" | "ed";
|
||||||
|
type ClosableDropdown = HTMLElement & {
|
||||||
|
close: (options?: { restoreFocus?: boolean }) => void;
|
||||||
|
};
|
||||||
|
|
||||||
const qs = <T extends Element>(root: ParentNode, sel: string): T | null =>
|
const qs = <T extends Element>(root: ParentNode, sel: string): T | null =>
|
||||||
root.querySelector(sel) as T | null;
|
root.querySelector(sel) as T | null;
|
||||||
|
|
||||||
|
const isClosableDropdown = (element: Element | null): element is ClosableDropdown =>
|
||||||
|
element instanceof HTMLElement &&
|
||||||
|
"close" in element &&
|
||||||
|
typeof element.close === "function";
|
||||||
|
|
||||||
export const setupSegmentEditor = (): void => {
|
export const setupSegmentEditor = (): void => {
|
||||||
const root = document.querySelector("[data-segment-editor-root]") as HTMLElement | null;
|
const root = document.querySelector("[data-segment-editor-root]") as HTMLElement | null;
|
||||||
if (!root) return;
|
if (!root) return;
|
||||||
@@ -76,8 +84,16 @@ export const setupSegmentEditor = (): void => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
toggleBtn.addEventListener("click", () => {
|
toggleBtn.addEventListener("click", () => {
|
||||||
if (panel.classList.contains("hidden")) open();
|
if (!panel.classList.contains("hidden")) {
|
||||||
else close();
|
close();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const dropdown = toggleBtn.closest("ui-dropdown");
|
||||||
|
if (isClosableDropdown(dropdown)) {
|
||||||
|
dropdown.close({ restoreFocus: false });
|
||||||
|
}
|
||||||
|
open();
|
||||||
});
|
});
|
||||||
closeBtn?.addEventListener("click", close);
|
closeBtn?.addEventListener("click", close);
|
||||||
|
|
||||||
@@ -135,10 +151,10 @@ export const setupSegmentEditor = (): void => {
|
|||||||
const v = (btn.getAttribute("data-value") || "ed") as SkipType;
|
const v = (btn.getAttribute("data-value") || "ed") as SkipType;
|
||||||
if (typeValue) typeValue.value = v;
|
if (typeValue) typeValue.value = v;
|
||||||
if (typeLabel) typeLabel.textContent = v === "op" ? "Opening (OP)" : "Ending (ED)";
|
if (typeLabel) typeLabel.textContent = v === "op" ? "Opening (OP)" : "Ending (ED)";
|
||||||
// close dropdown popover if it exists
|
|
||||||
const dropdown = btn.closest("ui-dropdown");
|
const dropdown = btn.closest("ui-dropdown");
|
||||||
const content = dropdown?.querySelector("[data-content]") as HTMLElement | null;
|
if (isClosableDropdown(dropdown)) {
|
||||||
content?.classList.add("hidden");
|
dropdown.close({ restoreFocus: false });
|
||||||
|
}
|
||||||
showControls();
|
showControls();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user