Highlight and center fragment-targeted lines

2 files changed, 79 insertions, 0 deletions

diff --git a/assets/cgit.css b/assets/cgit.css
index 46dfbba..619e46c 100644
--- a/assets/cgit.css
+++ b/assets/cgit.css
@@ -32,6 +32,9 @@ div#cgit {
 	--upd:           light-dark(#0000cc, #6ea8fe);
 	--hunk:          light-dark(#000099, #7aa2f7);
 	--accent:        light-dark(#cc0000, #ff6b6b);
+	/* Faded yellow wash for the fragment-targeted source line. Kept
+	 * translucent so it reads over any token colour in both themes. */
+	--line-hl:       light-dark(rgba(212, 167, 44, 0.18), rgba(224, 192, 80, 0.14));
 
 	--notes-bg:      light-dark(#ffffdd, #33331a);
 	--notes-border:  light-dark(#eeee99, #55551f);
@@ -736,6 +739,34 @@ div#cgit table.blob td.linenumbers a:target:before {
 	content: "\2BA9";
 }
 
+/* Land a fragment-targeted line mid-viewport rather than at the top. */
+div#cgit table.blob td.linenumbers a,
+div#cgit table.blame td.linenumbers a {
+	scroll-margin-top: calc(50vh - 1em);
+}
+
+/* No-JS fallback tints the targeted number itself; cgit.js widens the
+ * highlight into the full-width bar below. */
+div#cgit table.blob td.linenumbers a:target,
+div#cgit table.blame td.linenumbers a:target {
+	background: var(--line-hl);
+	color: var(--fg);
+}
+
+/* Anchor box for the highlight bar cgit.js positions over the target. */
+div#cgit table.blob,
+div#cgit table.blame {
+	position: relative;
+}
+
+div#cgit div.line-hl {
+	position: absolute;
+	left: 0;
+	right: 0;
+	background: var(--line-hl);
+	pointer-events: none;
+}
+
 /* Tokens produced by the syntax-highlight.lua source filter. */
 div#cgit .hl-comment { color: light-dark(#6a737d, #8b949e); font-style: italic; }
 div#cgit .hl-keyword { color: light-dark(#cf222e, #ff7b72); }
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. */