List for cgit developers and users
 help / color / mirror / Atom feed
From: andy at warmcat.com (Andy Green)
Subject: [PATCH v5-ninjaedit] line-range-highlight: onclick handler and range selection
Date: Tue, 26 Jun 2018 19:51:59 +0800	[thread overview]
Message-ID: <153001391932.28491.16280450695872195581.stgit@mail.warmcat.com> (raw)
In-Reply-To: <153001233989.12484.14002171757728106827.stgit@mail.warmcat.com>

This allows the user to select line ranges simply by clicking on the
line number links.

 - No selected highlit line, or a range already selected, causes the
click to highlight just the clicked line as usual.

 - Clicking on a second line number link when a single line was already
highlit creates a line range highlight, between the lowest and
highest line numbers of the already-selected and newly-selected
line number links.

The order of the clicks is unimportant, you can click the higher
line number link first and then the lower to define the range of
lines equally well.

The implementation is slightly complicated by our single parent
onclick handler not being able to interrupt the already ongoing
processing of the a href #n change from the link click itself.

Rather than bloat every linenumber link with its own onclick handler
defeating this default we simply do it with a single parent
onclick event and apply any computed range url in the existing
hashchange event handler.

Signed-off-by: Andy Green <andy at warmcat.com>
---
 cgit.js    |   34 ++++++++++++++++++++++++++++++++++
 ui-blame.c |    2 +-
 ui-tree.c  |    2 +-
 3 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/cgit.js b/cgit.js
index 114b0c5..3018829 100644
--- a/cgit.js
+++ b/cgit.js
@@ -98,11 +98,45 @@ function cgit_line_range_highlight()
 	t.scrollIntoView(true);
 }
 
+function cgit_line_range_click(e) {
+	var t, m, n = window.location.href.length - window.location.hash.length;
+
+	/* disable passthru to stop needless scrolling by default browser #URL handler */
+	e.stopPropagation();
+	e.preventDefault();
+
+	if (!window.location.hash ||
+	    window.location.hash.indexOf("-") >= 0)
+		t = window.location.href.substring(0, n) +
+		    '#n' + e.target.id.substring(1);
+	else {
+		if (parseInt(window.location.hash.substring(2)) <
+		    parseInt(e.target.id.substring(1)))  /* forwards */
+			t = window.location + '-' + e.target.id.substring(1);
+		else
+			t = window.location.href.substring(0, n) +
+				'#n' + e.target.id.substring(1) + '-' +
+				window.location.href.substring(n + 2);
+	}
+
+	window.history.replaceState(null, null, t);
+
+	cgit_line_range_highlight();
+}
+
 /* we have to use load, because header images can push the layout vertically */
 window.addEventListener("load", function() {
 	cgit_line_range_highlight();
 }, false);
 
+document.addEventListener("DOMContentLoaded", function() {
+	/* event listener cannot override default #URL browser processing,
+	 * requires onclick */
+	var e = document.getElementById("linenumbers");
+	if (e)
+		e.onclick = cgit_line_range_click;
+}, false);
+
 window.addEventListener("hashchange", function() {
 	cgit_line_range_highlight();
 }, false);
diff --git a/ui-blame.c b/ui-blame.c
index 50d0580..c9cca18 100644
--- a/ui-blame.c
+++ b/ui-blame.c
@@ -170,7 +170,7 @@ static void print_object(const struct object_id *oid, const char *path,
 
 	/* Line numbers */
 	if (ctx.cfg.enable_tree_linenumbers) {
-		html("<td class='linenumbers'>");
+		html("<td id='linenumbers' class='linenumbers'>");
 		for (ent = sb.ent; ent; ent = ent->next) {
 			html("<div class='alt'><pre>");
 			emit_blame_entry_linenumber(ent);
diff --git a/ui-tree.c b/ui-tree.c
index e4cb558..f96b845 100644
--- a/ui-tree.c
+++ b/ui-tree.c
@@ -28,7 +28,7 @@ static void print_text_buffer(const char *name, char *buf, unsigned long size)
 	html("<table summary='blob content' class='blob'>\n");
 
 	if (ctx.cfg.enable_tree_linenumbers) {
-		html("<tr><td class='linenumbers'><pre>");
+		html("<tr><td id='linenumbers' class='linenumbers'><pre>");
 		idx = 0;
 		lineno = 0;
 



  reply	other threads:[~2018-06-26 11:51 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
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     ` andy [this message]
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=153001391932.28491.16280450695872195581.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).