[PATCH v3 5/6] line-range-highlight: onclick handler and range selection

[John Keeping]

On Sun, Jun 24, 2018 at 10:44:49AM +0800, Andy Green wrote:
> 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    |   39 +++++++++++++++++++++++++++++++++++++++
>  ui-blame.c |    2 +-
>  ui-tree.c  |    2 +-
>  3 files changed, 41 insertions(+), 2 deletions(-)
> 
> diff --git a/cgit.js b/cgit.js
> index 29b2c3d..2cfad29 100644
> --- a/cgit.js
> +++ b/cgit.js
> @@ -1,7 +1,15 @@
> +var cgit_line_range_override;
> +
>  function cgit_line_range_highlight()
>  {
>  	var h = window.location.hash, l1 = 0, l2 = 0, e, t;
>  
> +	if (cgit_line_range_override) {
> +		window.location = cgit_line_range_override;
> +		cgit_line_range_override = null;
> +		return;
> +	}
> +
>  	e = document.getElementById("cgit_line_range");
>  	if (e) {
>  		l1 = e.l1;
> @@ -81,10 +89,41 @@ function cgit_line_range_highlight()
>  		e.scrollIntoView(true);
>  }
>  
> +function cgit_line_range_click(e) {
> +	var t = e.target.id;
> +
> +	cgit_line_range_override = null;
> +
> +	/*
> +	 * We are called while window location update from the
> +	 * click on the #n link is underway.  So stash any
> +	 * computed range #url for when the hashchange hander
> +	 * is called, and override it there.
> +	 */
> +
> +	if (window.location.hash && window.location.hash.indexOf("-") < 0)
> +		if (parseInt(window.location.hash.substring(2)) <
> +		    parseInt(t.substring(1))) /* forwards */
> +			cgit_line_range_override =
> +				window.location + '-' + t.substring(1);
> +		else /* backwards */
> +			cgit_line_range_override =
> +				window.location.href.substring(0,
> +					window.location.href.length -
> +					window.location.hash.length) +
> +				'#n' + t.substring(1) + '-' +
> +					window.location.href.substring(
> +						window.location.href.length -
> +						window.location.hash.length + 2);
> +}
> +
>  /* line range highlight */
>  
>  document.addEventListener("DOMContentLoaded", function() {
>  	cgit_line_range_highlight();
> +	var e = document.getElementById("linenumber_td");
> +	if (e)
> +		e.addEventListener("click", cgit_line_range_click, true);
>  }, false);
>  window.addEventListener("hashchange", function() {
>  	cgit_line_range_highlight();
> diff --git a/ui-blame.c b/ui-blame.c
> index 50d0580..0ba8a5a 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=linenumber_td class='linenumbers'>");

We normally quote attribute values in all cases (like for "class" here),
and I think we choose kebab-case over snake_case for HTML identifiers,
by the same principle that we do so for CSS classes.

But can we just call this "linenumbers"?  I don't think we need the
element type in the identifier.

>  		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..6759b11 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=linenumber_td class='linenumbers'><pre>");
>  		idx = 0;
>  		lineno = 0;
>