Highlight and center fragment-targeted lines

1 file changed, 48 insertions, 0 deletions

diff --git a/assets/cgit.js b/assets/cgit.js
index de71a2d..10a34cd 100644
--- a/assets/cgit.js
+++ b/assets/cgit.js
@@ -91,6 +91,54 @@ document.addEventListener("DOMContentLoaded", function () {
 
 })();
 
+/* Wash a faded highlight over the source line targeted by the URL
+ * fragment, #n231, or over a range like #n5-n12. The line anchors live
+ * in the number gutter, so this measures the anchor and lays a
+ * full-width bar across the code at the same height. Without JS the
+ * CSS :target rule still tints the line number itself. */
+
+(function () {
+
+var bar = null;
+
+function place() {
+	var m, a, b, table, box, ra, rb, top, bottom;
+
+	if (bar) {
+		bar.remove();
+		bar = null;
+	}
+	m = /^#n(\d+)(?:-n?(\d+))?$/.exec(location.hash);
+	if (!m)
+		return;
+	a = document.getElementById("n" + m[1]);
+	if (!a)
+		return;
+	b = (m[2] && document.getElementById("n" + m[2])) || a;
+	table = a.closest("table");
+	if (!table)
+		return;
+	box = table.getBoundingClientRect();
+	ra = a.getBoundingClientRect();
+	rb = b.getBoundingClientRect();
+	top = Math.min(ra.top, rb.top) - box.top;
+	bottom = Math.max(ra.bottom, rb.bottom) - box.top;
+	bar = document.createElement("div");
+	bar.className = "line-hl";
+	bar.style.top = top + "px";
+	bar.style.height = (bottom - top) + "px";
+	table.appendChild(bar);
+	/* The browser only scrolls to fragments that name a real id, so
+	 * bring ranges into view ourselves. */
+	if (m[2])
+		a.scrollIntoView({ block: "center" });
+}
+
+document.addEventListener("DOMContentLoaded", place, false);
+window.addEventListener("hashchange", place, false);
+
+})();
+
 /* Colour theme toggle: cycles auto -> light -> dark and remembers the
  * choice. "auto" leaves the page following the system preference via CSS. */