mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-05-06 19:19:19 +02:00
63 lines
2.5 KiB
PHP
63 lines
2.5 KiB
PHP
<main class="search-main" id="main-content">
|
|
<h1 class="sr-only">Répertoire</h1>
|
|
<span id="rep-indicator" class="rep-indicator htmx-indicator" aria-hidden="true"></span>
|
|
<?php include APP_ROOT . '/templates/partials/repertoire-index.php'; ?>
|
|
</main>
|
|
<!-- Student popover -->
|
|
<div id="student-popover" class="student-popover" hidden aria-live="polite"></div>
|
|
|
|
<script src="/assets/js/htmx.min.js"></script>
|
|
<script>
|
|
(function () {
|
|
var popover = document.getElementById('student-popover');
|
|
var currentAnchor = null;
|
|
|
|
function position(anchor) {
|
|
var r = anchor.getBoundingClientRect();
|
|
var left = r.right + window.scrollX + 12;
|
|
var top = r.top + window.scrollY;
|
|
if (left + 300 > window.innerWidth + window.scrollX) left = r.left + window.scrollX - 312;
|
|
popover.style.left = left + 'px';
|
|
popover.style.top = top + 'px';
|
|
}
|
|
|
|
// After htmx swaps content in, show and position the popover
|
|
document.body.addEventListener('htmx:afterSwap', function (e) {
|
|
if (e.detail.target !== popover) return;
|
|
popover.hidden = false;
|
|
if (currentAnchor) position(currentAnchor);
|
|
});
|
|
|
|
// On subsequent hovers (already cached by browser / htmx once),
|
|
// just reposition and show — htmx won't re-fire due to `once`,
|
|
// so we handle show/position on mouseenter ourselves.
|
|
document.body.addEventListener('mouseenter', function (e) {
|
|
var a = e.target.closest('[data-student-name]');
|
|
if (!a) return;
|
|
currentAnchor = a;
|
|
// If popover already has this student's content, just show it
|
|
if (popover.dataset.loadedFor === a.dataset.studentName) {
|
|
position(a);
|
|
popover.hidden = false;
|
|
}
|
|
}, true);
|
|
|
|
// Mark which student is loaded after swap
|
|
document.body.addEventListener('htmx:afterSwap', function (e) {
|
|
if (e.detail.target !== popover || !currentAnchor) return;
|
|
popover.dataset.loadedFor = currentAnchor.dataset.studentName;
|
|
});
|
|
|
|
// Hide on mouse leave (both anchor and popover)
|
|
document.body.addEventListener('mouseleave', function (e) {
|
|
if (!e.target.closest('[data-student-name]') && !e.target.closest('#student-popover')) return;
|
|
setTimeout(function () {
|
|
if (!document.querySelector('[data-student-name]:hover') &&
|
|
!document.querySelector('#student-popover:hover')) {
|
|
popover.hidden = true;
|
|
}
|
|
}, 120);
|
|
}, true);
|
|
}());
|
|
</script>
|