eomsangdonandClaude Opus 5.5
1dddb5185c
- 공용 모달 바깥 닫기 = 뗌 자리도 배경일 때만(누름 바깥 · 뗌 안 = 안 닫힘) - 360 px 모달 제목 · [원본에서 다시 그리기] · [닫기] 줄바꿈 없앰 · 단추 줄 [안내선 숨기기]도 같은 키(32 px) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
68 lines
3.3 KiB
TypeScript
68 lines
3.3 KiB
TypeScript
/* =============================================================================
|
||
* ui_template_modal.ts
|
||
* 공용 모달 겉틀 — 배경 · 제목줄 · 닫기 · Esc · 포커스. 몸은 `mount` 가 채움.
|
||
* 바깥 누르기 = 누름 · 뗌 둘 다 배경일 때만 닫음(칸 끌기로 안 닫힘).
|
||
* M01 · M02 가 함께 씀 — `dialogClass` · `backdropClass` 로 화면별 겉모양을 덧붙임.
|
||
* 곁값 — `actions`(머리 [닫기] 바로 왼쪽 단추 · mount 셋째 인자 자리에 넣어도 됨) · `wide`(큰 창 96vw × 94vh).
|
||
* 안 넘긴 창은 지금 꼴 그대로.
|
||
* ========================================================================== */
|
||
|
||
import "./ui_template_modal.css";
|
||
import { createButton, el } from "./ui_template_elements";
|
||
|
||
export interface ModalOptions {
|
||
title: string;
|
||
closeLabel: string;
|
||
/** `actions` = 머리 단추 자리 — 몸에서 만든 단추([확인] 등)를 넣음 */
|
||
mount: (body: HTMLElement, close: () => void, actions: HTMLElement) => void;
|
||
dialogClass?: string;
|
||
/** 머리 [닫기] 바로 왼쪽에 둘 단추(넘긴 창만) */
|
||
actions?: HTMLElement[];
|
||
/** 큰 창 — 96vw × 94vh · 몸 넘침만 스크롤 */
|
||
wide?: boolean;
|
||
backdropClass?: string;
|
||
/** 닫기 단추 · Esc · 바깥 누르기 전에 물음 — false 면 안 닫음(몸의 `close` 는 묻지 않고 닫음) */
|
||
beforeClose?: () => boolean | Promise<boolean>;
|
||
}
|
||
|
||
export function openModal(opts: ModalOptions): { close: () => void } {
|
||
const body = el("div", { className: "ui-modal__body" });
|
||
const actions = el("div", { className: "ui-modal__actions", children: opts.actions ?? [] });
|
||
const closeButton = createButton({
|
||
label: opts.closeLabel,
|
||
variant: "ghost",
|
||
onClick: () => void ask(),
|
||
});
|
||
const top = el("div", {
|
||
className: "ui-modal__top",
|
||
children: [el("h3", { text: opts.title }), closeButton],
|
||
});
|
||
const close = (): void => backdrop.remove();
|
||
const ask = async (): Promise<void> => {
|
||
if (!opts.beforeClose || (await opts.beforeClose())) close();
|
||
};
|
||
const dialog = el("div", {
|
||
className: `ui-modal ${opts.wide ? "ui-modal--wide " : ""}${opts.dialogClass ?? ""}`.trim(),
|
||
attrs: { role: "dialog", "aria-label": opts.title },
|
||
children: [top, body],
|
||
});
|
||
const backdrop = el("div", {
|
||
className: `ui-modal__backdrop ${opts.backdropClass ?? ""}`.trim(),
|
||
children: [dialog],
|
||
});
|
||
// 바깥 누르기 = 누름 · 뗌 둘 다 바깥일 때만 — 칸 안에서 끌어 바깥에서 떼면(그 반대도) 안 닫음
|
||
let outside = false;
|
||
backdrop.addEventListener("pointerdown", (ev) => (outside = ev.target === backdrop));
|
||
backdrop.addEventListener("pointerup", (ev) => (outside &&= ev.target === backdrop));
|
||
backdrop.addEventListener("click", (ev) => ev.target === backdrop && outside && void ask());
|
||
backdrop.addEventListener("keydown", (ev) => ev.key === "Escape" && void ask());
|
||
opts.mount(body, close, actions);
|
||
// 단추가 있을 때만 머리에 — [닫기] 는 머리 직속 그대로(B05 추천의 `.ui-modal__top > button` 갈아 끼우기)
|
||
if (actions.childElementCount) closeButton.before(actions);
|
||
document.body.append(backdrop);
|
||
dialog.tabIndex = -1;
|
||
// 몸의 첫 입력 칸에 커서 — mount 안의 focus() 는 붙기 전이라 안 먹음
|
||
(body.querySelector<HTMLElement>("input, textarea, select") ?? dialog).focus();
|
||
return { close };
|
||
}
|