eomsangdonandClaude Opus 5.5
a3365946fd
- 도구줄 createToolbar: data-size 24 · 28 · 32 · 나눔선 · 밀기 · 유리 꼴 · 단 없는 단추에 같은 단을 붙임(552-2 setUiSize) - 떠 있는 판 createFloatPanel: 머리 32 · 닫기 = 아이콘 단추 24(x) · 끌기 머리 · 팝오버 - 오른쪽 서랍: 흰 판 + 1 px 선 · 자리 · 폭 · 열고 닫기 그대로 · 머리 규칙 8 - 부품 모음 틀 아홉 견본 다 참 · 지킴 시험 아홉 부품 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
49 lines
2.2 KiB
TypeScript
49 lines
2.2 KiB
TypeScript
/* =============================================================================
|
|
* ui_template_toolbar.ts
|
|
* 도구줄 `toolbar`(552-4 틀) — 단추 · 찾기 · 고르기를 한 줄에 묶음 · 나눔선 · 오른쪽 끝 밀기.
|
|
* 꼴 = 보통(바탕 없음) · 유리(glass · 그림 위에 뜸) · 나눔선("divider") · 빈 칸 밀기("spacer")
|
|
* 크기 = data-size 24 · 28 · 32(기본 28) — 크기 단이 없는 단추 · 아이콘 단추 · 입력 · 고르기에 같은 단을 붙임
|
|
* 상태 = 줄 자체는 없음(안 단추가 제 상태를 가짐)
|
|
* 쓰는 법 = createToolbar({ items: [createIconButton({ icon: "search", title: "찾기" }), "divider", "spacer", saveBtn] })
|
|
* 대신하는 옛 변종 = `.ui-btn-group`(붙은 묶음은 그대로 씀) · `.ui-group-cards__bar` · `b05-routeedit__tools` ·
|
|
* `b04-map__controls` · `b08-hydro__toolbar` · `b09-estimation__tools` · `m01-logic__bar` · M02 `*__bar` · `*__tools` 약 20
|
|
* ========================================================================== */
|
|
|
|
import { setUiSize } from "./ui_template_button";
|
|
import "./ui_template_toolbar.css";
|
|
|
|
export type ToolbarSize = 24 | 28 | 32;
|
|
export type ToolbarItem = HTMLElement | "divider" | "spacer";
|
|
|
|
export interface ToolbarOptions {
|
|
items: ToolbarItem[];
|
|
size?: ToolbarSize;
|
|
/** 그림 위에 뜨는 유리 꼴 */
|
|
glass?: boolean;
|
|
/** 보조기기 이름 */
|
|
label?: string;
|
|
}
|
|
|
|
const SIZED = ".ui-btn, .ui-icon-btn, .ui-input, .ui-select";
|
|
|
|
export function createToolbar(opts: ToolbarOptions): HTMLElement {
|
|
const size = opts.size ?? 28;
|
|
const bar = document.createElement("div");
|
|
bar.className = `ui-toolbar${opts.glass ? " ui-toolbar--glass" : ""}`;
|
|
bar.setAttribute("role", "toolbar");
|
|
if (opts.label) bar.setAttribute("aria-label", opts.label);
|
|
bar.dataset.size = String(size);
|
|
for (const item of opts.items) {
|
|
if (typeof item === "string") {
|
|
const gap = document.createElement("span");
|
|
gap.className = `ui-toolbar__${item}`;
|
|
if (item === "divider") gap.setAttribute("role", "separator");
|
|
bar.append(gap);
|
|
continue;
|
|
}
|
|
if (!item.dataset.size && item.matches(SIZED)) setUiSize(item, size);
|
|
bar.append(item);
|
|
}
|
|
return bar;
|
|
}
|