eomsangdonandClaude Sonnet 5.5
361ce51659
- 위 · 보조 탭 줄 = 부품 탭(fillTabs · 밑줄 · 알약) · B09 좌측 스위치 = 분할 고르기 - 연결 칩 · 검사 탭 이름 · 끌기 태그 = 배지 · 이정표 도구 · 머리 줄 · 저장 줄 = 도구줄 · 구간 고침 · 행 고름 창 = 떠 있는 판 - 안내 · 빈 줄 · 상태 글 = 보조 글 · 운반 칸 = 카드 · 인쇄 미리보기 좌측 줄 = B09 dock 한 벌 · 쪽 체크 = 라디오 · 체크 부품 - 시험 흉내 틀 · 문구 맞춤 Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
89 lines
2.9 KiB
TypeScript
89 lines
2.9 KiB
TypeScript
/* =============================================================================
|
|
* B09_Estimation_UI_Dock.ts
|
|
* B09 좌측 하단 고정 줄(PLAN 303-1 · 304-1) — 위에서부터
|
|
* ① [박스보기|호표보기] 묶음 탭 셋 보기(304-1 · 한 값)
|
|
* ② [하이퍼링크|팝업] 행 누름(303 · 기본 팝업)
|
|
* ③ `DRAFT.actions` 단추(초안 · 비면 줄 없음)
|
|
* ④ [?][<][>][초기화](도움말 줄 `data-help-row` · 요구 298-2 · 301)
|
|
*
|
|
* 스위치 값 = pref global(계정 공용 · [저장] 필요 없음) · 바닥 고정 = 공용 `.ui-sidebar-actions` 한 벌
|
|
* ========================================================================== */
|
|
|
|
import { createSegment } from "@ui/ui_template_segment";
|
|
import { readState, writeState } from "../A00_Common/b_page_state";
|
|
import { DRAFT } from "./B09_Estimation_UI_Tabs";
|
|
import {
|
|
chooseGroupView,
|
|
groupView,
|
|
viewLabel,
|
|
type GroupView,
|
|
} from "./B09_Estimation_UI_Tabs_Groups";
|
|
|
|
export type LinkMode = "popup" | "link";
|
|
|
|
const LINK_LABEL: Record<LinkMode, string> = { link: "하이퍼링크", popup: "팝업" };
|
|
|
|
/** 행 누름 길 — 모르는 값 · 못 읽음 = 팝업 */
|
|
export function linkMode(): LinkMode {
|
|
try {
|
|
return readState<unknown>("b09-link-mode") === "link" ? "link" : "popup";
|
|
} catch {
|
|
return "popup";
|
|
}
|
|
}
|
|
|
|
function setLinkMode(mode: LinkMode): void {
|
|
try {
|
|
writeState("b09-link-mode", mode);
|
|
} catch {
|
|
// 기억 못 하면 기본(팝업)으로 돌아감
|
|
}
|
|
}
|
|
|
|
/** 단추 둘 스위치 — 부품 「분할 고르기」(32) · 고른 쪽 aria-checked */
|
|
function switchRow<T extends string>(
|
|
name: string,
|
|
values: T[],
|
|
label: (value: T) => string,
|
|
current: () => T,
|
|
pick: (value: T) => void,
|
|
): HTMLElement {
|
|
const segment = createSegment({
|
|
options: values.map((value) => ({ value, label: label(value) })),
|
|
value: current(),
|
|
size: 32,
|
|
onChange: (value) => pick(value as T),
|
|
});
|
|
segment.root.dataset.b09Switch = name;
|
|
return segment.root;
|
|
}
|
|
|
|
/** 하단 고정 줄 — onView = 보기 바뀜(묶음 탭이면 다시 그림) */
|
|
export function createDock(buttons: HTMLElement[], onView: () => void): HTMLElement {
|
|
const views: GroupView[] = ["cards", "table"];
|
|
const view = switchRow("view", views, viewLabel, groupView, (value) => {
|
|
chooseGroupView(value);
|
|
onView();
|
|
});
|
|
const link = switchRow<LinkMode>(
|
|
"link",
|
|
["link", "popup"],
|
|
(mode) => LINK_LABEL[mode],
|
|
linkMode,
|
|
setLinkMode,
|
|
);
|
|
const extra = DRAFT.actions.map((make) => make());
|
|
const draft = document.createElement("div");
|
|
draft.className = "b09-dock__row";
|
|
draft.dataset.b09DraftActions = "";
|
|
draft.append(...extra);
|
|
const main = document.createElement("div");
|
|
main.className = "b09-dock__row";
|
|
main.dataset.helpRow = "";
|
|
main.append(...buttons);
|
|
const dock = document.createElement("div");
|
|
dock.className = "ui-sidebar-actions b09-dock";
|
|
dock.append(view, link, ...(extra.length ? [draft] : []), main);
|
|
return dock;
|
|
}
|