eomsangdonandClaude Opus 5.5
baea638043
- 종단 도구 · [창 분할] = 단추 유리 · 보조 단 18 · ▲▼ = 아이콘 단추 선 18 · 배율 + − ⤢ = 아이콘 단추 22 - 배수 머리 단추 = 단추 22 · 층 단추 = 켜기 칩 20(색 점 = 층 색) · 유역 줄 = 목록 줄 32 - [추가] · [삭제] · [리셋] · [해제] · 확폭 = 단추 주 · 위험 고스트 · 보조 · [－][＋] = 아이콘 단추 24 - 지도 도구줄 · 3D 보기 줄 = 단 32(34 에서) · 접기 ▾ = 아이콘 단추 18 · 잰 값 닫기 = 아이콘 단추 24 - 페이지 CSS 의 단추 꼴(테두리 · 바탕 · 글 · 둥글기) 지움 · 날 색 대체값(#d98a00 · #5b8def · #3a3f4a) 지움 - 시험 선택자 · 가짜 DOM(setAttribute) 같이 고침 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
76 lines
3.0 KiB
TypeScript
76 lines
3.0 KiB
TypeScript
/* =============================================================================
|
|
* B05_Profile_UI_Structures_Summary_Row.ts
|
|
* 구조물 폼의 「집계 항목」 줄 — 이름(없으면 「미지정」) · [해제] (PLAN 21-4) · 이름 칸을 누르면 고르기(280-1).
|
|
*
|
|
* B05 · B06 · 관 계열 하위 폼이 같은 줄을 쓴다(옵션 · 서브폼 아래 한 줄). 줄은 값만 들고 있고
|
|
* 저장은 패널이 한다 — 이름 칸(누름 · Enter · Space)이 모달(21-5 `openItemPicker`)을 부르고 돌려받은 참조를 `set` 한다.
|
|
* 키(SS…)는 앞에 내세우지 않고 툴팁에만 둔다(PLAN 21-0).
|
|
* ========================================================================== */
|
|
|
|
import {
|
|
summaryLabel,
|
|
summaryTooltip,
|
|
type SummaryItem,
|
|
} from "../common_util/common_util_summary_item";
|
|
|
|
export interface SummaryRow {
|
|
root: HTMLElement;
|
|
get: () => SummaryItem | null;
|
|
/** 값만 바꿔 그림 — 저장 · 알림은 안 함(폼 불러오기 · 모달 결과가 씀). */
|
|
set: (item: SummaryItem | null) => void;
|
|
/** 고르기(이름 칸) · [해제] 배선 — 패널이 한 번 부른다. */
|
|
bind: (handlers: { pick: () => void; clear: () => void }) => void;
|
|
}
|
|
|
|
const PICK_TIP = "눌러서 고르기";
|
|
|
|
export function buildSummaryRow(): SummaryRow {
|
|
// 옵션 칸과 같은 2행 꼴(54-17) — 위 제목(`b05-route__field > span`) · 아래 [이름 칸][해제]
|
|
const root = document.createElement("div");
|
|
root.className = "b05-route__field b05-structure__summary";
|
|
root.dataset.b05Summary = "row";
|
|
const label = document.createElement("span");
|
|
label.className = "b05-structure__summary-label";
|
|
label.textContent = "구조물 조합";
|
|
// 이름 = 읽기 전용 입력 칸 — 옵션 입력 칸과 글꼴 · 크기 · 칸 모양이 같음 · 누르면 고르기(280-1)
|
|
const name = document.createElement("input");
|
|
name.type = "text";
|
|
name.readOnly = true;
|
|
name.className = "b05-structure__summary-name";
|
|
name.dataset.b05Summary = "pick";
|
|
const clear = document.createElement("button");
|
|
clear.type = "button";
|
|
clear.className = "ui-btn ui-btn--ghost b05-route__irregular-btn";
|
|
clear.textContent = "해제";
|
|
clear.dataset.b05Summary = "clear";
|
|
const line = document.createElement("div");
|
|
line.className = "b05-route__irregular-actions";
|
|
line.append(name, clear);
|
|
root.append(label, line);
|
|
|
|
let current: SummaryItem | null = null;
|
|
const set = (item: SummaryItem | null): void => {
|
|
current = item;
|
|
name.value = summaryLabel(item);
|
|
name.title = `${summaryTooltip(item)} · ${PICK_TIP}`;
|
|
name.classList.toggle("is-assigned", item !== null);
|
|
clear.disabled = item === null;
|
|
};
|
|
set(null);
|
|
|
|
return {
|
|
root,
|
|
get: () => current,
|
|
set,
|
|
bind(handlers) {
|
|
name.addEventListener("click", () => handlers.pick());
|
|
name.addEventListener("keydown", (event) => {
|
|
if (event.key !== "Enter" && event.key !== " ") return;
|
|
event.preventDefault();
|
|
handlers.pick();
|
|
});
|
|
clear.addEventListener("click", () => handlers.clear());
|
|
},
|
|
};
|
|
}
|