ZDDC
582db6d86d
- Vendor JSZip locally (shared/vendor/jszip.min.js) and bundle into
the browse build instead of CDN-loading. Eliminates the failure
mode where ZIP rows can't expand because the CDN script doesn't
load (CSP, network, etc.). Tool now works fully offline.
- Replace the toolbar filter input + ext multi-select with two
spreadsheet-style auto-filter rows in <thead>:
- 📄 row: file-name filter + extension filter
- 📁 row: folder-name filter
Each input uses shared/zddc-filter syntax (substring/!negate/
^startsWith/$endsWith/regex/| or/space and).
- New visibility model with ancestor-of-match awareness:
- file matches keep their ancestor folders visible (path-to-hit)
- folder match keeps its descendants visible
- filters compose (file ∧ folder ∧ ext) so combinations narrow
Computed model-side; render walks only visible nodes.
- Replace 🏠 emoji breadcrumb-root with an inline outline-stroke SVG
that tints with currentColor.
110 lines
5.5 KiB
HTML
110 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ZDDC Browse</title>
|
|
<link rel="icon" type="image/svg+xml" href="{{FAVICON}}">
|
|
<style>
|
|
{{CSS_PLACEHOLDER}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="app-header">
|
|
<div class="header-left">
|
|
<svg class="app-header__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-hidden="true">
|
|
<rect width="64" height="64" rx="12" fill="#1e3a5f"/>
|
|
<g fill="#fff">
|
|
<rect x="14" y="18" width="36" height="7"/>
|
|
<polygon points="43,25 50,25 21,43 14,43"/>
|
|
<rect x="14" y="43" width="36" height="7"/>
|
|
</g>
|
|
</svg>
|
|
<div class="header-title-group">
|
|
<span class="app-header__title">ZDDC Browse</span>
|
|
<span class="build-timestamp">{{BUILD_LABEL}}</span>
|
|
</div>
|
|
<button id="addDirectoryBtn" class="btn btn-primary">Select Directory</button>
|
|
<button id="refreshHeaderBtn" class="btn btn-secondary hidden" title="Refresh listing" aria-label="Refresh listing">⟳</button>
|
|
</div>
|
|
<div class="header-right">
|
|
<button id="theme-btn" class="btn btn-secondary" title="Theme: auto (follows OS)" aria-label="Theme: auto (follows OS)">◐</button>
|
|
<button id="help-btn" class="btn btn-secondary" title="Help" aria-label="Help">?</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="appMain">
|
|
<div id="emptyState" class="empty-state">
|
|
<div class="empty-state__inner">
|
|
<h2>ZDDC Browse</h2>
|
|
<p>A simple directory listing for ZDDC archives — and any directory.
|
|
Pick how you want to browse:</p>
|
|
<ul>
|
|
<li><b>Online</b> — when this page is served by zddc-server, the
|
|
listing for the current directory loads automatically.</li>
|
|
<li><b>Local</b> — click <i>Select Directory</i> to pick any folder
|
|
on your computer (Chromium-based browsers).</li>
|
|
</ul>
|
|
<p>Once loaded: click a folder to expand it, <b>shift-click</b>
|
|
to expand its entire subtree (or collapse it again),
|
|
click column headers to sort. Use the 📄 row to filter files
|
|
(and the 📁 row to scope to matching folders) — file matches
|
|
stay visible together with their containing folders.
|
|
Click any file to open it.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="browseRoot" class="browse-root hidden">
|
|
<div class="toolbar">
|
|
<nav class="breadcrumbs" id="breadcrumbs" aria-label="Path"></nav>
|
|
<span class="toolbar__count" id="entryCount"></span>
|
|
</div>
|
|
<div class="browse-table-wrap">
|
|
<table class="browse-table" id="browseTable">
|
|
<thead>
|
|
<tr class="header-row">
|
|
<th data-sort="name" class="col-name sortable">Name <span class="sort-arrow"></span></th>
|
|
<th data-sort="size" class="col-size sortable">Size <span class="sort-arrow"></span></th>
|
|
<th data-sort="ext" class="col-ext sortable">Type <span class="sort-arrow"></span></th>
|
|
<th data-sort="date" class="col-date sortable">Modified <span class="sort-arrow"></span></th>
|
|
</tr>
|
|
<tr class="filter-row filter-row--file" title="Filter files">
|
|
<th class="col-name">
|
|
<span class="filter-row__icon" aria-hidden="true">📄</span>
|
|
<input type="text" class="column-filter" data-filter="file"
|
|
placeholder="filter files…" spellcheck="false"
|
|
aria-label="Filter by file name">
|
|
</th>
|
|
<th class="col-size"></th>
|
|
<th class="col-ext">
|
|
<input type="text" class="column-filter" data-filter="ext"
|
|
placeholder="ext…" spellcheck="false"
|
|
aria-label="Filter by extension">
|
|
</th>
|
|
<th class="col-date"></th>
|
|
</tr>
|
|
<tr class="filter-row filter-row--folder" title="Filter folders">
|
|
<th class="col-name">
|
|
<span class="filter-row__icon" aria-hidden="true">📁</span>
|
|
<input type="text" class="column-filter" data-filter="folder"
|
|
placeholder="filter folders…" spellcheck="false"
|
|
aria-label="Filter by folder name">
|
|
</th>
|
|
<th class="col-size"></th>
|
|
<th class="col-ext"></th>
|
|
<th class="col-date"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="browseTbody"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<div id="statusBar" class="status-bar"></div>
|
|
|
|
<script>
|
|
{{JS_PLACEHOLDER}}
|
|
</script>
|
|
</body>
|
|
</html>
|