PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-05-06 19:19:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: student name popover preview on /repertoire via htmx

Browse Source
This commit is contained in:
Pontoporeia
2026-04-24 13:11:15 +02:00
parent d961f9533c
commit ede53746ba
18 changed files with 237 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
app/templates/public/repertoire.php
View File

@@ -3,4 +3,60 @@
<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;
// Position the popover next to the hovered student entry
function positionPopover(anchor) {
var rect = anchor.getBoundingClientRect();
var scrollY = window.scrollY || 0;
var scrollX = window.scrollX || 0;
// Place to the right of the column; fall back left if off-screen
var left = rect.right + scrollX + 12;
var top = rect.top + scrollY;
if (left + 320 > window.innerWidth + scrollX) {
left = rect.left + scrollX - 332;
}
popover.style.left = left + 'px';
popover.style.top = top + 'px';
}
// Show popover after HTMX fills it
document.body.addEventListener('htmx:afterSwap', function (e) {
if (e.detail.target !== popover) return;
if (!popover.innerHTML.trim()) return;
popover.hidden = false;
if (currentAnchor) positionPopover(currentAnchor);
});
// Track hovered anchor
document.body.addEventListener('mouseenter', function (e) {
var a = e.target.closest('[data-student-name]');
if (!a) return;
currentAnchor = a;
}, true);
// Hide when leaving BOTH the anchor and the popover
document.body.addEventListener('mouseleave', function (e) {
var a = e.target.closest('[data-student-name]');
var p = e.target.closest('#student-popover');
if (!a && !p) return;
// Small delay so mouse can move into popover
setTimeout(function () {
var hoverAnchor = document.querySelector('[data-student-name]:hover');
var hoverPop = document.querySelector('#student-popover:hover');
if (!hoverAnchor && !hoverPop) {
popover.hidden = true;
popover.innerHTML = '';
currentAnchor = null;
}
}, 120);
}, true);
}());
</script>