ZDDC
7d4d2dc9a2
Reshape browse from "tree-as-table with popup preview" into a unified
file-experience tool with three layered behaviors:
Phase A — Two-pane shell
Phase B — Markdown plugin (Toast UI inline)
Phase C — Grid mode (classifier workflow)
Phase D — Deprecation banners on standalone classifier + mdedit
= Phase A: two-pane shell + lightweight preview plugins =
Browse's table view becomes a tree-pane on the left + preview-pane on
the right with a draggable resizer. Click a folder → expand inline.
Click a file → render in the right pane. The previous popup window
becomes an explicit "⤴ Pop out" button in the right-pane header for
users with a second monitor.
Preview rendering reuses shared/preview-lib.js (PDF iframe, image
<img>, TIFF, ZIP listing, text <pre>). Unknown types show a download
link. browse/js/preview.js refactored into renderInline (default) +
renderInPopup (Pop out button); both share the same plugin
dispatch logic.
Filter rows were already removed earlier this session. Sort columns
likewise — the tree is alphabetical by default; the underlying
setSort API still exists for future re-introduction.
= Phase B: markdown plugin =
New browse/js/preview-markdown.js: when a .md or .markdown file is
clicked, the right pane mounts a Toast UI editor (initial-value =
file contents) with a small toolbar containing Save + dirty indicator
+ status text. Save sends PUT through the file API for server-mode
files; non-server sources are read-only for now (deferred to a
follow-up that wires zddc-source.js writes too). Ctrl+S / Cmd+S
inside the editor saves.
Toast UI Editor (~700 KB JS + ~160 KB CSS) was previously bundled
only in mdedit/vendor/. Moved to shared/vendor/ so browse and mdedit
both pull from one location.
= Phase C: grid mode =
View-mode toggle [Browse | Grid] in the toolbar. Grid mode loads the
classifier tool as an iframe scoped to the current directory (server
mode at working/staging/incoming locations) — classifier's full
bulk-rename workflow without leaving browse. v1 implementation; a
future iteration could bundle classifier's modules directly into
browse for tighter integration. Hostile cases (file:// origin, paths
outside working/staging/incoming) show a friendly explanation
instead of a blank iframe.
new browse/js/grid.js handles the activation logic.
= Phase D: deprecation banners =
mdedit and classifier standalones gain a "this tool is being absorbed
into Browse" advisory banner. Both standalones remain fully
functional and continue to ship — they're useful for offline single-
file editing and air-gapped environments. The banner just points
users toward the unified browse experience.
= Files =
+ browse/js/preview-markdown.js (markdown plugin)
+ browse/js/grid.js (grid-mode plugin)
M browse/template.html (two-pane layout, view toggle, banners)
M browse/css/tree.css (two-pane CSS, replaces table styles)
M browse/js/init.js (state additions: selectedId, viewMode)
M browse/js/tree.js (rowHtml: <tr>+<td> → <div>)
M browse/js/preview.js (renderInline / renderInPopup split)
M browse/js/events.js (toggle wiring, resizer, click handlers
adapted from <table> to <div>)
M browse/build.sh (Toast UI vendor + new modules)
R mdedit/vendor/toastui-* → shared/vendor/ (one bundle, two tools)
M mdedit/build.sh (paths)
M mdedit/template.html (deprecation banner)
M classifier/template.html (deprecation banner)
M tests/browse.spec.js (selectors updated for new layout +
new "click file → preview" test)
Bundle sizes after this commit:
browse: ~1020 KB (was ~290 KB; added Toast UI ~700 KB)
classifier: ~1470 KB (unchanged from prior baseline)
mdedit: ~2140 KB (unchanged; vendor location moved but not added)
What's deferred:
- TOC + front-matter pane in browse's markdown plugin (mdedit has
these; browse v1 uses just the editor).
- FS-API writes from browse's markdown plugin (server PUT works).
- Classifier modules bundled directly into browse (v1 uses iframe).
- Sort UI in the new tree (model still supports it; no widget yet).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
101 lines
3.1 KiB
Bash
Executable file
101 lines
3.1 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/browse.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
|
|
|
|
# CSS files: shared base first, then browse-specific. Toast UI's CSS
|
|
# is bundled because the markdown plugin uses Toast UI inside the
|
|
# preview pane (.md files render as a full editor).
|
|
concat_files \
|
|
"../shared/base.css" \
|
|
"../shared/toast.css" \
|
|
"../shared/nav.css" \
|
|
"../shared/logo.css" \
|
|
"../shared/vendor/toastui-editor.min.css" \
|
|
"css/base.css" \
|
|
"css/tree.css" \
|
|
> "$css_temp"
|
|
|
|
# JS files: shared canonical helpers, then browse modules.
|
|
# init.js must come first so window.app exists when later modules
|
|
# attach to it. JSZip is vendored (rather than CDN-loaded) so ZIP
|
|
# expansion in the tree works under restrictive networks / CSPs and
|
|
# without an external HTTP dependency.
|
|
concat_files \
|
|
"../shared/vendor/jszip.min.js" \
|
|
"../shared/vendor/utif.min.js" \
|
|
"../shared/vendor/toastui-editor-all.min.js" \
|
|
"../shared/zddc.js" \
|
|
"../shared/zddc-filter.js" \
|
|
"../shared/theme.js" \
|
|
"../shared/toast.js" \
|
|
"../shared/nav.js" \
|
|
"../shared/logo.js" \
|
|
"../shared/help.js" \
|
|
"../shared/preview-lib.js" \
|
|
"js/init.js" \
|
|
"js/loader.js" \
|
|
"js/tree.js" \
|
|
"js/preview.js" \
|
|
"js/preview-markdown.js" \
|
|
"js/grid.js" \
|
|
"js/events.js" \
|
|
"js/app.js" \
|
|
> "$js_raw"
|
|
|
|
# Escape any literal `</` inside JS string/template literals so the
|
|
# inlined <script> block doesn't get terminated prematurely.
|
|
escape_js_close_tags "$js_raw" "$js_temp"
|
|
|
|
tool=browse
|
|
compute_build_label "$tool" "$@"
|
|
|
|
# Replace template placeholders with concatenated CSS/JS + label.
|
|
# Non-stable build labels (alpha/beta/dev-dirty) are wrapped in a red
|
|
# span — same convention as every other tool (compute_build_label
|
|
# sets $is_red=1 for non-stable cuts). Keeps the visual cue
|
|
# consistent across tool headers.
|
|
awk -v css_file="$css_temp" -v js_file="$js_temp" \
|
|
-v build_label="$build_label" -v is_red="$is_red" \
|
|
-v favicon="$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
|
|
}
|
|
{
|
|
gsub(/\{\{FAVICON\}\}/, favicon)
|
|
print
|
|
}
|
|
' "$src_html" > "$output_html"
|
|
|
|
echo "Wrote $output_html"
|
|
|
|
# Promote AFTER the dist file exists so promote_release can copy from
|
|
# $output_html. (The order matters — _promote_stable does cp $output_html ...)
|
|
promote_release "$tool"
|