From: list at eworm.de (Christian Hesse)
Subject: [PATCH 1/3] ui-shared: introduce line range highlight javascript
Date: Thu, 21 Jun 2018 09:03:47 +0200 [thread overview]
Message-ID: <20180621090347.471c2727@leda> (raw)
In-Reply-To: <152955977062.31282.13926467680412169482.stgit@mail.warmcat.com>
Andy Green <andy at warmcat.com> on Thu, 2018/06/21 13:42:
> This adds a small css class and a function in ui-shared that
> emits canned javascript 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
>
> Signed-off-by: Andy Green <andy at warmcat.com>
> ---
> cgit.css | 8 ++++++++
> ui-shared.c | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++++
> ui-shared.h | 1 +
> 3 files changed, 61 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 {
> + 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/ui-shared.c b/ui-shared.c
> index 082a6f1..c8f4d8f 100644
> --- a/ui-shared.c
> +++ b/ui-shared.c
> @@ -1237,3 +1237,55 @@ 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)
> +{
> + html("<script>\n"
> + "function cgit_line_range_highlight()\n"
> + "{\n"
> + " var h = window.location.hash, l1 = 0, l2 = 0, e,
> t;\n"
> + "\n"
> + " l1 = parseInt(h.substring(2));\n"
> + " t = h.indexOf(\"-\");\n"
> + " if (t >= 1)\n"
> + " l2 = parseInt(h.substring(t + 1));\n"
> + " else\n"
> + " l2 = l1;\n"
> + "\n"
> + " if (l1) {\n"
> + " var lh, t = 0, e1, de;\n"
> + "\n"
> + " e1 = e = document.getElementById('n' +
> l1);\n"
> + " if (e) {\n"
> + "\n"
> + " while (e1) { if (e1.offsetTop) t +=
> e1.offsetTop; e1 = e1.offsetParent; } \n"
> + "\n"
> + " de =
> document.createElement(\"DIV\");"
> + "\n"
> + " de.className = \"line_range\";\n"
> + " de.style.bottom = e.style.bottom;\n"
> + " de.style.top = t + 'px';\n");
> + if (!parent_level)
> + html(" de.style.width =
> e.parentElement.parentElement.parentNode.offsetWidth + 'px';\n");
> + else
> + html(" de.style.width =
> e.parentElement.parentElement.parentNode.parentNode.offsetWidth + 'px';\n");
> + html(" de.style.height = ((l2 - l1 + 1) *
> e.offsetHeight) + 'px';\n"
> + "\n"
> + "
> e.parentElement.parentElement.insertBefore(de,
> e.parentElement.parentElement.firstChild);\n"
> + "\n"
> + " while (l1 <= l2) {\n"
> + " var e1;\n"
> + " e1 =
> document.getElementById('n' + l1++);\n"
> + " e1.style.backgroundColor =
> \"yellow\";\n"
> + " }\n"
> + "\n"
> + " e.scrollIntoView(true);\n"
> + " }\n"
> + " }\n"
> + "}\n"
> + "\n"
> + "document.addEventListener(\"DOMContentLoaded\", function() {"
> + " cgit_line_range_highlight();\n"
> + "}, false);\n"
> + "</script>\n");
> +}
I would prefer to have this in a file cgit.js (much like cgit.css).
> 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 */
>
> _______________________________________________
> CGit mailing list
> CGit at lists.zx2c4.com
> https://lists.zx2c4.com/mailman/listinfo/cgit
--
main(a){char*c=/* Schoene Gruesse */"B?IJj;MEH"
"CX:;",b;for(a/* Best regards my address: */=0;b=c[a++];)
putchar(b-1/(/* Chris cc -ox -xc - && ./x */b/42*2-3)*42);}
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: application/pgp-signature
Size: 488 bytes
Desc: OpenPGP digital signature
URL: <http://lists.zx2c4.com/pipermail/cgit/attachments/20180621/38216df4/attachment.asc>
next prev parent reply other threads:[~2018-06-21 7:03 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 [this message]
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
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=20180621090347.471c2727@leda \
--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).