ZDDC
94b2e29448
Major upgrade to the browse tool's UX, plus a few shared modules other tools can adopt. User-facing: - Right-click context menu on tree rows AND empty pane space. Traditional file-manager grouping (Open / Download / New / Rename-Delete / Copy / Tree ops / View). Items stay visible but disabled when not applicable so muscle memory carries. Generic shared/context-menu.js framework supports normal items, toggles, submenus, separators, danger styling. - YAML editor for .yaml / .yml / .zddc files (CodeMirror 5 vendored at shared/vendor/codemirror-yaml.min.*). js-yaml lint on every change for parse errors. For .zddc cascade files, an additional schema-aware lint pass flags unknown keys, bad enum values, and wrong types. - Per-row drag-drop upload using webkitGetAsEntry (folder uploads work recursively). Per-row drop indicator; doc-level overlay still fires for blank-space drops at drop_target scopes. - New folder / New markdown file context-menu items (server mode). Rename + Delete with native confirm() dialog. File-API helpers removeNode / renameNode use the existing PUT/POST/DELETE endpoints. - Hover info card with the row's full metadata (ZDDC fields + filesystem info + path/URL). Interactive — mouse into it, drag-select text, Ctrl/Cmd-C or right-click → Copy. 200ms grace before dismiss. - Autofilter input at the top of the tree pane. Same grammar as archive's column filters (zddc.filter.parse / matches). Filters files; folders without matches collapse out. Non-matching folders force-open visually when descendants match, without mutating the user's actual expand state. - Two-line ZDDC label: title-first, tracking/rev/status as monospace meta below. Icon column anchors to the title line. Chevron is a Lucide outline `chevron-right` SVG, rotated 90° on `.expanded`. - File-type Lucide icon sprite (shared/icons.js — 16 outline glyphs, ~5 KB). PDF / Word / Spreadsheet / Slides / Image / Video / Audio / CAD / Web / Config / Code / Archive get distinct icons; folders tinted with --primary. - Header wraps gracefully at narrow viewports (shared/base.css flex-wrap + title min-width:0 ellipsis). Body becomes flex column in browse so a wrapping header doesn't break #appMain height. - Markdown editor opens in WYSIWYG mode by default. YAML front-matter + TOC sidebar reworked: flexbox layout (single visible resizer between FM and TOC), both bodies overflow:auto for X+Y scrollbars. - `?file=<path>` deep links open browse pre-positioned at a specific file. Multi-segment paths walk into subdirectories on the way. Auto-flips Show hidden when a segment is dot/underscore-prefixed. - Refresh + show-hidden toggle preserve expansion / selection / preview pinning. Path-keyed snapshot survives a re-fetched listing. - "Add Local Directory" → "Use Local Directory" across the four tools that have it (browse, archive, classifier, +transmittal comment). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
82 lines
3.4 KiB
JavaScript
82 lines
3.4 KiB
JavaScript
// Bootstrap window.app for the browse tool. Mirrors the convention
|
|
// used by every other ZDDC tool — ./build's CSS/JS concat order means
|
|
// this file runs FIRST inside the IIFE-of-IIFEs.
|
|
(function () {
|
|
'use strict';
|
|
|
|
if (!window.app) {
|
|
window.app = { modules: {}, state: {} };
|
|
}
|
|
|
|
// Mount the shared Lucide outline-icon sprite into <body> before
|
|
// the tree first renders. The sprite is hidden (display:none on
|
|
// the outer <svg>) — it only exists so per-row <use href="#…"/>
|
|
// refs resolve. Falls back to deferring until DOMContentLoaded
|
|
// when <body> isn't ready yet.
|
|
if (window.zddc && window.zddc.icons) {
|
|
window.zddc.icons.inject();
|
|
}
|
|
|
|
window.app.state = {
|
|
// Source: 'server' | 'fs' | null. Determines how the loader
|
|
// resolves entries.
|
|
source: null,
|
|
|
|
// For server-source: the URL path of the directory currently
|
|
// being viewed. Always starts with '/' and ends with '/'.
|
|
// For fs-source: the displayed path string (no semantic
|
|
// meaning — just for the toolbar).
|
|
currentPath: '/',
|
|
|
|
// FileSystemAccessAPI root handle (null in server mode).
|
|
rootHandle: null,
|
|
|
|
// Sort state. key: 'name' | 'size' | 'ext' | 'date'. dir: 1 or -1.
|
|
sort: { key: 'name', dir: 1 },
|
|
|
|
// Currently-selected tree node id (for highlight + pop-out).
|
|
selectedId: null,
|
|
lastPreviewedNodeId: null,
|
|
|
|
// View mode: 'browse' (tree + preview, default) | 'grid' (classifier).
|
|
viewMode: 'browse',
|
|
|
|
// The tree's in-memory representation. Each node:
|
|
// { id, name, isDir, size, modTime, ext, url, handle, depth,
|
|
// parentId, expanded, loaded, childIds, isZip,
|
|
// _zipDirHandle, virtual }
|
|
// - isZip: the node IS a .zip file; expanding it lists
|
|
// the zip's members (server "<…>.zip/" listing
|
|
// online, JSZip behind a ZipDirectoryHandle
|
|
// offline). Members are ordinary dir/file nodes.
|
|
// - _zipDirHandle: cached ZipDirectoryHandle for an opened zip
|
|
// (offline / nested-in-zip path only).
|
|
// - handle: a FileSystemFileHandle/DirectoryHandle (fs
|
|
// mode) — or, inside an opened zip, a
|
|
// ZipFileHandle/ZipDirectoryHandle.
|
|
// Stored flat in a Map keyed by id; render order derived
|
|
// from a depth-first walk.
|
|
nodes: new Map(),
|
|
rootIds: [],
|
|
nextId: 1,
|
|
|
|
// Single shared popup window for file preview (across
|
|
// multiple file clicks). Same pattern as archive's preview.
|
|
previewWindow: null,
|
|
|
|
// Cascade-resolved scope flags, refreshed on each listing
|
|
// fetch from response headers.
|
|
// scopeDropTarget: cascade's drop_target at currentPath
|
|
// scopeDefaultTool: cascade's default_tool at currentPath
|
|
// (empty when no default declared)
|
|
scopeDropTarget: false,
|
|
scopeDefaultTool: '',
|
|
|
|
// Autofilter — when non-empty, the tree hides files that
|
|
// don't match and folders whose subtree has no matches.
|
|
// Parsed once on input change so visibleIds() / rowHtml()
|
|
// can run filter.matches(text, ast) cheaply per node.
|
|
filterText: '',
|
|
filterAST: null
|
|
};
|
|
})();
|