diff --git a/asset/css/search.css b/asset/css/search.css index d824e58..0b38903 100644 --- a/asset/css/search.css +++ b/asset/css/search.css @@ -59,16 +59,13 @@ display: none; } -.search-facet-expand-button::before { - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: "\f0d7"; +.search-facet:not(.search-facet-expanded) .search-facet-collapse-button { + display: none; } -.search-facet.search-facet-expanded .search-facet-expand-button::before { - content: "\f0d8"; +.search-facet.search-facet-expanded .search-facet-expand-button { + display: none; } - .resource-list { display: flex; } diff --git a/asset/js/facets.js b/asset/js/facets.js index 1d93cab..18d4575 100644 --- a/asset/js/facets.js +++ b/asset/js/facets.js @@ -1,32 +1,79 @@ -document.addEventListener('DOMContentLoaded', function () { - var buttonFilterFacets = document.getElementById('submit-facets'); +document.addEventListener("DOMContentLoaded", function () { + var buttonFilterFacets = document.getElementById("submit-facets"); if (buttonFilterFacets) { - buttonFilterFacets.addEventListener('click', function () { + buttonFilterFacets.addEventListener("click", function () { submitFacets(); }); } - for (const button of document.querySelectorAll('.search-facet .search-facet-expand-button')) { - button.addEventListener('click', function() { - this.closest('.search-facet').classList.toggle('search-facet-expanded'); + var buttonResetFacets = document.getElementById("reset-facets"); + if (buttonResetFacets) { + buttonResetFacets.addEventListener("click", function () { + resetFacets(); }); } + document + .querySelectorAll(".search-facet-expand-button") + .forEach(function (button) { + var icon = document.createElement("i"); + icon.classList.add("fas", "fa-chevron-down"); + button.prepend(icon); + }); + + document + .querySelectorAll(".search-facet-collapse-button") + .forEach(function (button) { + var icon = document.createElement("i"); + icon.classList.add("fas", "fa-chevron-up"); + button.prepend(icon); + }); + + document + .querySelectorAll(".search-facet-toggle-btn") + .forEach(function (button) { + button.addEventListener("click", function () { + var facetName = button.getAttribute("data-facet-name"); + var facet = document.querySelector( + '.search-facet[data-facet-name="' + facetName + '"]', + ); + facet.classList.toggle("search-facet-expanded"); + }); + }); + + function getVisibleFacetNames() { + return new Set( + Array.from( + document.querySelectorAll( + '.search-facet-item input[type="checkbox"]', + ), + ).map((node) => node.dataset.facetName), + ); + } + + function isVisibleFacetParam(key, facetNames) { + for (const facetName of facetNames) { + if (key.startsWith(`limit[${facetName}]`)) { + return true; + } + } + return false; + } + function submitFacets() { var params = new URLSearchParams(window.location.search); + const facetNames = getVisibleFacetNames(); - const facetCheckboxes = Array.from(document.querySelectorAll('.search-facet-item input[type="checkbox"]')); - const facetNames = new Set(facetCheckboxes.map(node => node.dataset.facetName)); - for (const [key, value] of params.entries()) { - for (const facetName of facetNames) { - if (key.startsWith(`limit[${facetName}]`)) { - params.delete(key); - } + for (const [key] of Array.from(params.entries())) { + if (isVisibleFacetParam(key, facetNames)) { + params.delete(key); } } - var checkedBoxes = document.querySelectorAll('input[name^="selectedFacets["]:checked'); - checkedBoxes.forEach(box => { + var checkedBoxes = document.querySelectorAll( + 'input[name^="selectedFacets["]:checked', + ); + checkedBoxes.forEach((box) => { var name = box.dataset.facetName; var value = box.dataset.facetValue; @@ -34,4 +81,9 @@ document.addEventListener('DOMContentLoaded', function () { }); window.location.search = params.toString(); } + + function resetFacets() { + var newParams = new URLSearchParams(); + window.location.search = newParams.toString(); + } }); diff --git a/src/Form/Admin/SearchPageEditForm.php b/src/Form/Admin/SearchPageEditForm.php index 28c9e18..3285c15 100644 --- a/src/Form/Admin/SearchPageEditForm.php +++ b/src/Form/Admin/SearchPageEditForm.php @@ -68,6 +68,18 @@ public function init() ], ]); + $settingsFieldset->add([ + 'name' => 'facet_limit_collapse_label', + 'type' => 'Text', + 'options' => [ + 'label' => 'Facet values collapse button label', // @translate + ], + 'attributes' => [ + 'value' => 'Show less', // @translate + 'required' => true, + ], + ]); + $settingsFieldset->add([ 'name' => 'facet_limit_expand_label', 'type' => 'Text', diff --git a/view/search/facet-link.phtml b/view/search/facet-link.phtml index e8f3a6f..60ba7ae 100644 --- a/view/search/facet-link.phtml +++ b/view/search/facet-link.phtml @@ -1,5 +1,4 @@ headScript()->appendFile($this->assetUrl('js/facets.js', 'Search')); ?> - - +"> + - - > - searchFacetValue($name, (string) $value) ?> + + > + + searchFacetValue($name, (string) $value) ?> + (escapeHtml($count) ?>) - + diff --git a/view/search/facets.phtml b/view/search/facets.phtml index be69271..14e3100 100644 --- a/view/search/facets.phtml +++ b/view/search/facets.phtml @@ -25,42 +25,44 @@ * The fact that you are presently reading this means that you have had * knowledge of the CeCILL license and that you accept its terms. */ -?> -headScript()->appendFile($this->assetUrl('js/facets.js', 'Search')); + +$this->headScript()->appendFile($this->assetUrl("js/facets.js", "Search")); $settings = $this->searchCurrentPage()->settings(); -$facetedFiltering = isset($settings['faceted_filtering']) && $settings['faceted_filtering'] === "1"; +$facetedFiltering = + isset($settings["faceted_filtering"]) && + $settings["faceted_filtering"] === "1"; ?>