rmsitz/offlineu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add expand all/collapse all to the course tree

Browse Source 
An "Expand all" link above the tree (toggling to "Collapse all" once
everything's open) opens or closes every section at once - on both
the lesson page's sidebar and the dashboard's loaded-course view.
Toggles stay right-aligned per section, matching convention rather
than moving to the left. Label reflects current state on load and
persists through the same remembered-sections mechanism as manual
expand/collapse.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
rmsitz
2026-08-26 10:27:42 -04:00
co-authored by Claude Sonnet 5
parent 9fb193a07e
commit 016acacdb5
5 changed files with 110 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/lesson_view.html
+52 -2
View File
@@ -201,6 +201,7 @@
overflow: hidden;
}
.lesson-sidebar.collapsed .lesson-sidebar-header h3,
.lesson-sidebar.collapsed .tree-container-header,
.lesson-sidebar.collapsed .tree-container {
display: none;
}
@@ -224,9 +225,26 @@
and similarly-named rules. Mirrors course_dashboard.html's tree
styling (shared macro, see _course_tree.html) at a denser size
for the narrower column. */
.lesson-sidebar .tree-container {
.lesson-sidebar .tree-container-header {
display: flex;
justify-content: flex-end;
margin-top: 10px;
}
.lesson-sidebar .expand-all-btn {
background: none;
border: none;
color: var(--accent);
cursor: pointer;
font-size: 0.8em;
text-decoration: underline;
padding: 2px 0;
}
.lesson-sidebar .expand-all-btn:hover {
color: var(--accent-hover);
}
.lesson-sidebar .tree-container {
margin-top: 6px;
}
.lesson-sidebar .tree-item {
margin-bottom: 5px;
}
@@ -846,7 +864,10 @@
<h3>Course Outline</h3>
<button type="button" class="sidebar-toggle-btn" id="sidebar-toggle-btn" onclick="toggleSidebar()" title="Collapse sidebar">◀</button>
</div>
<div class="tree-container">
<div class="tree-container-header">
<button type="button" class="expand-all-btn" id="sidebar-expand-all-btn" onclick="toggleAllTreeSections('#sidebar-tree-container', this)">Expand all</button>
</div>
<div class="tree-container" id="sidebar-tree-container">
{{ tree.render_tree_node(course.root_node, course.path, lesson) }}
</div>
</div>
@@ -1302,6 +1323,35 @@
current.scrollIntoView({ block: 'center' });
})();
// Expand/collapse every section within a tree at once, toggling
// between the two based on whether everything's already open -
// avoids a one-way "Expand all" with no quick way back.
function toggleAllTreeSections(containerSelector, btnEl) {
const container = document.querySelector(containerSelector);
if (!container) return;
const contents = [...container.querySelectorAll('.tree-content')];
if (!contents.length) return;
const shouldExpand = !contents.every(c => c.classList.contains('expanded'));
contents.forEach(function(content) {
content.classList.toggle('expanded', shouldExpand);
const header = content.previousElementSibling;
const toggle = header ? header.querySelector('.tree-toggle') : null;
if (toggle) toggle.textContent = shouldExpand ? '▼' : '▶';
if (content.dataset.sectionPath) saveSectionExpanded(content.dataset.sectionPath, shouldExpand);
});
if (btnEl) btnEl.textContent = shouldExpand ? 'Collapse all' : 'Expand all';
}
(function initExpandAllLabel() {
const btn = document.getElementById('sidebar-expand-all-btn');
const container = document.getElementById('sidebar-tree-container');
if (!btn || !container) return;
const contents = [...container.querySelectorAll('.tree-content')];
if (contents.length && contents.every(c => c.classList.contains('expanded'))) {
btn.textContent = 'Collapse all';
}
})();
// ---- Sidebar collapse (client-only, remembered per device) ----
function toggleSidebar() {
const sidebar = document.getElementById('lesson-sidebar');