diff --git a/components/ILIAS/UI/resources/js/Input/Container/dist/filter.js b/components/ILIAS/UI/resources/js/Input/Container/dist/filter.js index 525712bf2553..25ef0a730949 100755 --- 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 }; }; diff --git a/components/ILIAS/UI/resources/js/Input/Container/src/filter.main.js b/components/ILIAS/UI/resources/js/Input/Container/src/filter.main.js index 2d6d28cb7262..6104565890bd 100755 --- a/components/ILIAS/UI/resources/js/Input/Container/src/filter.main.js +++ b/components/ILIAS/UI/resources/js/Input/Container/src/filter.main.js @@ -1,96 +1,98 @@ -var filter = function($) { - - //Init the Filter - var init = function () { - $("div.il-filter").each(function () { - var $filter = this; - var $form = $($filter).find(".il-standard-form"); - var cnt_hid = 0; - var cnt_bar = 1; - - //Set form action +const filter = function ($) { + // Init the Filter + const init = function () { + $('div.il-filter').each(function () { + const $filter = this; + const $form = $($filter).find('.il-standard-form'); + let cnt_hid = 0; + let cnt_bar = 1; + + // Set form action $form.attr('action', window.location.pathname); - //Filter fields (hide hidden stuff) - $($filter).find(".il-filter-field-status").each(function () { + // Filter fields (hide hidden stuff) + $($filter).find('.il-filter-field-status').each(function () { $hidden_input = this; - if ($($hidden_input).val() === "0") { - $($("div.il-filter .il-popover-container")[cnt_hid]).hide(); + if ($($hidden_input).val() === '0') { + $($('div.il-filter .il-popover-container')[cnt_hid]).hide(); } else { - $($("div.il-filter .il-filter-add-list li")[cnt_hid]).hide(); + $($('div.il-filter .il-filter-add-list li')[cnt_hid]).hide(); } 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 + const 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'); } }); - //Show labels and values in Filter Bar - var rendered_active_inputs = false; - $($filter).find(".il-popover-container").each(function () { - var input_element = $(this).find(":input:not(:button)"); - var value = input_element.val(); - var label = $(this).find(".leftaddon").text(); - var presented_value = getPresentedValueForInput(input_element, value); + // Show labels and values in Filter Bar + let rendered_active_inputs = false; + $($filter).find('.il-popover-container').each(function () { + const input_element = $(this).find(':input:not(:button)'); + const value = input_element.val(); + const label = $(this).find('.leftaddon').text(); + const presented_value = getPresentedValueForInput(input_element, value); - if (presented_value !== "") { - $(".il-filter-inputs-active").find("span[id='" + (cnt_bar) + "']").html(label + ": " + presented_value); + if (presented_value !== '') { + $('.il-filter-inputs-active').find(`span[id='${cnt_bar}']`).html(`${label}: ${presented_value}`); rendered_active_inputs = true; - } - else { - //Do not show Input if it has no applied value - $(".il-filter-inputs-active").find("span[id='" + (cnt_bar) + "']").hide(); + } else { + // Do not show Input if it has no applied value + $('.il-filter-inputs-active').find(`span[id='${cnt_bar}']`).hide(); } cnt_bar++; }); - //Hide Filter Content Area completely if there are no active inputs + // Hide Filter Content Area completely if there are no active inputs if (!rendered_active_inputs) { - $(".il-filter-inputs-active").hide(); + $('.il-filter-inputs-active').hide(); } - //Popover of Add-Button always at the bottom + // Popover of Add-Button always at the bottom $('.input-group .btn.btn-bulky').attr('data-placement', 'bottom'); - //Hide Add-Button when all Input Fields are shown in the Filter at the beginning - var empty_list = true; - var addable_inputs = $($filter).find(".il-filter-add-list").find("li").each(function() { - if ($(this).css("display") !== "none" && $(this).css("visibility") !== "hidden") { + // Hide Add-Button when all Input Fields are shown in the Filter at the beginning + let empty_list = true; + const addable_inputs = $($filter).find('.il-filter-add-list').find('li').each(function () { + if ($(this).css('display') !== 'none' && $(this).css('visibility') !== 'hidden') { empty_list = false; } }); if (empty_list) { - $(".btn-bulky").parents(".il-popover-container").hide(); + $('.btn-bulky').parents('.il-popover-container').hide(); } // Using Return while the focus is on an Input Field imitates a click on the Apply Button - $form.on("keydown", ":input:not(:button)", function(event) { - var key = event.which; + $form.on('keydown', ':input:not(:button)', function (event) { + const key = event.which; if ((key === 13)) { // 13 = Return - var action = $form.attr("data-cmd-apply"); - var url = parse_url(action); - var url_params = url['query_params']; + const action = $form.attr('data-cmd-apply'); + const url = parse_url(action); + const url_params = url.query_params; createHiddenInputs($(this), url_params); - $form.attr('action', url['path']); + $form.attr('action', url.path); $form.submit(); event.preventDefault(); } }); - //Accessibility for complex Input Fields - $(".il-filter-field").keydown(function (event) { - var key = event.which; - //Imitate a click on the Input Field in the Fiter and focus on the Input Element in the Popover + // Accessibility for complex Input Fields + $('.il-filter-field').keydown(function (event) { + const key = event.which; + // Imitate a click on the Input Field in the Fiter and focus on the Input Element in the Popover if ((key === 13) || (key === 32)) { // 13 = Return, 32 = Space $(this).click(); - //Focus on the first checkbox in the Multi Select Input Element in the Popover - var checkboxes = searchInputElementMultiSelect($(this)); + // Focus on the first checkbox in the Multi Select Input Element in the Popover + const checkboxes = searchInputElementMultiSelect($(this)); if (checkboxes.length != 0) { checkboxes[0].focus(); } @@ -110,12 +112,12 @@ var filter = function($) { * @returns {string} */ var getPresentedValueForInput = function (input_element, value) { - var presented_value = ""; + let presented_value = ''; - //Handle value for Multi Select Input - if (input_element.is(":checkbox")) { - var options = []; - input_element.each(function() { + // Handle value for Multi Select Input + if (input_element.is(':checkbox')) { + const options = []; + input_element.each(function () { if ($(this).prop('checked')) { options.push($(this).parent().find('span').text()); } @@ -125,13 +127,13 @@ var filter = function($) { presented_value = active_checkboxes; } } - //Handle value for Select Input - else if (input_element.is("select") && value !== "") { - var selected_option = input_element.find("option:selected").text(); + // Handle value for Select Input + else if (input_element.is('select') && value !== '') { + const selected_option = input_element.find('option:selected').text(); presented_value = selected_option; } - //Handle value for all other Inputs - else if (value !== undefined && value !== "") { + // Handle value for all other Inputs + else if (value !== undefined && value !== '') { presented_value = value; } @@ -144,8 +146,8 @@ var filter = function($) { * @param index * @param val */ - var storeFilterStatus = function ($el, index, val) { - $($el.parents(".il-filter").find(".il-filter-field-status").get(index)).val(val); + const storeFilterStatus = function ($el, index, val) { + $($el.parents('.il-filter').find('.il-filter-field-status').get(index)).val(val); }; /** @@ -154,8 +156,8 @@ var filter = function($) { * @param url_params */ var createHiddenInputs = function ($el, url_params) { - for (var param in url_params) { - var input = ""; + for (const param in url_params) { + const input = ``; $el.parents('form').find('.il-filter-bar').before(input); } }; @@ -165,8 +167,8 @@ var filter = function($) { * @param $el * @param label */ - var searchInputLabel = function ($el, label) { - var input_label = $el.parents(".il-standard-form").find(".input-group-addon.leftaddon").filter(function () { + const searchInputLabel = function ($el, label) { + const input_label = $el.parents('.il-standard-form').find('.input-group-addon.leftaddon').filter(function () { return $(this).text() === label; }); return input_label; @@ -176,8 +178,8 @@ var filter = function($) { * Search for the given Input Element * @param $el */ - var searchInputElement = function ($el) { - var input_element = $el.parents(".il-popover-container").find(":input"); + const searchInputElement = function ($el) { + const input_element = $el.parents('.il-popover-container').find(':input'); return input_element; }; @@ -186,7 +188,8 @@ var filter = function($) { * @param $el */ var searchInputElementMultiSelect = function ($el) { - var checkboxes = $el.parents(".il-popover-container").find(".il-standard-popover-content").children().children().find("input"); + const checkboxes = $el.parents('.il-popover-container').find('.il-standard-popover-content').children().children() + .find('input'); return checkboxes; }; @@ -195,10 +198,10 @@ var filter = function($) { * @param $el * @param label */ - var searchInputField = function ($el, label) { - var input_field = $el.parents(".il-standard-form").find(".btn-link").filter(function () { + const searchInputField = function ($el, label) { + const input_field = $el.parents('.il-standard-form').find('.btn-link').filter(function () { return $(this).text() === label; - }).parents("li"); + }).parents('li'); return input_field; }; @@ -206,8 +209,8 @@ var filter = function($) { * Search for the Add-Button in the Filter * @param $el */ - var searchAddButton = function ($el) { - var add_button = $el.parents(".il-standard-form").find(".btn-bulky").parents(".il-popover-container"); + const searchAddButton = function ($el) { + const add_button = $el.parents('.il-standard-form').find('.btn-bulky').parents('.il-popover-container'); return add_button; }; @@ -216,18 +219,18 @@ var filter = function($) { * @param event * @param signalData */ - var onInputUpdate = function (event, signalData) { + const onInputUpdate = function (event, signalData) { let outputSpan; - var $el = $(signalData.triggerer[0]); - var pop_id = $el.parents(".il-popover").attr("id"); + const $el = $(signalData.triggerer[0]); + const pop_id = $el.parents('.il-popover').attr('id'); if (pop_id) { // we have an already opened popover - outputSpan = document.querySelector("span[data-target='" + pop_id + "']"); + outputSpan = document.querySelector(`span[data-target='${pop_id}']`); } else { // no popover yet, we are still in the same input group and search for the il-filter-field span outputSpan = signalData .triggerer[0] - .closest(".input-group") - .querySelector("span.il-filter-field"); + .closest('.input-group') + .querySelector('span.il-filter-field'); } if (outputSpan) { outputSpan.innerText = signalData.options.string_value; @@ -239,35 +242,35 @@ var filter = function($) { * @param event * @param id */ - var onRemoveClick = function (event, id) { - var $el = $("#" + id); + const onRemoveClick = function (event, id) { + const $el = $(`#${id}`); // Store show/hide status in hidden status inputs - var index = $el.parents(".il-popover-container").index(); - storeFilterStatus($el, index, "0"); + const index = $el.parents('.il-popover-container').index(); + storeFilterStatus($el, index, '0'); - //Remove Input Field from Filter - $el.parents(".il-popover-container").hide(); + // Remove Input Field from Filter + $el.parents('.il-popover-container').hide(); - //Clear Input Field (Text, Numeric, Select) when it is removed - var input_element = searchInputElement($el); - input_element.val(""); + // Clear Input Field (Text, Numeric, Select) when it is removed + const input_element = searchInputElement($el); + input_element.val(''); - //Clear Multi Select Input Field when it is removed - var checkboxes = searchInputElementMultiSelect($el); + // Clear Multi Select Input Field when it is removed + const checkboxes = searchInputElementMultiSelect($el); checkboxes.each(function () { - $(this).prop("checked", false); + $(this).prop('checked', false); }); - checkboxes.parents(".il-popover-container").find(".il-filter-field").html(""); + checkboxes.parents('.il-popover-container').find('.il-filter-field').html(''); - //Add Input Field to Add-Button - var label = $el.parents(".input-group").find(".input-group-addon.leftaddon").html(); - var input_field = searchInputField($el, label); + // Add Input Field to Add-Button + const label = $el.parents('.input-group').find('.input-group-addon.leftaddon').html(); + const input_field = searchInputField($el, label); input_field.show(); - //Show Add-Button when not all Input Fields are shown in the Filter - var add_button = searchAddButton($el); - var addable_inputs = $el.parents(".il-standard-form").find(".il-popover-container:hidden").length; + // Show Add-Button when not all Input Fields are shown in the Filter + const add_button = searchAddButton($el); + const addable_inputs = $el.parents('.il-standard-form').find('.il-popover-container:hidden').length; if (addable_inputs != 0) { add_button.show(); } @@ -278,60 +281,78 @@ var filter = function($) { * @param event * @param id */ - var onAddClick = function (event, id) { - var $el = $("#" + id); - var label = $el.text(); + const onAddClick = function (event, id) { + const $el = $(`#${id}`); + const label = $el.text(); - //Remove Input Field from Add-Button + // Remove Input Field from Add-Button $el.parent().hide(); // Store show/hide status in hidden status inputs - var index = $el.parent().index(); - storeFilterStatus($el, index, "1"); + const index = $el.parent().index(); + storeFilterStatus($el, index, '1'); // Add Input Field to Filter - var input_label = searchInputLabel($el, label); - input_label.parents(".il-popover-container").show(); + const input_label = searchInputLabel($el, label); + input_label.parents('.il-popover-container').show(); - //Focus on the Input Element (Text, Numeric, Select) - var input_element = searchInputElement(input_label); + // Focus on the Input Element (Text, Numeric, Select) + const input_element = searchInputElement(input_label); input_element.focus(); - //Imitate a click on the Input Field in the Fiter (for complex Input Elements which use Popover) - input_label.parent().find(".il-filter-field").click(); + // Imitate a click on the Input Field in the Fiter (for complex Input Elements which use Popover) + input_label.parent().find('.il-filter-field').click(); - //Focus on the first checkbox in the Multi Select Input Element in the Popover - var checkboxes = searchInputElementMultiSelect(input_label); + // Focus on the first checkbox in the Multi Select Input Element in the Popover + const checkboxes = searchInputElementMultiSelect(input_label); if (checkboxes.length != 0) { checkboxes[0].focus(); } - //Hide Add-Button when all Input Fields are shown in the Filter - var add_button = searchAddButton($el); - var addable_inputs = $el.parents(".il-filter").find(".il-filter-add-list").find("li:visible").length; + // Hide Add-Button when all Input Fields are shown in the Filter + const add_button = searchAddButton($el); + const addable_inputs = $el.parents('.il-filter').find('.il-filter-add-list').find('li:visible').length; if (addable_inputs === 0) { add_button.hide(); } - //Hide the Popover of the Add-Button when adding Input Field - add_button.find(".il-popover").hide(); + // Hide the Popover of the Add-Button when adding Input Field + add_button.find('.il-popover').hide(); }; /** - * - * @param event - * @param id + * @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 onCmd = function (event, id, cmd) { - //Get the URL for GET-request, put the components of the query string into hidden inputs and submit the filter - var $el = $("#" + id); - var action = $el.parents('form').attr("data-cmd-" + cmd); - var url = parse_url(action); - var url_params = url['query_params']; - createHiddenInputs($el, url_params); - $el.parents('form').attr('action', url['path']); - $el.parents('form').submit(); + var performAjaxCmd = function (form, cmd) { + // Get the URL for GET-request + const 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 + const formData = form.serialize(); + $.ajax({ + type: 'GET', + url: `${action}&${formData}`, + }); }; /** @@ -340,16 +361,15 @@ var filter = function($) { * @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, - }); + const onCmd = function (event, id, cmd) { + // Get the URL for GET-request, put the components of the query string into hidden inputs and submit the filter + const $el = $(`#${id}`); + const action = $el.parents('form').attr(`data-cmd-${cmd}`); + const url = parse_url(action); + const url_params = url.query_params; + createHiddenInputs($el, url_params); + $el.parents('form').attr('action', url.path); + $el.parents('form').submit(); }; /** @@ -358,8 +378,8 @@ var filter = function($) { * @returns {{}} */ function parse_url(str) { - var query; - var key = [ + let query; + const key = [ 'source', 'scheme', 'authority', @@ -373,13 +393,13 @@ var filter = function($) { 'directory', 'file', 'query', - 'fragment' + 'fragment', ]; - var reg_ex = /^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@\/]*):?([^:@\/]*))?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/; + const reg_ex = /^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@\/]*):?([^:@\/]*))?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/; - var m = reg_ex.exec(str); - var uri = {}; - var i = 14; + const m = reg_ex.exec(str); + const uri = {}; + let i = 14; while (i--) { if (m[i]) { @@ -387,12 +407,12 @@ var filter = function($) { } } - var parser = /(?:^|&)([^&=]*)=?([^&]*)/g; - uri['query_params'] = {}; + const parser = /(?:^|&)([^&=]*)=?([^&]*)/g; + uri.query_params = {}; query = uri[key[12]] || ''; - query.replace(parser, function ($0, $1, $2) { + query.replace(parser, ($0, $1, $2) => { if ($1) { - uri['query_params'][$1] = $2; + uri.query_params[$1] = $2; } }); @@ -404,13 +424,11 @@ var filter = function($) { * Public interface */ return { - onInputUpdate: onInputUpdate, - onRemoveClick: onRemoveClick, - onAddClick: onAddClick, - onCmd: onCmd, - onAjaxCmd: onAjaxCmd + onInputUpdate, + onRemoveClick, + onAddClick, + onCmd, }; - }; export default filter; diff --git a/components/ILIAS/UI/src/Implementation/Component/Input/Container/Filter/Renderer.php b/components/ILIAS/UI/src/Implementation/Component/Input/Container/Filter/Renderer.php index a06ff32c3709..00aa6287e634 100755 --- a/components/ILIAS/UI/src/Implementation/Component/Input/Container/Filter/Renderer.php +++ b/components/ILIAS/UI/src/Implementation/Component/Input/Container/Filter/Renderer.php @@ -68,7 +68,7 @@ protected function renderStandard(Filter\Standard $component, RendererInterface $this->renderToggleButton($tpl, $component, $default_renderer); // render inputs - $this->renderInputs($tpl, $component, $default_renderer); + $this->renderInputs($tpl, $component, $id, $default_renderer); return $tpl->get(); } @@ -100,32 +100,23 @@ protected function renderExpandAndCollapse( $tpl->setVariable("ACTION", $component->getExpandAction()); $tpl->parseCurrentBlock(); - $opener_expand = $f->button()->bulky($f->symbol()->glyph()->expand(), $this->txt("filter"), "") - ->withAdditionalOnLoadCode(fn($id) => "$('#$id').on('click', function(event) { - il.UI.filter.onAjaxCmd(event, '$id', 'expand'); - event.preventDefault(); - });"); - $tpl->setCurrentBlock("action"); $tpl->setVariable("ACTION_NAME", "collapse"); $tpl->setVariable("ACTION", $component->getCollapseAction()); $tpl->parseCurrentBlock(); - $opener_collapse = $f->button()->bulky($f->symbol()->glyph()->collapse(), $this->txt("filter"), "") - ->withAdditionalOnLoadCode(fn($id) => "$('#$id').on('click', function(event) { - il.UI.filter.onAjaxCmd(event, '$id', 'collapse'); - event.preventDefault(); - });"); - - if ($component->isExpanded() == false) { - $opener = [$opener_collapse, $opener_expand]; - $tpl->setVariable("OPENER", $default_renderer->render($opener)); - $tpl->setVariable("INPUTS_ACTIVE_EXPANDED", "in"); - } else { - $opener = [$opener_expand, $opener_collapse]; - $tpl->setVariable("OPENER", $default_renderer->render($opener)); - $tpl->setVariable("INPUTS_EXPANDED", "in"); - } + $tpl->setVariable("TITLE_FILTER", $this->txt("filter")); + $glyph_collapse = $f->symbol()->glyph()->collapse(); + $tpl->setVariable("COLLAPSE_GLYPH", $default_renderer->render($glyph_collapse)); + $glyph_expand = $f->symbol()->glyph()->expand(); + $tpl->setVariable("EXPAND_GLYPH", $default_renderer->render($glyph_expand)); + + $is_expanded = $component->isExpanded(); + $tpl->setVariable("ARIA_EXPANDED", $is_expanded ? "true" : "false"); + $tpl->setVariable("COLLAPSE_GLYPH_VISIBLE", $is_expanded ? 1 : 0); + $tpl->setVariable("EXPAND_GLYPH_VISIBLE", $is_expanded ? 0 : 1); + $tpl->setVariable("ACTIVE_INPUTS_EXPANDED", $is_expanded ? 0 : 1); + $tpl->setVariable("SECTION_INPUTS_EXPANDED", $is_expanded ? 1 : 0); } /** @@ -207,6 +198,7 @@ protected function renderToggleButton( protected function renderInputs( Template $tpl, Filter\Standard $component, + string $component_id, RendererInterface $default_renderer ): void { // pass information on what inputs should be initially rendered @@ -234,6 +226,7 @@ protected function renderInputs( } if (count($component->getInputs()) > 0) { $tpl->setCurrentBlock("active_inputs_section"); + $tpl->setVariable("ID_FILTER_ACTIVE", $component_id); $tpl->parseCurrentBlock(); } diff --git a/components/ILIAS/UI/src/templates/default/Input/tpl.standard_filter.html b/components/ILIAS/UI/src/templates/default/Input/tpl.standard_filter.html index d7f71795f032..c3d9a70da933 100755 --- a/components/ILIAS/UI/src/templates/default/Input/tpl.standard_filter.html +++ b/components/ILIAS/UI/src/templates/default/Input/tpl.standard_filter.html @@ -1,18 +1,26 @@
-
data-cmd-{ACTION_NAME}="{ACTION}"> -
-
{OPENER}
-
{TOGGLE}
+ data-cmd-{ACTION_NAME}="{ACTION}"> +
+
+
- -
- -
- {INPUTS} -
{APPLY} {RESET}
-
- - - +
{TOGGLE}
+
+ +
+ +
+ {INPUTS} +
{APPLY} {RESET}
+
+ + +
diff --git a/templates/default/070-components/UI-framework/Input/_ui-component_filter.scss b/templates/default/070-components/UI-framework/Input/_ui-component_filter.scss index d73ee81035c3..789639c4b992 100755 --- a/templates/default/070-components/UI-framework/Input/_ui-component_filter.scss +++ b/templates/default/070-components/UI-framework/Input/_ui-component_filter.scss @@ -134,6 +134,31 @@ $il-standard-filter-add-input-popover-list-button-width: 100%; width: $il-standard-filter-add-input-popover-list-button-width; } } + + span[data-collapse-glyph-visibility="1"] { + display: inline; + } + span[data-collapse-glyph-visibility="0"] { + display: none; + } + span[data-expand-glyph-visibility="1"] { + display: inline; + } + span[data-expand-glyph-visibility="0"] { + display: none; + } + div[data-active-inputs-expanded="1"] { + display: block; + } + div[data-active-inputs-expanded="0"] { + display: none; + } + div[data-section-inputs-expanded="1"] { + display: flex; + } + div[data-section-inputs-expanded="0"] { + display: none; + } } .il-filter-bar { @@ -148,13 +173,14 @@ $il-standard-filter-add-input-popover-list-button-width: 100%; background-color: $il-main-darker-bg; } - .btn-bulky { + button { min-height: 0px; width: $il-standard-filter-input-group-width; + padding: $il-padding-large-vertical $il-padding-large-horizontal; border: none; background-color: initial; font-size: $il-standard-filter-bar-btn-font-size; - justify-content: left; + text-align: left; .glyph { padding-right: $il-standard-filter-bar-glyph-padding-right; diff --git a/templates/default/delos.css b/templates/default/delos.css index 738698e37411..944eebd77b79 100644 --- a/templates/default/delos.css +++ b/templates/default/delos.css @@ -4248,6 +4248,30 @@ hr.il-divider-with-label { display: block; width: 100%; } +.il-filter span[data-collapse-glyph-visibility="1"] { + display: inline; +} +.il-filter span[data-collapse-glyph-visibility="0"] { + display: none; +} +.il-filter span[data-expand-glyph-visibility="1"] { + display: inline; +} +.il-filter span[data-expand-glyph-visibility="0"] { + display: none; +} +.il-filter div[data-active-inputs-expanded="1"] { + display: block; +} +.il-filter div[data-active-inputs-expanded="0"] { + display: none; +} +.il-filter div[data-section-inputs-expanded="1"] { + display: flex; +} +.il-filter div[data-section-inputs-expanded="0"] { + display: none; +} .il-filter-bar { display: flex; @@ -4260,15 +4284,16 @@ hr.il-divider-with-label { .il-filter-bar .il-filter-bar-opener:hover { background-color: #f0f0f0; } -.il-filter-bar .il-filter-bar-opener .btn-bulky { +.il-filter-bar .il-filter-bar-opener button { min-height: 0px; width: 100%; + padding: 6px 12px; border: none; background-color: initial; font-size: 0.875rem; - justify-content: left; + text-align: left; } -.il-filter-bar .il-filter-bar-opener .btn-bulky .glyph { +.il-filter-bar .il-filter-bar-opener button .glyph { padding-right: 0.3em; } .il-filter-bar .il-filter-bar-toggle {