82 lines
3.1 KiB
JavaScript
82 lines
3.1 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
var section = document.querySelector('.membres-section');
|
|
if (!section) return;
|
|
|
|
// Build the popover element once and append to body
|
|
var popover = document.createElement('div');
|
|
popover.id = 'membre-popover';
|
|
popover.innerHTML =
|
|
'<div class="membre-popover-inner">' +
|
|
'<img class="membre-popover-pic" src="" alt="">' +
|
|
'<div class="membre-popover-info">' +
|
|
'<p class="membre-popover-name"></p>' +
|
|
'<p class="membre-popover-status"></p>' +
|
|
'<p class="membre-popover-domaines"></p>' +
|
|
'<p class="membre-popover-autres"></p>' +
|
|
'</div>' +
|
|
'</div>';
|
|
document.body.appendChild(popover);
|
|
|
|
var pic = popover.querySelector('.membre-popover-pic');
|
|
var elName = popover.querySelector('.membre-popover-name');
|
|
var elStat = popover.querySelector('.membre-popover-status');
|
|
var elDom = popover.querySelector('.membre-popover-domaines');
|
|
var elAut = popover.querySelector('.membre-popover-autres');
|
|
|
|
var visible = false;
|
|
var currentRow = null;
|
|
|
|
// ── Show/hide via event delegation on the section ────────
|
|
section.addEventListener('mouseover', function (e) {
|
|
var row = e.target.closest('tbody tr');
|
|
if (!row || row === currentRow) return;
|
|
currentRow = row;
|
|
|
|
var avatar = row.dataset.avatar || '';
|
|
if (avatar) {
|
|
pic.src = avatar;
|
|
pic.style.display = '';
|
|
} else {
|
|
pic.src = '';
|
|
pic.style.display = 'none';
|
|
}
|
|
|
|
elName.textContent = row.dataset.name || '';
|
|
elStat.textContent = row.dataset.status || '';
|
|
|
|
var domVal = row.dataset.domaines || '';
|
|
elDom.textContent = domVal;
|
|
elDom.style.display = domVal ? '' : 'none';
|
|
|
|
var autVal = row.dataset.autresDomaines || '';
|
|
elAut.innerHTML = autVal.replace(/\n/g, '<br>');
|
|
elAut.style.display = autVal ? '' : 'none';
|
|
|
|
popover.classList.add('is-visible');
|
|
visible = true;
|
|
});
|
|
|
|
section.addEventListener('mouseout', function (e) {
|
|
var row = e.target.closest('tbody tr');
|
|
if (!row) return;
|
|
// only hide when leaving the row entirely (not moving to a child)
|
|
if (e.relatedTarget && row.contains(e.relatedTarget)) return;
|
|
currentRow = null;
|
|
popover.classList.remove('is-visible');
|
|
visible = false;
|
|
});
|
|
|
|
// ── Follow the cursor ─────────────────────────────────────
|
|
document.addEventListener('mousemove', function (e) {
|
|
if (!visible) return;
|
|
var x = e.clientX + 18;
|
|
var y = e.clientY + 18;
|
|
var pw = popover.offsetWidth;
|
|
var ph = popover.offsetHeight;
|
|
if (x + pw > window.innerWidth) x = e.clientX - pw - 8;
|
|
if (y + ph > window.innerHeight) y = e.clientY - ph - 8;
|
|
popover.style.left = x + 'px';
|
|
popover.style.top = y + 'px';
|
|
});
|
|
});
|