Fix functionality and accessibility for expand/collapse behaviour in …

…UI Filter
leifos-gmbh · Nov 29, 2024 · 511b81c · 511b81c
1 parent 4a70e51
commit 511b81c
Show file tree

Hide file tree

Showing 6 changed files with 319 additions and 229 deletions.
diff --git a/components/ILIAS/UI/resources/js/Input/Container/dist/filter.js b/components/ILIAS/UI/resources/js/Input/Container/dist/filter.js
@@ -22,13 +22,17 @@ var filter = function($) {
         cnt_hid++;
       });
 
-      $(".il-filter-bar-opener").find("button:first").hide();
-      $(".il-filter-bar-opener button").click(function() {
-        $(".il-filter-bar-opener button").toggle();
-        if ($(this).attr("aria-expanded") == "false") {
-          $(this).attr("aria-expanded", "true");
+      //Expand and collapse behaviour
+      var button = $filter.querySelector('.il-filter-bar-opener').querySelector('button');
+      button.addEventListener('click', () => {
+        if (button.getAttribute('aria-expanded') === 'false') {
+          button.setAttribute('aria-expanded', true);
+          showAndHideElementsForExpand($filter);
+          performAjaxCmd($form, 'expand');
         } else {
-          $(this).attr("aria-expanded", "false");
+          button.setAttribute('aria-expanded', false);
+          showAndHideElementsForCollapse($filter);
+          performAjaxCmd($form, 'collapse');
         }
       });
 
@@ -317,6 +321,41 @@ var filter = function($) {
     add_button.find(".il-popover").hide();
   };
 
+  /**
+   * @param filter
+   */
+  var showAndHideElementsForCollapse = function (filter) {
+    filter.querySelector('[data-collapse-glyph-visibility]').dataset.collapseGlyphVisibility = '0';
+    filter.querySelector('[data-expand-glyph-visibility]').dataset.expandGlyphVisibility = '1';
+    filter.querySelector('.il-filter-inputs-active').dataset.activeInputsExpanded = '1';
+    filter.querySelector('.il-filter-input-section').dataset.sectionInputsExpanded = '0';
+  };
+
+  /**
+   * @param filter
+   */
+  var showAndHideElementsForExpand = function (filter) {
+    filter.querySelector('[data-expand-glyph-visibility]').dataset.expandGlyphVisibility = '0';
+    filter.querySelector('[data-collapse-glyph-visibility]').dataset.collapseGlyphVisibility = '1';
+    filter.querySelector('.il-filter-inputs-active').dataset.activeInputsExpanded = '0';
+    filter.querySelector('.il-filter-input-section').dataset.sectionInputsExpanded = '1';
+  };
+
+  /**
+   * @param form
+   * @param cmd
+   */
+  var performAjaxCmd = function (form, cmd) {
+    //Get the URL for GET-request
+    var action = form.attr("data-cmd-" + cmd);
+    //Add the inputs to the URL (for correct rendering within the session) and perform the request as an Ajax-request
+    var formData = form.serialize();
+    $.ajax({
+      type: 'GET',
+      url: action + "&" + formData,
+    });
+  };
+
   /**
    *
    * @param event
@@ -334,24 +373,6 @@ var filter = function($) {
     $el.parents('form').submit();
   };
 
-  /**
-   *
-   * @param event
-   * @param id
-   * @param cmd
-   */
-  var onAjaxCmd = function (event, id, cmd) {
-    //Get the URL for GET-request
-    var $el = $("#" + id);
-    var action = $el.parents('form').attr("data-cmd-" + cmd);
-    //Add the inputs to the URL (for correct rendering within the session) and perform the request as an Ajax-request
-    var formData = $el.parents('form').serialize();
-    $.ajax({
-      type: 'GET',
-      url: action + "&" + formData,
-    });
-  };
-
   /**
    * parse url, based on https://github.com/hirak/phpjs/blob/master/functions/url/parse_url.js
    * @param str
@@ -407,8 +428,7 @@ var filter = function($) {
     onInputUpdate: onInputUpdate,
     onRemoveClick: onRemoveClick,
     onAddClick: onAddClick,
-    onCmd: onCmd,
-    onAjaxCmd: onAjaxCmd
+    onCmd: onCmd
   };
 
 };