PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-08-10 15:21:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

repertoire: HTMX OOB swaps for filter columns + fix fading edge cases

Browse Source 
Switch from swapping the entire #repertoire-index block to targeted
hx-swap-oob swaps: only the <ul> list elements are replaced, while
section headers and accordion chrome stay in the DOM untouched.

- Filter column <ul>s get IDs (rep-list-years, rep-list-ap, etc.)
  and render with hx-swap-oob=true on HTMX requests
- Students <ul> gets id=rep-students as main swap target
- Filter buttons now target #rep-students instead of #repertoire-index
- Server sets $isOob=true when rendering HTMX partial responses
- Accordion re-init on swap no longer needed (headers never replaced)
- Scroll-restore updated to capture/restore per <ul> ID

Fading fixes:
- Restore rep-entry--faded class with simplified logic: any active
  filter fades entries whose matched flag is false (removed the
  $colHasMatch gate that prevented fading when a column had no matches)
- Add $noResults guard: when matched_ids is empty (zero theses match
  all active filters), force-fade all non-selected entries across ALL
  columns. This covers the keyword edge case where per-column matched
  is computed excluding the keyword filter (many-to-many), causing
  keywords to appear valid even though the full intersection is empty.
This commit is contained in:
Pontoporeia
2026-07-10 12:59:12 +02:00
parent f86deaf02f
commit ec9c140ba2
4 changed files with 113 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/partials/repertoire-index.php
+89 -39
View File
@@ -3,11 +3,17 @@
* Partial: répertoire index columns.
* Rendered both on full page load and as HTMX partial swap.
*
* When $isOob is true, renders only <ul> elements with hx-swap-oob attributes
* for the filter columns, and the students <ul> as the main swap target.
*
* Expected variables:
* $repData array output of Database::getRepertoireFilterData()
* $activeFilters array{years:int[], ap:string[], or:string[], fi:string[], kw:string[]}
* $repData array output of Database::getRepertoireFilterData()
* $activeFilters array{years:int[], ap:string[], or:string[], fi:string[], kw:string[]}
* $isOob bool (optional) render OOB-only response for HTMX swaps
*/
$isOob = $isOob ?? false;
$activeSets = [
'years' => array_map('strval', $activeFilters['years'] ?? []),
'ap' => $activeFilters['ap'] ?? [],
@@ -58,60 +64,45 @@ function repToggleUrl(array $sets, string $dim, string $value): string {
return '/repertoire' . ($qs ? '?' . $qs : '');
}
/**
* Render a single filter entry <li>.
*
* Fading logic: when any filter is active, entries that would yield zero
* results (matched=false) are faded and disabled. The selected entry itself
* is never faded.
*/
function repFilterEntry(
array $item,
string $dim,
array $activeSets,
bool $anyActive,
bool $noResults,
string $hx,
): void {
$val = (string)$item['value'];
$isActive = in_array($val, $activeSets[$dim], true);
$isFaded = $anyActive && ($noResults || !$item['matched']) && !$isActive;
$cls = 'rep-entry'
. ($isActive ? ' rep-entry--selected' : '');
. ($isActive ? ' rep-entry--selected' : '')
. ($isFaded ? ' rep-entry--faded' : '');
$url = repToggleUrl($activeSets, $dim, $val);
?>
<li>
<button type="button" class="<?= $cls ?>"
aria-pressed="<?= $isActive ? 'true' : 'false' ?>"
hx-get="<?= htmlspecialchars($url) ?>" <?= $hx ?>>
<?= $isFaded ? 'disabled' : "hx-get=\"" . htmlspecialchars($url) . "\" $hx" ?>>
<?= htmlspecialchars($dim === 'ap' ? formatApDisplay($val) : $val) ?>
</button>
</li>
<?php
}
// ── Column definitions ──────────────────────────────────────────────────────
$hx = 'hx-target="#repertoire-index" hx-swap="outerHTML" hx-push-url="true" hx-indicator="#rep-indicator"';
$filterColumns = [
['dataKey' => 'years', 'dim' => 'years', 'heading' => 'Années'],
['dataKey' => 'ap_programs', 'dim' => 'ap', 'heading' => 'Ateliers Pluridisciplinaires'],
['dataKey' => 'orientations', 'dim' => 'or', 'heading' => 'Orientations'],
['dataKey' => 'finality_types', 'dim' => 'fi', 'heading' => 'Finalité du&nbsp;Master'],
['dataKey' => 'keywords', 'dim' => 'kw', 'heading' => 'Mots-clés'],
];
/**
* Render the students <ul> (no section chrome).
*/
function renderStudentsList(array $studentWorks): void {
?>
<div id="repertoire-index" class="repertoire-index">
<?php
// Render filter columns in the correct left-to-right order.
// Students column (non-filter) is inserted between keywords and AP/or/fi/years.
$renderOrder = ['years', 'ap', 'or', 'fi', 'students', 'kw'];
foreach ($renderOrder as $colKey):
if ($colKey === 'students'): ?>
<!-- ÉTUDIANTES -->
<section class="repertoire-col rep-accordion" data-col="students">
<h2>
<span class="rep-accordion__heading-text">Étudiant·es</span>
<button type="button" class="rep-accordion__toggle" aria-expanded="false">
Étudiant·es
<span class="rep-accordion__chevron" aria-hidden="true"></span>
</button>
</h2>
<div class="rep-accordion__panel">
<ul>
<ul id="rep-students">
<?php if (empty($studentWorks)): ?>
<li class="rep-empty">—</li>
<?php else: ?>
@@ -135,13 +126,72 @@ foreach ($renderOrder as $colKey):
<?php endforeach; ?>
<?php endif; ?>
</ul>
<?php
}
// ── Column definitions ──────────────────────────────────────────────────────
$hx = 'hx-target="#rep-students" hx-swap="outerHTML" hx-push-url="true" hx-indicator="#rep-indicator"';
$anyActive = !empty($activeSets['years']) || !empty($activeSets['ap'])
|| !empty($activeSets['or']) || !empty($activeSets['fi'])
|| !empty($activeSets['kw']);
$noResults = $anyActive && empty($repData['matched_ids']);
$filterColumns = [
['dataKey' => 'years', 'dim' => 'years', 'heading' => 'Années'],
['dataKey' => 'ap_programs', 'dim' => 'ap', 'heading' => 'Ateliers Pluridisciplinaires'],
['dataKey' => 'orientations', 'dim' => 'or', 'heading' => 'Orientations'],
['dataKey' => 'finality_types', 'dim' => 'fi', 'heading' => 'Finalité du&nbsp;Master'],
['dataKey' => 'keywords', 'dim' => 'kw', 'heading' => 'Mots-clés'],
];
// Render order: students column is inserted between fi and kw
$renderOrder = ['years', 'ap', 'or', 'fi', 'students', 'kw'];
// ── OOB response: only <ul> elements, no section chrome ─────────────────────
if ($isOob):
foreach ($renderOrder as $colKey):
if ($colKey === 'students'):
renderStudentsList($studentWorks);
else:
$col = array_values(array_filter($filterColumns, fn($c) => $c['dim'] === $colKey))[0];
$listId = 'rep-list-' . $colKey;
?>
<ul id="<?= $listId ?>" hx-swap-oob="true">
<?php foreach ($repData[$col['dataKey']] as $item):
repFilterEntry($item, $col['dim'], $activeSets, $anyActive, $noResults, $hx);
endforeach; ?>
</ul>
<?php endif;
endforeach;
return; // renderRepertoirePartial will exit() after include
endif;
// ── Full page load ──────────────────────────────────────────────────────────
?>
<div id="repertoire-index" class="repertoire-index">
<?php
foreach ($renderOrder as $colKey):
if ($colKey === 'students'): ?>
<!-- ÉTUDIANTES -->
<section class="repertoire-col rep-accordion" data-col="students">
<h2>
<span class="rep-accordion__heading-text">Étudiant·es</span>
<button type="button" class="rep-accordion__toggle" aria-expanded="false">
Étudiant·es
<span class="rep-accordion__chevron" aria-hidden="true"></span>
</button>
</h2>
<div class="rep-accordion__panel">
<?php renderStudentsList($studentWorks); ?>
</div>
</section>
<?php else:
$col = array_values(array_filter($filterColumns, fn($c) => $c['dim'] === $colKey))[0];
// Count active filters in this column for the badge
$activeCount = count($activeSets[$col['dim']]);
$listId = 'rep-list-' . $colKey;
?>
<section class="repertoire-col rep-accordion" data-col="<?= $col['dim'] ?>">
<h2>
@@ -155,9 +205,9 @@ foreach ($renderOrder as $colKey):
</button>
</h2>
<div class="rep-accordion__panel">
<ul>
<ul id="<?= $listId ?>">
<?php foreach ($repData[$col['dataKey']] as $item):
repFilterEntry($item, $col['dim'], $activeSets, $hx);
repFilterEntry($item, $col['dim'], $activeSets, $anyActive, $noResults, $hx);
endforeach; ?>
</ul>
</div>