]> granicus.if.org Git - cgit/commit
cgit.js: line range highlight: introduce javascript
authorAndy Green <andy@warmcat.com>
Thu, 21 Jun 2018 08:56:36 +0000 (16:56 +0800)
committerAndy Green <andy@warmcat.com>
Fri, 29 Jun 2018 06:30:23 +0000 (14:30 +0800)
commitfe549188ddd57eb6b5802206dfd0baa4976bb9fd
tree2233e6b2b4fd92b8e756b270f06b5751b0ad985c
parent7d3b96e760a73a584df393ce1e5324ed21046100
cgit.js: line range highlight: introduce javascript

This adds a small css class, and a clientside js function plus
event registrations in cgit.js, to interpret the # part of the
URL on the client, and apply a highlight to filtered source.

Unlike blame highlight boxes which use generated divs, this
applies a computed absolutely-positioned, transparent div highlight
over the affected line(s) on the client side.

The # part of the URL is defined to not be passed to the server,
so the highlight can't be rendered on the server side.
However this has the advantage that the line range highlight
can operate on /blame/ urls trivially, since it doesn't
conflict with blame's generated div scheme.

pointer-events: none is used on the highlight overlay div to
allow the user to cut-and-paste in the highlit region and
click on links underneath normally.

The JS supports highlighting single lines as before like #n123
and also ranges of lines like #n123-135.

Because the browser can no longer automatically scroll to the
element in the second case, the JS also takes care of extracting
the range start element and scrolling to it dynamically.

Tested on Linux Firefox 60 + Linux Chrome 67

Signed-off-by: Andy Green <andy@warmcat.com>
cgit.css
cgit.js