From mboxrd@z Thu Jan  1 00:00:00 1970
From: andy at warmcat.com (Andy Green)
Date: Thu, 21 Jun 2018 17:34:59 +0800
Subject: [PATCH v2 3/5] ui-shared: introduce line range highlight javascript
In-Reply-To: <152957329993.21285.2517119299142660486.stgit@mail.warmcat.com>
References: <152957329993.21285.2517119299142660486.stgit@mail.warmcat.com>
Message-ID: <152957369980.21285.10699875967486215947.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 */