From: john at keeping.me.uk (John Keeping)
Subject: [PATCH v2 3/5] ui-shared: introduce line range highlight javascript
Date: Sat, 23 Jun 2018 11:17:25 +0100 [thread overview]
Message-ID: <20180623101725.GA6584@john.keeping.me.uk> (raw)
In-Reply-To: <152957369980.21285.10699875967486215947.stgit@mail.warmcat.com>
On Thu, Jun 21, 2018 at 05:34:59PM +0800, Andy Green wrote:
> This adds a small css class, a clientside js function in
> cgit.js, and ajs inline script caller in ui-shared
> functions 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
> applied a computed absolute, transparent 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
>
> Examples:
>
> https://warmcat.com/git/cgit/tree/ui-shared.c#n1146
> https://warmcat.com/git/cgit/tree/ui-shared.c#n1146-1164
> https://warmcat.com/git/cgit/blame/ui-shared.c#n1146-1164
These examples can move below the "---" since they don't need to be part
of the permanent Git history.
> Signed-off-by: Andy Green <andy at warmcat.com>
> ---
> cgit.css | 8 ++++++++
> cgit.js | 43 +++++++++++++++++++++++++++++++++++++++++++
> ui-shared.c | 14 ++++++++++++++
> ui-shared.h | 1 +
> 4 files changed, 66 insertions(+)
>
> diff --git a/cgit.css b/cgit.css
> index 61bbd49..7cb0fd6 100644
> --- a/cgit.css
> +++ b/cgit.css
> @@ -368,6 +368,14 @@ div#cgit table.blame td.lines > div > pre {
> top: 0;
> }
>
> +div#cgit div.line_range {
It looks like the normal convention for CSS classes is kebab-case rather
than snake_case.
I also wonder if the name should be "highlighed-lines" or
"selected-lines" or something like that to indicate that this isn't just
an arbitrary range of lines but ones that are being pulled out for some
reason.
> + position: absolute;
> + pointer-events: none;
> + left: 0px;
> + z-index: 1;
> + background-color: rgba(255, 255, 0, 0.2);
> +}
> +
> div#cgit table.bin-blob {
> margin-top: 0.5em;
> border: solid 1px black;
> diff --git a/cgit.js b/cgit.js
> index e69de29..6e3473c 100644
> --- a/cgit.js
> +++ b/cgit.js
> @@ -0,0 +1,43 @@
> +function cgit_line_range_highlight(depth)
> +{
> + var h = window.location.hash, l1 = 0, l2 = 0, e, t;
> +
> + l1 = parseInt(h.substring(2));
> + t = h.indexOf("-");
> + if (t >= 1)
> + l2 = parseInt(h.substring(t + 1));
> + else
> + l2 = l1;
> +
> + if (l1) {
> + var lh, t = 0, e1, de;
> +
> + e1 = e = document.getElementById('n' + l1);
> + if (e) {
> +
> + while (e1) { if (e1.offsetTop) t += e1.offsetTop; e1 = e1.offsetParent; }
> +
> + de = document.createElement("DIV");
> +
> + de.className = "line_range";
> + de.style.bottom = e.style.bottom;
> + de.style.top = t + 'px';
> + if (!depth)
> + de.style.width = e.parentElement.parentElement.parentNode.offsetWidth + 'px';
> + else
> + de.style.width = e.parentElement.parentElement.parentNode.parentNode.offsetWidth + 'px';
> + de.style.height = ((l2 - l1 + 1) * e.offsetHeight) + 'px';
> +
> + e.parentElement.parentElement.insertBefore(de, e.parentElement.parentElement.firstChild);
> +
> + while (l1 <= l2) {
> + var e1;
> + e1 = document.getElementById('n' + l1++);
> + e1.style.backgroundColor = "yellow";
> + }
> +
> + e.scrollIntoView(true);
> + }
> + }
> +}
> +
> diff --git a/ui-shared.c b/ui-shared.c
> index 082a6f1..7fd6bad 100644
> --- a/ui-shared.c
> +++ b/ui-shared.c
> @@ -787,6 +787,10 @@ void cgit_print_docstart(void)
> html("<link rel='stylesheet' type='text/css' href='");
> html_attr(ctx.cfg.css);
> html("'/>\n");
> + html("<script type='text/javascript' src='");
> + html_attr(ctx.cfg.js);
> + html("'/></script>\n");
This belongs in the previous patch which adds the .js file support.
> if (ctx.cfg.favicon) {
> html("<link rel='shortcut icon' href='");
> html_attr(ctx.cfg.favicon);
> @@ -1237,3 +1241,13 @@ void cgit_set_title_from_path(const char *path)
> strcat(new_title, ctx.page.title);
> ctx.page.title = new_title;
> }
> +
> +void cgit_emit_line_range_highlight_script(int parent_level)
> +{
> + htmlf("<script>\n"
> + "document.addEventListener(\"DOMContentLoaded\", function() {"
> + " cgit_line_range_highlight(%d);\n"
> + "}, false);\n"
> + "</script>\n", parent_level);
Can we do this unconditionally in the .js file?
Since it handles the case where the target line element isn't found, I
don't think it will cause problems to run this on every page.
> +}
> +
> diff --git a/ui-shared.h b/ui-shared.h
> index e78b5fd..8b0cddc 100644
> --- a/ui-shared.h
> +++ b/ui-shared.h
> @@ -89,4 +89,5 @@ extern void cgit_add_hidden_formfields(int incl_head, int incl_search,
> const char *page);
>
> extern void cgit_set_title_from_path(const char *path);
> +extern void cgit_emit_line_range_highlight_script(int parent_level);
> #endif /* UI_SHARED_H */
next prev parent reply other threads:[~2018-06-23 10:17 UTC|newest]
Thread overview: 73+ messages / expand[flat|nested] mbox.gz Atom feed top
2018-06-20 9:39 Highlighting lines or line ranges in tree view andy
2018-06-21 5:42 ` [PATCH 1/3] ui-shared: introduce line range highlight javascript andy
2018-06-21 7:03 ` list
2018-06-21 7:30 ` andy
2018-06-21 5:42 ` [PATCH 2/3] ui-tree: use the line range highlight script andy
2018-06-21 5:43 ` [PATCH 3/3] ui-blame: " andy
2018-06-21 9:34 ` [PATCH v2 0/5] line range highlight andy
2018-06-21 9:34 ` [PATCH v2 1/5] config: add js andy
2018-06-23 10:20 ` john
2018-06-23 10:34 ` andy
2018-06-21 9:34 ` [PATCH v2 2/5] cgit.js: introduce andy
2018-06-23 10:18 ` john
2018-06-21 9:34 ` [PATCH v2 3/5] ui-shared: introduce line range highlight javascript andy
2018-06-23 10:17 ` john [this message]
2018-06-24 2:37 ` andy
2018-06-21 9:35 ` [PATCH v2 4/5] ui-tree: use the line range highlight script andy
2018-06-21 9:35 ` [PATCH v2 5/5] ui-blame: " andy
2018-06-22 23:01 ` [PATCH v2 1/2] cgit.js: make line range highlight responsive to url changes andy
2018-06-22 23:02 ` [PATCH v2 2/2] cgit.js: line range highlight: improve vertical scroll logic andy
2018-06-23 7:45 ` [PATCH v2] cgit.js: line range highlight: always hook hashchange in case hash added andy
2018-06-24 2:44 ` [PATCH v3 0/6] line range highlight andy
2018-06-24 2:44 ` [PATCH v3 1/6] config: add js andy
2018-06-24 11:01 ` john
2018-06-24 2:44 ` [PATCH v3 2/6] ui-shared: line range highlight: introduce javascript andy
2018-06-24 11:28 ` john
2018-06-25 2:04 ` andy
2018-06-24 2:44 ` [PATCH v3 3/6] cgit.js: line range highlight: make responsive to url changes andy
2018-06-24 2:44 ` [PATCH v3 4/6] cgit.js: line range highlight: improve vertical scroll logic andy
2018-06-24 2:44 ` [PATCH v3 5/6] line-range-highlight: onclick handler and range selection andy
2018-06-24 11:35 ` john
2018-06-25 2:07 ` andy
2018-06-24 2:44 ` [PATCH v3 6/6] line-range-highlight: copy URL to clipboard on click andy
2018-06-24 11:42 ` john
2018-06-24 12:00 ` andy
2018-06-24 13:39 ` john
2018-06-24 15:06 ` andy
2018-06-24 16:03 ` john
2018-06-25 0:46 ` andy
2018-06-25 5:49 ` [PATCH v4 0/6] line range highlight andy
2018-06-25 5:49 ` [PATCH v4 1/6] config: add js andy
2018-06-26 8:03 ` list
2018-06-25 5:49 ` [PATCH v4 2/6] cgit.js: line range highlight: introduce javascript andy
2018-06-25 5:49 ` [PATCH v4 3/6] cgit.js: line range highlight: make responsive to url changes andy
2018-06-25 5:50 ` [PATCH v4 4/6] cgit.js: line range highlight: improve vertical scroll logic andy
2018-06-25 5:50 ` [PATCH v4 5/6] line-range-highlight: onclick handler and range selection andy
2018-06-25 5:50 ` [PATCH v4 6/6] line-range-highlight: copy URL to clipboard UI andy
2018-06-26 11:25 ` [PATCH v5 0/6] line range highlight andy
2018-06-26 11:25 ` [PATCH v5 1/6] config: add js andy
2018-06-26 11:25 ` [PATCH v5 2/6] cgit.js: line range highlight: introduce javascript andy
2018-06-27 18:02 ` Jason
2018-06-27 21:45 ` andy
2018-06-28 23:58 ` [PATCH] cgit.css: add copyright lines andy
2018-06-26 11:25 ` [PATCH v5 3/6] cgit.js: line range highlight: make responsive to url changes andy
2018-06-26 11:25 ` [PATCH v5 4/6] cgit.js: line range highlight: improve vertical scroll logic andy
2018-06-26 11:25 ` [PATCH v5 5/6] line-range-highlight: onclick handler and range selection andy
2018-06-26 11:51 ` [PATCH v5-ninjaedit] " andy
2018-06-26 11:25 ` [PATCH v5 6/6] line-range-highlight: copy URL to clipboard UI andy
2018-06-27 18:07 ` Jason
2018-06-27 23:24 ` andy
2018-06-27 23:30 ` Jason
2018-06-27 23:38 ` andy
2018-06-29 1:39 ` [PATCH v6 0/7] line range highlight andy
2018-06-29 1:40 ` [PATCH v6 1/7] config: add js andy
2018-06-29 6:14 ` list
2018-06-29 6:16 ` [PATCH v6-ninjaedit] " andy
2018-06-29 6:31 ` [PATCH v6-ninjaedit2] " andy
2018-06-29 6:33 ` [PATCH v6-ninjaedit] " list
2018-06-29 1:40 ` [PATCH v6 2/7] cgit.js: line range highlight: introduce javascript andy
2018-06-29 1:40 ` [PATCH v6 3/7] cgit.js: line range highlight: make responsive to url changes andy
2018-06-29 1:40 ` [PATCH v6 4/7] cgit.js: line range highlight: improve vertical scroll logic andy
2018-06-29 1:40 ` [PATCH v6 5/7] line-range-highlight: onclick handler and range selection andy
2018-06-29 1:40 ` [PATCH v6 6/7] line-range-highlight: burger menu and popup menu andy
2018-06-29 1:40 ` [PATCH v6 7/7] line-range-highlight: copy text andy
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20180623101725.GA6584@john.keeping.me.uk \
--to=cgit@lists.zx2c4.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for NNTP newsgroup(s).