Display: LP: Improve styles for accordion when lp.lp_view_accordion is set - refs BT#21588

Author: AngelFQC

assets/css/scorm.scss

@@ -645,6 +645,12 @@ See https://support.chamilo.org/issues/6976
     }
 
     &.scorm_item_section {
+        &.accordion {
+            .section {
+                @apply cursor-pointer;
+            }
+        }
+
         .section {
             @apply py-3 pr-4 bg-no-repeat bg-left relative bg-gray-10
                 after:block after:absolute after:bottom-0 after:left-0 after:right-0 after:mr-4 after:border-b after:border-gray-25
@@ -820,4 +826,14 @@ See https://support.chamilo.org/issues/6976
 
 .item-children {
     @apply bg-white;
+
+    .accordion + & {
+        @apply hidden;
+    }
+
+    .accordion.active + &,
+    .accordion + &:has(> .scorm_highlight),
+    &:has(& .scorm_highlight) {
+        @apply block;
+    }
 }

assets/js/legacy/lp.js

@@ -39,4 +39,8 @@ document.addEventListener("DOMContentLoaded", (event) => {
       }
     })
   })
+
+  document
+    .querySelectorAll(".accordion")
+    .forEach((accordion) => accordion.addEventListener("click", () => accordion.classList.toggle("active")))
 })

src/CoreBundle/Resources/views/LearnPath/scorm_list.html.twig

@@ -1,21 +1,18 @@
 {% autoescape false %}
     {% macro processItem(item, lp_current_item_id, status_list) %}
         {% import _self as self %}
-        {% set itemClass = '' %}
+        {% set itemClass = ' ' %}
         {% if 'dir' == item.itemType %}
-            {% set itemClass = 'scorm_item_section' %}
+            {% set itemClass = itemClass ~ 'scorm_item_section ' %}
         {% endif %}
 
         {% if lp_current_item_id == item.iid %}
-            {% set itemClass = 'scorm_highlight' %}
+            {% set itemClass = itemClass ~ 'scorm_highlight ' %}
         {% endif %}
 
         {% set itemLevel = 'level_' ~ (item.lvl - 1) %}
         {% set itemStatusClass = status_list[item.iid] %}
-        {% set accordionClass = '' %}
-        {% if item.itemType == 'dir' %}
-            {% set accordionClass = 'accordion' %}
-        {% endif %}
+        {% set accordionClass = item.itemType == 'dir' and 'true' == chamilo_settings_get('lp.lp_view_accordion') ? 'accordion' : '' %}
         <div id="toc_{{ item.iid }}"
              class=" scorm_item_normal {{ itemStatusClass }} {{ itemClass }} item-{{ item.itemType }} {{ accordionClass }}">
             {% if item.itemType == 'dir' %}
@@ -119,34 +116,3 @@
         </div>
     {% endif %}
 {% endautoescape %}
-<script>
-  document.addEventListener("DOMContentLoaded", function() {
-    setTimeout(function() {
-      var lpCurrentItemId = '{{ lp_current_item_id }}'
-      var currentElement = document.getElementById("toc_" + lpCurrentItemId)
-
-      if (currentElement) {
-        var parentContainer = currentElement.closest(".item-children")
-        var previousSibling
-
-        if (parentContainer) {
-          previousSibling = parentContainer.previousElementSibling
-        }
-
-        if (previousSibling) {
-          previousSibling.click()
-          var parentContainer2 = previousSibling.closest(".item-children")
-          var previousSibling2
-
-          if (parentContainer2) {
-            previousSibling2 = parentContainer2.previousElementSibling
-          }
-
-          if (previousSibling2) {
-            previousSibling2.click()
-          }
-        }
-      }
-    }, 1000)
-  })
-</script>

src/CoreBundle/Resources/views/LearnPath/view.html.twig

@@ -387,27 +387,5 @@
               {% endif %}
           })
         </script>
-        <script>
-          document.addEventListener("DOMContentLoaded", function() {
-            var acc = document.getElementsByClassName("accordion")
-            var i
-            for (i = 0; i < acc.length; i++) {
-              acc[i].addEventListener("click", function() {
-                this.classList.toggle("active")
-                var panel = this.nextElementSibling
-                if (panel.style.display == "block") {
-                  panel.style.display = "none"
-                } else {
-                  panel.style.display = "block"
-                }
-              })
-            }
-          })
-        </script>
-        <style>
-            .item-children {
-                display: none;
-            }
-        </style>
     {% endautoescape %}
 {% endblock %}