Mermutef/LMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Learn: remember expanded sections, open only in the last chapter by default

Browse Source
This commit is contained in:
Vladislav Kopnin
2026-09-17 20:41:54 +03:00
parent 3730c1f173
commit ac7f1d7168
3 changed files with 25 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/main/resources/templates/fragments/base.html
View File

@@ -35,12 +35,30 @@
function closeModal(id){ var d=document.getElementById(id); if(d) d.close(); }
function openModalData(btn){ openModal(btn.dataset.modal); }
function closeModalData(btn){ closeModal(btn.dataset.modal); }
function sectionStateKey(id){ return 'lms-section-open:' + id; }
function applySectionState(acc){
var id = acc.getAttribute('data-section-id');
var stored = null;
try { stored = id ? localStorage.getItem(sectionStateKey(id)) : null; } catch (e) { /* приватный режим */ }
var open = stored === '1' ? true
: stored === '0' ? false
: acc.getAttribute('data-default-open') === 'true';
acc.classList.toggle('collapsed', !open);
var btn = acc.querySelector('.sub-toggle');
if (btn) btn.setAttribute('aria-expanded', open ? 'true' : 'false');
}
function initSections(){
document.querySelectorAll('.sub-acc[data-section-id]').forEach(applySectionState);
}
function toggleSection(btn){
var acc = btn.closest('.sub-acc');
if (!acc) return;
var collapsed = acc.classList.toggle('collapsed');
btn.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
var id = acc.getAttribute('data-section-id');
if (id) { try { localStorage.setItem(sectionStateKey(id), collapsed ? '0' : '1'); } catch (e) { /* приватный режим */ } }
}
document.addEventListener('DOMContentLoaded', initSections);
</script>
</head>
<body>

5
web/src/main/resources/templates/learn/chapter.html
View File

@@ -47,12 +47,13 @@
</div>
<div class="card card-body chapter-card mb-4" data-section-list>
<div th:each="section : ${chapter.sections}" class="sub-acc" th:attr="data-section-id=${section.id}">
<div th:each="section : ${chapter.sections}" class="sub-acc collapsed"
th:attr="data-section-id=${section.id}">
<div class="sub-head sort-row">
<span th:if="${currentUser != null and currentUser.admin}" class="drag-handle" draggable="true"
th:attr="data-drag-kind='section',data-drag-id=${section.id}"
title="Перетащите мышью: изменить порядок разделов">⠿</span>
<button type="button" class="sub-toggle" aria-expanded="true" onclick="toggleSection(this)"
<button type="button" class="sub-toggle" aria-expanded="false" onclick="toggleSection(this)"
title="Свернуть или развернуть раздел">
<span class="sub-arrow" aria-hidden="true"></span>
</button>

7
web/src/main/resources/templates/learn/index.html
View File

@@ -27,7 +27,7 @@
Материалы ещё не добавлены.
</div>
<div th:each="chapter : ${tree?.chapters}" class="card card-body chapter-card mb-4"
<div th:each="chapter, chStat : ${tree?.chapters}" class="card card-body chapter-card mb-4"
th:attr="data-chapter-id=${chapter.id}">
<div class="sort-row">
<span th:if="${currentUser != null and currentUser.admin}" class="drag-handle" draggable="true"
@@ -57,12 +57,13 @@
<div data-section-list>
<p th:if="${#lists.isEmpty(chapter.sections)}" class="text-sm text-muted mt-2 mb-0">Разделов пока нет</p>
<div th:each="section : ${chapter.sections}" class="sub-acc" th:attr="data-section-id=${section.id}">
<div th:each="section : ${chapter.sections}" class="sub-acc collapsed"
th:attr="data-section-id=${section.id},data-default-open=${chStat.last}">
<div class="sub-head sort-row">
<span th:if="${currentUser != null and currentUser.admin}" class="drag-handle" draggable="true"
th:attr="data-drag-kind='section',data-drag-id=${section.id}"
title="Перетащите мышью: изменить порядок или перенести раздел">⠿</span>
<button type="button" class="sub-toggle" aria-expanded="true" onclick="toggleSection(this)"
<button type="button" class="sub-toggle" aria-expanded="false" onclick="toggleSection(this)"
title="Свернуть или развернуть раздел">
<span class="sub-arrow" aria-hidden="true"></span>
</button>