Skip to content

Improve facet limitation #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ThibaudGLT wants to merge 6 commits into
base: master
Choose a base branch
from
+114 −46
Open

Improve facet limitation #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c276504
Improve facet limitation
ThibaudGLT Feb 3, 2026
4253ddd
Be more theme-friendly for facet expand/collapse button
ThibaudGLT Apr 7, 2026
e5bfa30
Fix facets: fix limit params and expand/collapse toggle
ThibaudGLT Apr 7, 2026
b4790bb
Fix indent
ThibaudGLT Apr 8, 2026
1bab762
Remove useless deletion in URL params on reset action
ThibaudGLT Apr 8, 2026
cb55a68
Add escape helper on buttons action
ThibaudGLT Apr 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 4 additions & 7 deletions asset/css/search.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
82 changes: 67 additions & 15 deletions asset/js/facets.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,89 @@
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;

params.append(`limit[${name}][]`, value);
});
window.location.search = params.toString();
}

function resetFacets() {
var newParams = new URLSearchParams();
window.location.search = newParams.toString();
}
});
12 changes: 12 additions & 0 deletions src/Form/Admin/SearchPageEditForm.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
20 changes: 10 additions & 10 deletions view/search/facet-link.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<?php

/**
* @var \Laminas\View\Renderer\PhpRenderer $this
* @var bool $active
Expand All @@ -9,23 +8,24 @@
* @var int $count
* @var bool $facetedFiltering
*/
$this->headScript()->appendFile($this->assetUrl('js/facets.js', 'Search'));
?>
<span class="<?php echo $active ? 'active' : 'inactive'; ?>">
<?php if($facetedFiltering) : ?>
<span class="<?php echo $active ? "active" : "inactive"; ?>">
<?php if ($facetedFiltering): ?>
<label>
<input type="checkbox"
name="selectedFacets[<?php echo $this->escapeHtml($name); ?>][]"
value="<?php echo $this->escapeHtml($name); ?>"
value="<?php echo $this->escapeHtml($value); ?>"
data-facet-name="<?php echo $this->escapeHtml($name); ?>"
data-facet-value="<?php echo $this->escapeHtml($value); ?>"
<?php echo $active ? 'checked' : ''; ?>
<?php echo $active ? "checked" : ""; ?>
/>
<?= $this->searchFacetValue($name, (string) $value) ?> (<?= $this->escapeHtml($count) ?>)
</label>
<?php else : ?>
<input type="checkbox" disabled <?= $active ? 'checked' : '' ?>>
<a href="<?php echo $this->escapeHtml($url); ?>"><?= $this->searchFacetValue($name, (string) $value) ?></a>
<?php else: ?>
<input type="checkbox" disabled <?= $active ? "checked" : "" ?>>
<a href="<?php echo $this->escapeHtml($url); ?>">
<?= $this->searchFacetValue($name, (string) $value) ?>
</a>
(<?= $this->escapeHtml($count) ?>)
<?php endif ; ?>
<?php endif; ?>
</span>
35 changes: 21 additions & 14 deletions view/search/facets.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,52 +25,59 @@
* The fact that you are presently reading this means that you have had
* knowledge of the CeCILL license and that you accept its terms.
*/
?>
<?php

/**
* @var \Laminas\View\Renderer\PhpRenderer $this
*/
$this->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";
?>

<?php if (!empty($facets)): ?>
<aside class="search-facets">
<h2>
<?php echo $this->translate('Filters'); ?>
<?php if ($facetedFiltering) : ?>
<button class="fas fa-sync" id="submit-facets" title="<?php echo $this->translate('Filter with selected facets');?>"></button>
<?php echo $this->translate("Filters"); ?>
<?php if ($facetedFiltering): ?>
<button class="fas fa-filter" id="submit-facets" title="<?php echo $this->escapeHtml($this->translate("Filter with selected facets")); ?>"></button>
<button class="fas fa-times" id="reset-facets" title="<?php echo $this->escapeHtml($this->translate("Reset all filters")); ?>"></button>
<?php endif; ?>
</h2>
<ul>
<?php foreach ($facets as $name => $facetValues): ?>
<?php $index = array_search($name, array_keys($facets));?>
<li class="search-facet" data-facet-name="<?= $this->escapeHtml($name) ?>">
<h3><?php echo $this->facetLabel($name); ?></h3>
<div>
<ul class="search-facet-items">
<?php foreach ($facetValues['visible'] as $facetValue): ?>
<?php foreach ($facetValues["visible"] as $facetValue): ?>
<li class="search-facet-item">
<?php echo $this->facetLink($name, $facetValue, $facetedFiltering); ?>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php if (!empty($facetValues['hidden'])): ?>
<?php if (!empty($facetValues["hidden"])): ?>
<div class="hidden-facets">
<ul class="search-facet-items">
<?php foreach ($facetValues['hidden'] as $hiddenValue): ?>
<?php foreach ($facetValues["hidden"] as $hiddenValue): ?>
<li class="search-facet-item">
<?php echo $this->facetLink($name, $hiddenValue, $facetedFiltering); ?>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
<?php if (!empty($facetValues['hidden'])): ?>
<button class="search-facet-expand-button">
<?php echo $this->escapeHtml($this->searchCurrentPage()->settings()['facet_limit_expand_label']); ?>
<?php if (!empty($facetValues["hidden"])): ?>
<button class="search-facet-expand-button search-facet-toggle-btn"
data-facet-name="<?php echo $this->escapeHtml($name); ?>">
<?php echo $this->escapeHtml($settings["facet_limit_expand_label"]); ?>
</button>
<button class="search-facet-collapse-button search-facet-toggle-btn"
data-facet-name="<?php echo $this->escapeHtml($name); ?>">
<?php echo $this->escapeHtml($settings["facet_limit_collapse_label"]); ?>
</button>
<?php endif; ?>
</li>
Expand Down