List for cgit developers and users
 help / color / mirror / Atom feed
From: andy at warmcat.com (Andy Green)
Subject: [PATCH v2 3/5] ui-shared: introduce line range highlight javascript
Date: Thu, 21 Jun 2018 17:34:59 +0800	[thread overview]
Message-ID: <152957369980.21285.10699875967486215947.stgit@mail.warmcat.com> (raw)
In-Reply-To: <152957329993.21285.2517119299142660486.stgit@mail.warmcat.com>

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

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 {
+	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");
+
 	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);
+}
+
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 */



  parent reply	other threads:[~2018-06-21  9:34 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   ` andy [this message]
2018-06-23 10:17     ` [PATCH v2 3/5] ui-shared: introduce line range highlight javascript 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=152957369980.21285.10699875967486215947.stgit@mail.warmcat.com \
    --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).