260717_0

ui_template/ui_template_overlay.ts

@@ -0,0 +1,121 @@
+import "./ui_template_overlay.css";
+import { t } from "./ui_template_locale";
+
+const TITLE_OVERLAY_STATE_KEY = "frd_workflow_title_overlay_open";
+const PROGRESS_OVERLAY_STATE_KEY = "frd_workflow_progress_overlay_open";
+
+export interface WorkflowOverlayOptions {
+  title: string;
+  progressContent: HTMLElement;
+  optionsContent?: HTMLElement;
+  showTitlePanel?: boolean;
+  onOptionsOpenChange?: (isOpen: boolean) => void;
+}
+
+export interface WorkflowOverlayHandle {
+  root: HTMLElement;
+  setTitleOpen: (isOpen: boolean) => void;
+  setProgressOpen: (isOpen: boolean) => void;
+}
+
+function readOpenState(key: string): boolean {
+  return sessionStorage.getItem(key) !== "false";
+}
+
+function createPanel(
+  variant: "title" | "progress",
+  titleText: string,
+  body: HTMLElement,
+  storageKey: string,
+  onOpenChange?: (isOpen: boolean) => void,
+): { root: HTMLElement; setOpen: (isOpen: boolean) => void } {
+  const root = document.createElement("aside");
+  root.className = `ui-workflow-overlay__panel ui-workflow-overlay__panel--${variant}`;
+
+  // title 패널은 사이드바 도킹형 — 토글이 패널 우측 가장자리 세로 중앙 핸들로 나감
+  const isSidebar = variant === "title";
+
+  const header = document.createElement("div");
+  header.className = "ui-workflow-overlay__header";
+  const title = document.createElement("h2");
+  title.className = "ui-workflow-overlay__title";
+  title.textContent = titleText;
+  const toggle = document.createElement("button");
+  toggle.type = "button";
+  toggle.className = isSidebar ? "ui-workflow-overlay__handle" : "ui-workflow-overlay__toggle";
+
+  if (isSidebar) {
+    header.append(title);
+    root.append(header, toggle);
+  } else {
+    header.append(title, toggle);
+    root.append(header);
+  }
+  if (body.childElementCount > 0) {
+    body.classList.add("ui-workflow-overlay__body");
+    root.append(body);
+  }
+
+  function setOpen(isOpen: boolean): void {
+    root.classList.toggle("is-collapsed", !isOpen);
+    toggle.textContent = isSidebar ? (isOpen ? "◀" : "▶") : isOpen ? "−" : "+";
+    toggle.title = t(isOpen ? "Workflow_Overlay_Collapse" : "Workflow_Overlay_Expand");
+    toggle.setAttribute("aria-label", toggle.title);
+    toggle.setAttribute("aria-expanded", String(isOpen));
+    sessionStorage.setItem(storageKey, String(isOpen));
+    onOpenChange?.(isOpen);
+  }
+
+  function toggleOpen(): void {
+    setOpen(root.classList.contains("is-collapsed"));
+  }
+
+  title.tabIndex = 0;
+  title.setAttribute("role", "button");
+  title.addEventListener("click", toggleOpen);
+  title.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      toggleOpen();
+    }
+  });
+  toggle.addEventListener("click", toggleOpen);
+  setOpen(readOpenState(storageKey));
+  return { root, setOpen };
+}
+
+export function createWorkflowOverlays(options: WorkflowOverlayOptions): WorkflowOverlayHandle {
+  const root = document.createElement("div");
+  root.className = "ui-workflow-overlay";
+
+  const progressBody = document.createElement("div");
+  progressBody.append(options.progressContent);
+
+  const progressPanel = createPanel(
+    "progress",
+    t("Workflow_Progress_Title"),
+    progressBody,
+    PROGRESS_OVERLAY_STATE_KEY,
+  );
+  let setTitleOpen = (_isOpen: boolean): void => {};
+  if (options.showTitlePanel !== false) {
+    const titleBody = document.createElement("div");
+    if (options.optionsContent) titleBody.append(options.optionsContent);
+    const titlePanel = createPanel(
+      "title",
+      options.title,
+      titleBody,
+      TITLE_OVERLAY_STATE_KEY,
+      options.onOptionsOpenChange,
+    );
+    root.append(titlePanel.root);
+    setTitleOpen = titlePanel.setOpen;
+  }
+  root.append(progressPanel.root);
+
+  return {
+    root,
+    setTitleOpen,
+    setProgressOpen: progressPanel.setOpen,
+  };
+}