Aislo/A00_Common/spreadsheet/spreadsheet_touch_keys.ts

/* =============================================================================
 * spreadsheet_touch_keys.ts
 * 자판 없는 기기용 단추 줄(기기대응 4-3) — 단축키로만 되던 일을 같은 키 길(`attachKeys`)로 보냄.
 * 입력줄(`ed.bar`) 끝에 붙고 터치 모드에서만 보임(spreadsheet_toolbar.css). 마우스 화면은 그대로.
 * ========================================================================== */

import { createButton } from "@ui/ui_template_elements";
import type { Editor } from "./spreadsheet_editor";
import type { SpreadsheetContext } from "./spreadsheet_view_types";

const KEYS: [label: string, title: string, init: KeyboardEventInit, edit: boolean][] = [
  ["🔍", "찾기 · 바꾸기(Ctrl+F)", { key: "f", code: "KeyF", ctrlKey: true }, false],
  ["⇉", "고른 칸 모두 같은 값(Ctrl+Enter)", { key: "Enter", ctrlKey: true }, true],
  ["↵", "칸 안 줄바꿈(Alt+Enter)", { key: "Enter", altKey: true }, true],
  ["✕", "고침 취소(Esc)", { key: "Escape" }, true],
  ["📅", "오늘 날짜(Ctrl+;)", { key: ";", code: "Semicolon", ctrlKey: true }, true],
  ["$", "참조 $ 돌리기(F4)", { key: "F4" }, true],
];

export function mountTouchKeys(ctx: SpreadsheetContext, ed: Editor): void {
  const row = document.createElement("div");
  row.className = "ss-touch-keys";
  for (const [label, title, init, edit] of KEYS) {
    if (edit && ctx.readOnly) continue;
    const b = createButton({
      label,
      variant: "ghost",
      onClick: () => {
        // 고치는 중이면 그 칸(입력줄 · 칸 편집기) — 아니면 칸 편집기로
        const target = document.activeElement === ed.formula ? ed.formula : ed.ta;
        target.dispatchEvent(
          new KeyboardEvent("keydown", { ...init, bubbles: true, cancelable: true }),
        );
      },
    });
    b.title = title;
    b.setAttribute("aria-label", title);
    // 누를 때 초점을 뺏지 않음 — 고치던 칸이 그대로(손가락은 호환 mousedown 이 옴)
    b.addEventListener("mousedown", (e) => e.preventDefault());
    row.append(b);
  }
  ed.bar.append(row);
}