xamxam/app/public/assets/js/app/repertoire-student-popover.js

/**
 * repertoire-student-popover.js — Student name popover on repertoire page.
 *
 * Shows a popover with HTMX-fetched student details on hover over links
 * with `data-student-name` attribute.
 */
(() => {
	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`;
	}

	document.body.addEventListener(
		"mouseenter",
		(e) => {
			var a = e.target.closest("[data-student-name]");
			if (!a) return;
			currentAnchor = a;
		},
		true,
	);

	document.body.addEventListener("htmx:afterSwap", (e) => {
		if (e.detail.target !== popover) return;
		if (currentAnchor) position(currentAnchor);
		popover.hidden = false;
	});

	document.body.addEventListener(
		"mouseleave",
		(e) => {
			if (
				!e.target.closest("[data-student-name]") &&
				!e.target.closest("#student-popover")
			)
				return;
			setTimeout(() => {
				if (
					!document.querySelector("[data-student-name]:hover") &&
					!document.querySelector("#student-popover:hover")
				) {
					popover.hidden = true;
				}
			}, 120);
		},
		true,
	);
})();