From patchwork Thu Mar 30 08:29:07 2017 Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: 8bit Subject: [V6] hgweb: expose a followlines UI in filerevision view From: Denis Laxalde X-Patchwork-Id: 19841 Message-Id: <1c360ab5640bc326dd6f.1490862547@sh77.tls.logilab.fr> To: mercurial-devel@mercurial-scm.org Date: Thu, 30 Mar 2017 10:29:07 +0200 # HG changeset patch # User Denis Laxalde # Date 1490819176 -7200 # Wed Mar 29 22:26:16 2017 +0200 # Node ID 1c360ab5640bc326dd6ff70bdee78e4da006dcef # Parent e540846c67e0f838bcdb1db567a57df28d92491c # Available At http://hg.logilab.org/users/dlaxalde/hg # hg pull http://hg.logilab.org/users/dlaxalde/hg -r 1c360ab5640b # EXP-Topic linerange-log/hgweb-filelog hgweb: expose a followlines UI in filerevision view In filerevision view (/file//) we add some event listeners on mouse clicks of elements in the
 block.
Those listeners will capture a range of lines selected between two mouse
clicks and a box inviting to follow the history of selected lines will then
show up. Selected lines (i.e. the block of lines) get a CSS class which make
them highlighted. Selection can be cancelled (and restarted) by either
clicking on the cancel ("x") button in the invite box or clicking on any other
source line. Also clicking twice on the same line will abort the selection and
reset event listeners to restart the process.

As a first step, this action is only advertised by the "cursor: cell" CSS rule
on source lines elements as any other mechanisms would make the code
significantly more complicated. This might be improved later.

All JavaScript code lives in a new "linerangelog.js" file, sourced in
filerevision template (only in "paper" style for now).

diff --git a/contrib/wix/templates.wxs b/contrib/wix/templates.wxs
--- a/contrib/wix/templates.wxs
+++ b/contrib/wix/templates.wxs
@@ -225,6 +225,7 @@
             
             
             
+            
             
             
             
diff --git a/mercurial/templates/paper/filerevision.tmpl b/mercurial/templates/paper/filerevision.tmpl
--- a/mercurial/templates/paper/filerevision.tmpl
+++ b/mercurial/templates/paper/filerevision.tmpl
@@ -71,8 +71,11 @@
 
line wrap: on
line source
-
{text%fileline}
+
{text%fileline}
+ + + diff --git a/mercurial/templates/static/linerangelog.js b/mercurial/templates/static/linerangelog.js new file mode 100644 --- /dev/null +++ b/mercurial/templates/static/linerangelog.js @@ -0,0 +1,137 @@ +// Copyright 2017 Logilab SA +// +// This software may be used and distributed according to the terms +// of the GNU General Public License, incorporated herein by reference. + +//** Install event listeners for line block selection and followlines action */ +function installLineSelect() { + var sourcelines = document.getElementsByClassName('sourcelines')[0]; + if (typeof sourcelines === 'undefined') { + return; + } + // URL to complement with "linerange" query parameter + var targetUri = sourcelines.dataset.logurl; + if (typeof targetUri === 'undefined') { + return; + } + + var lineSelectedCSSClass = 'followlines-selected'; + + //** add CSS class on element in `from`-`to` line range */ + function addSelectedCSSClass(from, to) { + var spans = sourcelines.getElementsByTagName('span'); + for (var i = from; i <= to; i++) { + spans.item(i).classList.add(lineSelectedCSSClass); + } + } + + //** remove CSS class from previously selected lines */ + function removeSelectedCSSClass() { + var nodes = sourcelines.getElementsByClassName( + lineSelectedCSSClass); + while (nodes.length) { + nodes[0].classList.remove(lineSelectedCSSClass); + } + } + + // add event listener to the whole
 block to have
+    // it available in all children 
+    sourcelines.addEventListener('click', lineSelectStart);
+
+    //** event handler for "click" on the first line of a block */
+    function lineSelectStart(e) {
+        var startElement = e.target;
+        if (startElement.tagName !== 'SPAN') {
+            // not a  (maybe ): abort, keeping event listener
+            // registered for other click with  target
+            return;
+        }
+        var startId = parseInt(startElement.id.slice(1));
+        startElement.classList.add(lineSelectedCSSClass); // CSS
+
+        // remove this event listener
+        sourcelines.removeEventListener('click', lineSelectStart);
+
+        //** event handler for "click" on the last line of the block */
+        function lineSelectEnd(e) {
+            var endElement = e.target;
+            if (endElement.tagName !== 'SPAN') {
+                // not a  (maybe ): abort, keeping event listener
+                // registered for other click with  target
+                return;
+            }
+
+            // remove this event listener
+            sourcelines.removeEventListener('click', lineSelectEnd);
+
+            // compute line range (startId, endId)
+            var endId = parseInt(endElement.id.slice(1));
+            if (endId == startId) {
+                // clicked twice the same line, cancel and reset initial state
+                // (CSS and event listener for selection start)
+                removeSelectedCSSClass();
+                sourcelines.addEventListener('click', lineSelectStart);
+                return;
+            }
+            var inviteElement = endElement;
+            if (endId < startId) {
+                var tmp = endId;
+                endId = startId;
+                startId = tmp;
+                inviteElement = startElement;
+            }
+
+            addSelectedCSSClass(startId - 1, endId -1);  // CSS
+
+            // append the 
element to last line of the + // selection block + var divAndButton = followlinesBox(targetUri, startId, endId); + var div = divAndButton[0], + button = divAndButton[1]; + inviteElement.appendChild(div); + + //** event handler for cancelling selection */ + function cancel() { + // remove invite box + div.parentNode.removeChild(div); + // restore initial event listeners + sourcelines.addEventListener('click', lineSelectStart); + sourcelines.removeEventListener('click', cancel); + // remove styles on selected lines + removeSelectedCSSClass(); + } + + // bind cancel event to click on
@@ -1468,9 +1471,12 @@ File-related
line wrap: on
line source
-
+  
   another
+ + +