ZDDC
08ce8a1266
First step toward the Excel-like editable-table the user asked for. Architecture decisions in this phase came from a focused research pass over Notion / Airtable / AG Grid / Handsontable / Glide / W3C ARIA APG; the design notes are in this commit's predecessor as a research synthesis. Five phases planned; this is phase 1 of 5 and ships the cell-selection + keyboard-navigation + per-cell editor mount-on-demand foundation. Edits in this phase live in a client- side draft buffer only; row-level save + ETag conflict UX is phase 3. Scope: - ARIA grid pattern verbatim (W3C WAI-ARIA APG): role=grid on the table, role=row on rows, role=gridcell on cells, roving tabindex (only one cell carries tabindex=0; arrows move it). This makes the grid one tab stop in the page tab order — the documented spreadsheet UX, and also the basis for screen-reader correctness. - Click selects a cell. Arrow keys move selection. Tab and Shift-Tab move with row-wrap. Home / End jump within row; Ctrl/Cmd+Home / End jump to grid corners. Enter, F2, double- click, or any printable character all enter edit mode. In edit mode: Enter commits and moves down (Excel convention), Tab commits and moves right (with row-wrap), Escape cancels and restores the prior value, blur commits. - Mount-on-demand cell editor: one <input> at a time is instantiated inside the selected cell. Survives 1000-row tables without the focus-ring churn an always-editable design would hit, and lets Phase 2 swap the input for schema-driven widgets (number / date / select / etc.) without restructuring. - Draft buffer at app.state.drafts keyed by row id (the row's re-edit URL — stable across sort and filter). When a cell commits with a value different from row.data, the draft entry is set; render reads from the draft via effectiveCellValue() so the visible cell content reflects unsaved edits. No-op edits (commit returns the original value) clear any pending draft. - Selection survives re-paints. Sort / filter / spec changes trigger a re-render; the editor's setSelected at end of paint() clamps to new bounds and rebinds tabindex. The user's cell doesn't disappear when they sort the column they're editing. - Numeric coercion fast-path: cells whose column declares format=number/integer coerce the input string to Number on commit. Phase 2 will generalize this to schema-driven coercion for date, boolean, enum, etc. UX consequence — single-click semantics change: The pre-existing row-click-navigates-to-form-edit behavior is gone. Single click now selects a cell (spreadsheet-native). The "open this row in the form editor" affordance moves to phase 2 (an explicit "Edit…" button or an icon column). The row-click- navigation tests in tests/tables.spec.js are replaced with seven new tests covering the editor lifecycle. What this phase does NOT do (and which phases own it): - Phase 2: schema-driven editor widgets (right input type per column). Server-side validation 422 → red-corner marks. Complex types (object, generic array, oneOf) get an "Edit…" button that opens the side-panel form-render mode the unified bundle already ships. - Phase 3: row-level save on row-blur via PUT + If-Match. Stale- row badge with "Use mine" / "Reload" on 412. Outbox carries the offline path transparently via the existing source.js layer. - Phase 4: copy/paste from Excel/Sheets via TSV parser, spill- from-anchor or fill-all into a selection range. - Phase 5: undo (linear command stack, Ctrl+Z, session-local) and multi-cell ops (range select, bulk delete, Ctrl+D / Ctrl+R fill). Tests (tests/tables.spec.js, all 15 pass): - clicking a cell selects it (replaces the old row-click-navigates test; verifies single-click does NOT navigate) - arrow keys move cell selection - Tab and Shift-Tab traverse cells with row-wrap - Enter enters edit mode; Enter commits and moves down (verifies draft is applied to visible cell + selection moves) - Escape cancels edit, restoring prior value (verifies no-op on draft buffer) - typing a printable char enters edit and replaces the value - double-click also enters edit mode - non-editable rows still get the readonly class (cosmetic guard for an existing convention; phase 3 will gate write submission) Files: - tables/js/editor.js (new) — selection + keyboard handling + edit-mode lifecycle + draft buffer. - tables/js/app.js — state.selected / state.editing / state.drafts fields. - tables/js/render.js — ARIA roles + editor.attachToCell wiring; cells render via editor.effectiveCellValue so drafts show. - tables/js/main.js — paint()-end editor.attachToTable + setSelected restore. - tables/css/table.css — selected-cell focus ring (outline, doesn't shift surrounding cells); cell-input bare-inside-cell styling. - tables/build.sh — editor.js in the concat list. - zddc/internal/handler/tables.html — regenerated bundle. Bundle size: 117 KB → 124 KB (+7 KB for editor.js + ARIA + draft machinery). Well within the budget the library survey identified (Tabulator would have been +100 KB; SlickGrid +34 KB; custom is +7 KB and we keep the no-third-party-deps invariant). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
97 lines
2.3 KiB
Bash
Executable file
97 lines
2.3 KiB
Bash
Executable file
#!/bin/sh
|
|
set -eu
|
|
|
|
root_dir=$(cd "$(dirname "$0")" && pwd)
|
|
. "$root_dir/../shared/build-lib.sh"
|
|
|
|
src_html="$root_dir/template.html"
|
|
output_dir="$root_dir/dist"
|
|
output_html="$output_dir/tables.html"
|
|
|
|
mkdir -p "$output_dir"
|
|
ensure_exists "$src_html"
|
|
|
|
css_temp=$(mktemp)
|
|
js_raw=$(mktemp)
|
|
js_temp=$(mktemp)
|
|
cleanup() { rm -f "$css_temp" "$js_raw" "$js_temp"; }
|
|
trap cleanup EXIT
|
|
|
|
concat_files \
|
|
"../shared/base.css" \
|
|
"css/table.css" \
|
|
"../form/css/form.css" \
|
|
> "$css_temp"
|
|
|
|
# Single bundle hosts both apps. mode.js runs first to set
|
|
# window.zddcMode based on the URL, then each app's main.js bails
|
|
# early when its mode isn't selected. Form modules live under
|
|
# window.formApp; table modules under window.tablesApp; no namespace
|
|
# collisions.
|
|
concat_files \
|
|
"../shared/vendor/js-yaml.min.js" \
|
|
"../shared/zddc.js" \
|
|
"../shared/zddc-source.js" \
|
|
"../shared/theme.js" \
|
|
"../shared/help.js" \
|
|
"js/mode.js" \
|
|
"js/app.js" \
|
|
"js/context.js" \
|
|
"js/util.js" \
|
|
"js/filters.js" \
|
|
"js/sort.js" \
|
|
"js/editor.js" \
|
|
"js/render.js" \
|
|
"js/main.js" \
|
|
"../form/js/app.js" \
|
|
"../form/js/context.js" \
|
|
"../form/js/util.js" \
|
|
"../form/js/widgets.js" \
|
|
"../form/js/object.js" \
|
|
"../form/js/array.js" \
|
|
"../form/js/render.js" \
|
|
"../form/js/serialize.js" \
|
|
"../form/js/errors.js" \
|
|
"../form/js/post.js" \
|
|
"../form/js/main.js" \
|
|
> "$js_raw"
|
|
|
|
escape_js_close_tags "$js_raw" "$js_temp"
|
|
|
|
compute_build_label "tables" "${1:-}" "${2:-}"
|
|
|
|
awk -v css_file="$css_temp" -v js_file="$js_temp" -v build_label="$build_label" -v is_red="$is_red" -v favicon_uri="$favicon_data_uri" '
|
|
/\{\{CSS_PLACEHOLDER\}\}/ {
|
|
while ((getline line < css_file) > 0) print line
|
|
close(css_file)
|
|
next
|
|
}
|
|
/\{\{JS_PLACEHOLDER\}\}/ {
|
|
while ((getline line < js_file) > 0) print line
|
|
close(js_file)
|
|
next
|
|
}
|
|
/\{\{BUILD_LABEL\}\}/ {
|
|
if (is_red == "1") {
|
|
gsub(/\{\{BUILD_LABEL\}\}/, "<span style=\"color:red;font-weight:bold\">" build_label "</span>")
|
|
} else {
|
|
gsub(/\{\{BUILD_LABEL\}\}/, build_label)
|
|
}
|
|
print
|
|
next
|
|
}
|
|
/\{\{FAVICON\}\}/ {
|
|
gsub(/\{\{FAVICON\}\}/, favicon_uri)
|
|
print
|
|
next
|
|
}
|
|
/<script src="https?:\/\// { next }
|
|
/<link rel="stylesheet" href="https?:\/\// { next }
|
|
{ print }
|
|
' "$src_html" > "$output_html"
|
|
|
|
echo "Wrote $output_html"
|
|
|
|
if [ "$is_release" = "1" ]; then
|
|
promote_release "tables"
|
|
fi
|