From mboxrd@z Thu Jan  1 00:00:00 1970
From: andy at warmcat.com (Andy Green)
Date: Mon, 25 Jun 2018 10:07:46 +0800
Subject: [PATCH v3 5/6] line-range-highlight: onclick handler and range
 selection
In-Reply-To: <20180624113523.GK6584@john.keeping.me.uk>
References: <152980795804.2873.3939128717470466784.stgit@mail.warmcat.com>
 <152980828951.2873.11742118399461829064.stgit@mail.warmcat.com>
 <20180624113523.GK6584@john.keeping.me.uk>
Message-ID: <9c9b5d61-6831-3da5-228b-c5135b51b972@warmcat.com>



On 06/24/2018 07:35 PM, John Keeping wrote:
> 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.

OK.  The quotes are actually mandatory for well-formed html too.

-Andy

>>   		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;
>>