make letter groups collapsible manually

Author: TamaroWalter

amd/build/lettergroup.min.js

@@ -0,0 +1,68 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * JavaScript for the letter group.
+ *
+ * @module     block_townsquare/lettergroup
+ * @copyright  2025 Tamaro Walter
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+const letterboxes = document.getElementsByClassName('ts-letter-box');
+
+const Selectors = {
+    actions: {
+        collapsegroup: '[data-action="block_townsquare/collapse_group"]',
+    },
+};
+
+/**
+ * Init function. Adds event listener to orientation marker of letter group to enable
+ * collapsing a letter group.
+ */
+export function init() {
+    letterboxes.forEach(
+        (element) => {
+            element.style.maxHeight = `${element.scrollHeight}px`;
+            element.setAttribute('expanded', 'true');
+        }
+    );
+
+    document.addEventListener('click', e => {
+        const group = e.target.closest(Selectors.actions.collapsegroup);
+        if (group) {
+            const icon = group.querySelector('i');
+            let groupid = group.dataset.groupid;
+            letterboxes.forEach(
+                (element) => {
+                    if (element.dataset.groupid === groupid) {
+                        if (element.getAttribute('expanded') === 'true') {
+                            icon.classList.remove('fa-chevron-down');
+                            icon.classList.add('fa-chevron-up');
+                            element.style.maxHeight = '0px';
+                            element.setAttribute('expanded', 'false');
+                        } else {
+                            icon.classList.remove('fa-chevron-up');
+                            icon.classList.add('fa-chevron-down');
+                            element.style.maxHeight = `${element.scrollHeight}px`;
+                            element.setAttribute('expanded', 'true');
+                        }
+                    }
+                }
+            );
+        }
+    });
+}

amd/build/lettergroup.min.js.map

@@ -57,6 +57,7 @@ public function get_content(): stdClass {
         $this->page->requires->js_call_amd('block_townsquare/timefilter', 'init');
         $this->page->requires->js_call_amd('block_townsquare/letterfilter', 'init');
         $this->page->requires->js_call_amd('block_townsquare/filtercontroller', 'init');
+        $this->page->requires->js_call_amd('block_townsquare/lettergroup', 'init');
         $this->page->requires->js_call_amd('block_townsquare/usersettings_save', 'init', [$USER->id, $usersettings]);
         $this->page->requires->js_call_amd('block_townsquare/usersettings_reset', 'init', [$USER->id]);
         return $this->content;

amd/src/lettergroup.js

@@ -92,9 +92,11 @@
                         <div class="orientationmarker">
                             <span class="orientationmarker_date">{{day}}</span>
                             <span class="orientationmarker_line" aria-hidden="true"></span>
-                            <i class="orientationmarker_arrow fa fa-chevron-down ml-3 mr-2"></i>
+                            <span class="orientationmarker-collapse" data-action="block_townsquare/collapse_group" data-groupid="{{day}}">
+                                <i class="fa fa-chevron-down ml-3 mr-2"></i>
+                            </span>
                         </div>
-                        <div class="ts-letter-box" id="ts-letters-{{day}}">
+                        <div class="ts-letter-box" data-groupid="{{day}}">
                             {{#letters}}
                                 {{#isbasic}}
                                     {{> block_townsquare/basicletter}}