260710_0

ui_template/ui_template_workflow_layout.ts

@@ -0,0 +1,79 @@
+import "./ui_template_workflow_layout.css";
+
+export interface WorkflowLayoutOptions {
+  title: string;
+  steps: string[];
+  activeStep: number;
+  leftPanel: HTMLElement;
+  mainContent: HTMLElement;
+  onMenuToggle?: (isOpen: boolean) => void;
+}
+
+export interface WorkflowLayoutHandle {
+  root: HTMLElement;
+  setMenuOpen: (isOpen: boolean) => void;
+}
+
+function createStepBar(steps: readonly string[], activeStep: number): HTMLElement {
+  const bar = document.createElement("div");
+  bar.className = "ui-workflow-layout__steps";
+  steps.forEach((step, index) => {
+    const item = document.createElement("span");
+    item.className = "ui-workflow-layout__step";
+    if (index === activeStep) item.classList.add("is-active");
+    item.textContent = step;
+    bar.append(item);
+  });
+  return bar;
+}
+
+export function createWorkflowLayout(options: WorkflowLayoutOptions): WorkflowLayoutHandle {
+  const root = document.createElement("div");
+  root.className = "ui-workflow-layout";
+
+  const header = document.createElement("header");
+  header.className = "ui-workflow-layout__header";
+
+  const menuButton = document.createElement("button");
+  menuButton.type = "button";
+  menuButton.className = "ui-workflow-layout__menu-button";
+  menuButton.setAttribute("aria-label", "Toggle workflow menu");
+  menuButton.textContent = "☰";
+
+  const titleWrap = document.createElement("div");
+  titleWrap.className = "ui-workflow-layout__title-wrap";
+  const title = document.createElement("h2");
+  title.className = "ui-workflow-layout__title";
+  title.textContent = options.title;
+  titleWrap.append(title, createStepBar(options.steps, options.activeStep));
+
+  header.append(menuButton, titleWrap);
+
+  const body = document.createElement("div");
+  body.className = "ui-workflow-layout__body";
+
+  const aside = document.createElement("aside");
+  aside.className = "ui-workflow-layout__panel";
+  aside.append(options.leftPanel);
+
+  const main = document.createElement("main");
+  main.className = "ui-workflow-layout__main";
+  main.append(options.mainContent);
+
+  body.append(aside, main);
+  root.append(header, body);
+
+  function setMenuOpen(isOpen: boolean): void {
+    root.classList.toggle("is-menu-open", isOpen);
+    menuButton.setAttribute("aria-expanded", String(isOpen));
+    options.onMenuToggle?.(isOpen);
+  }
+
+  menuButton.addEventListener("click", () => setMenuOpen(!root.classList.contains("is-menu-open")));
+  main.addEventListener("click", () => {
+    if (root.classList.contains("is-menu-open")) setMenuOpen(false);
+  });
+  setMenuOpen(true);
+
+  return { root, setMenuOpen };
+}