Make entire groups visible or hidden

Author: TamaroWalter

amd/build/filtercontroller.min.js

@@ -46,15 +46,38 @@ export function init() {
                     let letterfilter = letter.classList.contains('ts_letterfilter_approved');
 
                     // If all filters approve the letter, show the letter.
-                    if (coursefilter && timefilter && letterfilter) {
-                        letter.style.display = 'block';
-                    } else {
-                        letter.style.display = 'none';
-                    }
+                    letter.style.display = (coursefilter && timefilter && letterfilter) ? 'block' : 'none';
+
+                    // Check if the letters group should be visible or not.
+                    updatelettergroup(letter);
                 }
             });
         });
 
         observer.observe(letter, {attributes: true});
     });
 }
+
+/**
+ * Helper function that checks if a letter group should still be visible. Is used if a filter is applied
+ * that could change the visibility of one letter and therefore the letters group.
+ * @param {HTMLElement} letter
+ */
+function updatelettergroup(letter) {
+    // Get the letters group.
+    const group = letter.closest('.ts-lettergroup');
+    if (!group) {
+        return;
+    }
+
+    // Check every group letters visibility.
+    const letters = group.querySelectorAll('.ts-letter-box > *');
+    const anyVisible = Array.from(letters).some(el =>
+        el.classList.contains('ts_coursefilter_approved') &&
+        el.classList.contains('ts_timefilter_approved') &&
+        el.classList.contains('ts_letterfilter_approved')
+    );
+
+    // Group only gets shown if at least one element is visible.
+    group.style.display = anyVisible ? 'block' : 'none';
+}

amd/build/filtercontroller.min.js.map

@@ -88,18 +88,26 @@
         <div class=" col-md-9 townsquare_content">
             <div class="townsquare_letters">
                 {{#content}}
-                    {{> block_townsquare/orientationmarker}}
-                    {{#letters}}
-                        {{#isbasic}}
-                            {{> block_townsquare/basicletter}}
-                        {{/isbasic}}
-                        {{#isactivitycompletion}}
-                            {{> block_townsquare/activitycompletionletter}}
-                        {{/isactivitycompletion}}
-                        {{#ispost}}
-                            {{> block_townsquare/postletter}}
-                        {{/ispost}}
-                    {{/letters}}
+                    <div class="ts-lettergroup" id="ts-lettergroup-{{day}}">
+                        <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>
+                        </div>
+                        <div class="ts-letter-box" id="ts-letters-{{day}}">
+                            {{#letters}}
+                                {{#isbasic}}
+                                    {{> block_townsquare/basicletter}}
+                                {{/isbasic}}
+                                {{#isactivitycompletion}}
+                                    {{> block_townsquare/activitycompletionletter}}
+                                {{/isactivitycompletion}}
+                                {{#ispost}}
+                                    {{> block_townsquare/postletter}}
+                                {{/ispost}}
+                            {{/letters}}
+                        </div>
+                    </div>
                 {{/content}}
             </div>
         </div>