Diff options
| author | Bryce Kwon <bryce@brycekwon.com> | |
|---|---|---|
| committer | Bryce Kwon <bryce@brycekwon.com> | |
| commit | ||
| parent | ||
| tree | ||
| download | ||
Highlight and centre fragment-targeted lines
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/cgit.css | 31 | |
| -rw-r--r-- | assets/cgit.js | 48 |
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. */ |