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

web/src/main/resources/templates/fragments/base.html

@@ -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>

web/src/main/resources/templates/learn/chapter.html

@@ -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>

web/src/main/resources/templates/learn/index.html

@@ -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>