Patchwork [3,of,5] hgweb: highlight the line which is linked at

login
register
mail settings
Submitter Alexander Plavin
Date May 31, 2013, 10:35 a.m.
Message ID <235602ad98c5ee757544.1369996510@debian-alexander.dolgopa>
Download mbox | patch
Permalink /patch/1676/
State Rejected, archived
Headers show

Comments

Alexander Plavin - May 31, 2013, 10:35 a.m.
# HG changeset patch
# User Alexander Plavin <me@aplavin.ru>
# Date 1369991128 -14400
#      Fri May 31 13:05:28 2013 +0400
# Node ID 235602ad98c5ee757544110a639b5da88163d320
# Parent  b05d1e3d588bc747083ced741c29829c55c73cd8
hgweb: highlight the line which is linked at

Line corresponding to the URL hash (#l<n>) is highlighted in the views which
show file(s) content.
Laurens Holst - May 31, 2013, 1:04 p.m.
Op 31-05-13 12:35, Alexander Plavin schreef:
> # HG changeset patch
> # User Alexander Plavin <me@aplavin.ru>
> # Date 1369991128 -14400
> #      Fri May 31 13:05:28 2013 +0400
> # Node ID 235602ad98c5ee757544110a639b5da88163d320
> # Parent  b05d1e3d588bc747083ced741c29829c55c73cd8
> hgweb: highlight the line which is linked at
>
> Line corresponding to the URL hash (#l<n>) is highlighted in the views which
> show file(s) content.

Can’t you use a :target CSS style?

~Laurens

> diff -r b05d1e3d588b -r 235602ad98c5 mercurial/templates/paper/footer.tmpl
> --- a/mercurial/templates/paper/footer.tmpl	Thu May 30 20:23:50 2013 +0400
> +++ b/mercurial/templates/paper/footer.tmpl	Fri May 31 13:05:28 2013 +0400
> @@ -1,4 +1,8 @@
> -<script type="text/javascript">process_dates()</script>
> +<script type="text/javascript">
> +process_dates();
> +highlightLines();
> +addOnclickSource();
> +</script>
>   {motd}
>   
>   </body>
> diff -r b05d1e3d588b -r 235602ad98c5 mercurial/templates/static/mercurial.js
> --- a/mercurial/templates/static/mercurial.js	Thu May 30 20:23:50 2013 +0400
> +++ b/mercurial/templates/static/mercurial.js	Fri May 31 13:05:28 2013 +0400
> @@ -3,6 +3,7 @@
>   // Rendering of branch DAGs on the client side
>   // Display of elapsed time
>   // Show or hide diffstat
> +// Highlight source lines
>   //
>   // Copyright 2008 Dirkjan Ochtman <dirkjan AT ochtman DOT nl>
>   // Copyright 2006 Alexander Schremmer <alex AT alexanderweb DOT de>
> @@ -274,3 +275,38 @@
>   	document.getElementById('diffstatdetails').style.display = 'none';
>   	document.getElementById('diffstatexpand').style.display = 'inline';
>   }
> +
> +
> +function highlightLines() {
> +    nodes = document.getElementsByClassName('linkedline');
> +    for (i = 0; i < nodes.length; i++) {
> +        nodes[i].className = nodes[i].className.replace(/(?:^|\s)linkedline(?!\S)/g, '');
> +    }
> +
> +    hash = window.location.hash;
> +    if (hash.substring(0, 2) === '#l') {
> +        id = hash.substring(1);
> +        elem = document.getElementById(id);
> +        switch (elem.tagName) {
> +            case 'A':
> +                elem.parentNode.parentNode.className += ' linkedline';
> +                break;
> +            case 'LI':
> +                elem.className += ' linkedline';
> +                break;
> +        }
> +    }
> +}
> +
> +window.addEventListener("hashchange", highlightLines, false);
> +
> +function addOnclickSource() {
> +    nodes = document.querySelectorAll('li.source');
> +    for (i = 0; i < nodes.length; i++) {
> +        nodes[i].onclick = function (event) {
> +            if (event.offsetX < 0 || event.target.tagName == 'LI') {
> +                window.location.hash = '#' + this.id;
> +            }
> +        };
> +    }
> +}
> diff -r b05d1e3d588b -r 235602ad98c5 mercurial/templates/static/style-paper.css
> --- a/mercurial/templates/static/style-paper.css	Thu May 30 20:23:50 2013 +0400
> +++ b/mercurial/templates/static/style-paper.css	Fri May 31 13:05:28 2013 +0400
> @@ -96,6 +96,7 @@
>   .indexlinks { white-space:nowrap; }
>   .parity0 { background-color: #f0f0f0; }
>   .parity1 { background-color: white; }
> +.linkedline > * { background-color: #ffff99 !important; }
>   .plusline { color: green !important; }
>   .minusline { color: #dc143c !important; } /* crimson */
>   .atline { color: purple !important; }
> _______________________________________________
> Mercurial-devel mailing list
> Mercurial-devel@selenic.com
> http://selenic.com/mailman/listinfo/mercurial-devel
>
Alexander Plavin - May 31, 2013, 3 p.m.
Next I'm going to implement multiple lines highlighting, like e.g. on
github and as I know it's impossible with CSS :target. However, using
:target as a fallback for disabled JS is planned too.


2013/5/31 Laurens Holst <laurens.nospam@grauw.nl>

> Op 31-05-13 12:35, Alexander Plavin schreef:
>
>  # HG changeset patch
>> # User Alexander Plavin <me@aplavin.ru>
>> # Date 1369991128 -14400
>> #      Fri May 31 13:05:28 2013 +0400
>> # Node ID 235602ad98c5ee757544110a639b5d**a88163d320
>> # Parent  b05d1e3d588bc747083ced741c2982**9c55c73cd8
>> hgweb: highlight the line which is linked at
>>
>> Line corresponding to the URL hash (#l<n>) is highlighted in the views
>> which
>> show file(s) content.
>>
>
> Can’t you use a :target CSS style?
>
> ~Laurens
>
>  diff -r b05d1e3d588b -r 235602ad98c5 mercurial/templates/paper/**
>> footer.tmpl
>> --- a/mercurial/templates/paper/**footer.tmpl     Thu May 30 20:23:50
>> 2013 +0400
>> +++ b/mercurial/templates/paper/**footer.tmpl     Fri May 31 13:05:28
>> 2013 +0400
>> @@ -1,4 +1,8 @@
>> -<script type="text/javascript">**process_dates()</script>
>> +<script type="text/javascript">
>> +process_dates();
>> +highlightLines();
>> +addOnclickSource();
>> +</script>
>>   {motd}
>>     </body>
>> diff -r b05d1e3d588b -r 235602ad98c5 mercurial/templates/static/**
>> mercurial.js
>> --- a/mercurial/templates/static/**mercurial.js   Thu May 30 20:23:50
>> 2013 +0400
>> +++ b/mercurial/templates/static/**mercurial.js   Fri May 31 13:05:28
>> 2013 +0400
>> @@ -3,6 +3,7 @@
>>   // Rendering of branch DAGs on the client side
>>   // Display of elapsed time
>>   // Show or hide diffstat
>> +// Highlight source lines
>>   //
>>   // Copyright 2008 Dirkjan Ochtman <dirkjan AT ochtman DOT nl>
>>   // Copyright 2006 Alexander Schremmer <alex AT alexanderweb DOT de>
>> @@ -274,3 +275,38 @@
>>         document.getElementById('**diffstatdetails').style.**display =
>> 'none';
>>         document.getElementById('**diffstatexpand').style.display =
>> 'inline';
>>   }
>> +
>> +
>> +function highlightLines() {
>> +    nodes = document.**getElementsByClassName('**linkedline');
>> +    for (i = 0; i < nodes.length; i++) {
>> +        nodes[i].className = nodes[i].className.replace(/(?**:^|\s)linkedline(?!\S)/g,
>> '');
>> +    }
>> +
>> +    hash = window.location.hash;
>> +    if (hash.substring(0, 2) === '#l') {
>> +        id = hash.substring(1);
>> +        elem = document.getElementById(id);
>> +        switch (elem.tagName) {
>> +            case 'A':
>> +                elem.parentNode.parentNode.**className += ' linkedline';
>> +                break;
>> +            case 'LI':
>> +                elem.className += ' linkedline';
>> +                break;
>> +        }
>> +    }
>> +}
>> +
>> +window.addEventListener("**hashchange", highlightLines, false);
>> +
>> +function addOnclickSource() {
>> +    nodes = document.querySelectorAll('li.**source');
>> +    for (i = 0; i < nodes.length; i++) {
>> +        nodes[i].onclick = function (event) {
>> +            if (event.offsetX < 0 || event.target.tagName == 'LI') {
>> +                window.location.hash = '#' + this.id;
>> +            }
>> +        };
>> +    }
>> +}
>> diff -r b05d1e3d588b -r 235602ad98c5 mercurial/templates/static/**
>> style-paper.css
>> --- a/mercurial/templates/static/**style-paper.css        Thu May 30
>> 20:23:50 2013 +0400
>> +++ b/mercurial/templates/static/**style-paper.css        Fri May 31
>> 13:05:28 2013 +0400
>> @@ -96,6 +96,7 @@
>>   .indexlinks { white-space:nowrap; }
>>   .parity0 { background-color: #f0f0f0; }
>>   .parity1 { background-color: white; }
>> +.linkedline > * { background-color: #ffff99 !important; }
>>   .plusline { color: green !important; }
>>   .minusline { color: #dc143c !important; } /* crimson */
>>   .atline { color: purple !important; }
>> ______________________________**_________________
>> Mercurial-devel mailing list
>> Mercurial-devel@selenic.com
>> http://selenic.com/mailman/**listinfo/mercurial-devel<http://selenic.com/mailman/listinfo/mercurial-devel>
>>
>>
>

Patch

diff -r b05d1e3d588b -r 235602ad98c5 mercurial/templates/paper/footer.tmpl
--- a/mercurial/templates/paper/footer.tmpl	Thu May 30 20:23:50 2013 +0400
+++ b/mercurial/templates/paper/footer.tmpl	Fri May 31 13:05:28 2013 +0400
@@ -1,4 +1,8 @@ 
-<script type="text/javascript">process_dates()</script>
+<script type="text/javascript">
+process_dates();
+highlightLines();
+addOnclickSource();
+</script>
 {motd}
 
 </body>
diff -r b05d1e3d588b -r 235602ad98c5 mercurial/templates/static/mercurial.js
--- a/mercurial/templates/static/mercurial.js	Thu May 30 20:23:50 2013 +0400
+++ b/mercurial/templates/static/mercurial.js	Fri May 31 13:05:28 2013 +0400
@@ -3,6 +3,7 @@ 
 // Rendering of branch DAGs on the client side
 // Display of elapsed time
 // Show or hide diffstat
+// Highlight source lines
 //
 // Copyright 2008 Dirkjan Ochtman <dirkjan AT ochtman DOT nl>
 // Copyright 2006 Alexander Schremmer <alex AT alexanderweb DOT de>
@@ -274,3 +275,38 @@ 
 	document.getElementById('diffstatdetails').style.display = 'none';
 	document.getElementById('diffstatexpand').style.display = 'inline';
 }
+
+
+function highlightLines() {
+    nodes = document.getElementsByClassName('linkedline');
+    for (i = 0; i < nodes.length; i++) {
+        nodes[i].className = nodes[i].className.replace(/(?:^|\s)linkedline(?!\S)/g, '');
+    }
+
+    hash = window.location.hash;
+    if (hash.substring(0, 2) === '#l') {
+        id = hash.substring(1);
+        elem = document.getElementById(id);
+        switch (elem.tagName) {
+            case 'A':
+                elem.parentNode.parentNode.className += ' linkedline';
+                break;
+            case 'LI':
+                elem.className += ' linkedline';
+                break;
+        }
+    }
+}
+
+window.addEventListener("hashchange", highlightLines, false);
+
+function addOnclickSource() {
+    nodes = document.querySelectorAll('li.source');
+    for (i = 0; i < nodes.length; i++) {
+        nodes[i].onclick = function (event) {
+            if (event.offsetX < 0 || event.target.tagName == 'LI') {
+                window.location.hash = '#' + this.id;
+            }
+        };
+    }
+}
diff -r b05d1e3d588b -r 235602ad98c5 mercurial/templates/static/style-paper.css
--- a/mercurial/templates/static/style-paper.css	Thu May 30 20:23:50 2013 +0400
+++ b/mercurial/templates/static/style-paper.css	Fri May 31 13:05:28 2013 +0400
@@ -96,6 +96,7 @@ 
 .indexlinks { white-space:nowrap; }
 .parity0 { background-color: #f0f0f0; }
 .parity1 { background-color: white; }
+.linkedline > * { background-color: #ffff99 !important; }
 .plusline { color: green !important; }
 .minusline { color: #dc143c !important; } /* crimson */
 .atline { color: purple !important; }