e2a194a044a9
add an expand all and collapse all button to the Atlas bar (v3.0.114)
- time
- 2026-09-29 19:42 UTC · 1 week ago
- machine
- Junes-MacBook-Pro.local
- agent
- claude-opus-5-5
- session
- match kepr 2 repo page
- parent
- 5d7a600d9f51
↓ kepr-e2a194a0.tar.gzatlas at this save
files changed4 files
package.json+1 −1public/css/kepr.css+6 −2public/js/kepr.js+13 −0src/pages/atlas.ts+1 −0package.json+1 −1
@@ -1,6 +1,6 @@11 {22 "name": "kepr",3- "version": "3.0.113",3+ "version": "3.0.114",44 "private": true,55 "type": "module",66 "scripts": {public/css/kepr.css+6 −2
@@ -655,8 +655,11 @@655655 .atlas-head-link {656656 color: var(--accent);657657 }658-.atlas-search-btn {658+.atlas-fold-btn {659659 margin-left: auto;660+}661+.atlas-fold-btn,662+.atlas-search-btn {660663 padding: 4px 8px;661664 background: transparent;662665 border: 1px solid var(--border);@@ -666,10 +669,12 @@666669 color: var(--text-faint);667670 cursor: pointer;668671 }672+.atlas-fold-btn:hover,669673 .atlas-search-btn:hover {670674 color: var(--accent);671675 border-color: var(--accent-dim);672676 }677+.atlas-fold-btn[hidden],673678 .atlas-search-btn[hidden],674679 .atlas-filter[hidden] {675680 display: none;@@ -677,7 +682,6 @@677682 .atlas-filter {678683 width: 220px;679684 max-width: 100%;680- margin-left: auto;681685 padding: 5px 10px;682686 background: transparent;683687 border: 1px solid var(--border);public/js/kepr.js+13 −0
@@ -434,6 +434,19 @@434434 folder.open = query !== "" || opened.has(folder.dataset.path);435435 }436436 });437+ // One button opens every folder, or, when they all are, closes them all.438+ const fold = document.querySelector(".atlas-fold-btn");439+ const label = () => {440+ fold.textContent = folders.every((folder) => folder.open) ? "collapse all" : "expand all";441+ };442+ fold.addEventListener("click", () => {443+ const open = !folders.every((folder) => folder.open);444+ for (const folder of folders) folder.open = open;445+ label();446+ });447+ for (const folder of folders) folder.addEventListener("toggle", label);448+ label();449+ fold.hidden = folders.length === 0;437450 // The filter waits behind a search button, and folds back into it when left empty.438451 const search = document.querySelector(".atlas-search-btn");439452 search.addEventListener("click", () => {src/pages/atlas.ts+1 −0
@@ -115,6 +115,7 @@115115 <div class="atlas-bar">116116 ${picker(view, saves)}117117 ${at && html`<a class="atlas-head-link mono" href="/${view.repo}#atlas">back to HEAD</a>`}118+<button type="button" class="atlas-fold-btn mono" hidden>expand all</button>118119 <button type="button" class="atlas-search-btn mono" hidden>search</button>119120 <input class="atlas-filter mono" type="search" placeholder="filter by filename" aria-label="Filter files by name" hidden>120121 </div>