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

perf: htmx lazy popover with Cache-Control — no pre-render, images load on hover only

Browse Source
This commit is contained in:
Pontoporeia
2026-04-24 13:20:19 +02:00
parent e590d8e035
commit 6eb111a6ab
3 changed files with 38 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,50 +12,49 @@
var popover = document.getElementById('student-popover');
var currentAnchor = null;
function positionPopover(anchor) {
var rect = anchor.getBoundingClientRect();
var scrollY = window.scrollY || 0;
var scrollX = window.scrollX || 0;
var left = rect.right + scrollX + 12;
var top = rect.top + scrollY;
if (left + 300 > window.innerWidth + scrollX) {
left = rect.left + scrollX - 312;
}
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';
}
function showPreview(anchor) {
var tplId = anchor.dataset.preview;
if (!tplId) return;
var tpl = document.getElementById(tplId);
if (!tpl) return;
popover.innerHTML = '';
popover.appendChild(tpl.content.cloneNode(true));
positionPopover(anchor);
// 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;
}
function hidePreview() {
popover.hidden = true;
currentAnchor = null;
}
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-preview]');
var a = e.target.closest('[data-student-name]');
if (!a) return;
currentAnchor = a;
showPreview(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) {
var a = e.target.closest('[data-preview]');
var p = e.target.closest('#student-popover');
if (!a && !p) return;
if (!e.target.closest('[data-student-name]') && !e.target.closest('#student-popover')) return;
setTimeout(function () {
if (!document.querySelector('[data-preview]:hover') &&
if (!document.querySelector('[data-student-name]:hover') &&
!document.querySelector('#student-popover:hover')) {
hidePreview();
popover.hidden = true;
}
}, 120);
}, true);