view mercurial/templates/static/linerangelog.js @ 31758:04ec317b8128

hgweb: expose a followlines UI in filerevision view

In filerevision view (/file/<rev>/<fname>) we add some event listeners on
mouse clicks of <span> elements in the <pre class="sourcelines"> 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).

// linerangelog.js - JavaScript utilities for followlines UI
//
// Copyright 2017 Logilab SA <[e-mail]>
//
// This software may be used and distributed according to the terms of the
// GNU General Public License version 2 or any later version.

//** 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;
    }

    // retrieve all direct <span> children of <pre class="sourcelines">
    var spans = Array.prototype.filter.call(
        sourcelines.children,
        function(x) { return x.tagName === 'SPAN' });

    var lineSelectedCSSClass = 'followlines-selected';

    //** add CSS class on <span> element in `from`-`to` line range */
    function addSelectedCSSClass(from, to) {
        for (var i = from; i <= to; i++) {
            spans[i].classList.add(lineSelectedCSSClass);
        }
    }

    //** remove CSS class from previously selected lines */
    function removeSelectedCSSClass() {
        var elements = sourcelines.getElementsByClassName(
            lineSelectedCSSClass);
        while (elements.length) {
            elements[0].classList.remove(lineSelectedCSSClass);
        }
    }

    // ** return the <span> element parent of `element` */
    function findParentSpan(element) {
        var parent = element.parentElement;
        if (parent === null) {
            return null;
        }
        if (element.tagName == 'SPAN' && parent.isSameNode(sourcelines)) {
            return element;
        }
        return findParentSpan(parent);
    }

    //** event handler for "click" on the first line of a block */
    function lineSelectStart(e) {
        var startElement = findParentSpan(e.target);
        if (startElement === null) {
            // not a <span> (maybe <a>): abort, keeping event listener
            // registered for other click with <span> 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 = findParentSpan(e.target);
            if (endElement === null) {
                // not a <span> (maybe <a>): abort, keeping event listener
                // registered for other click with <span> 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 <div id="followlines"> 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 <button>
            button.addEventListener('click', cancel);
            // as well as on an click on any source line
            sourcelines.addEventListener('click', cancel);
        }

        sourcelines.addEventListener('click', lineSelectEnd);

    }

    sourcelines.addEventListener('click', lineSelectStart);

}

//** return a <div id="followlines"> and inner cancel <button> elements */
function followlinesBox(targetUri, fromline, toline) {
    // <div id="followlines">
    var div = document.createElement('div');
    div.id = 'followlines';

    //   <div class="followlines-cancel">
    var buttonDiv = document.createElement('div');
    buttonDiv.classList.add('followlines-cancel');

    //     <button>x</button>
    var button = document.createElement('button');
    button.textContent = 'x';
    buttonDiv.appendChild(button);
    div.appendChild(buttonDiv);

    //   <div class="followlines-link">
    var aDiv = document.createElement('div');
    aDiv.classList.add('followlines-link');

    //     <a href="/log/<rev>/<file>?patch=&linerange=...">
    var a = document.createElement('a');
    var url = targetUri + '?patch=&linerange=' + fromline + ':' + toline;
    a.setAttribute('href', url);
    a.textContent = 'follow lines ' + fromline + ':' + toline;
    aDiv.appendChild(a);
    div.appendChild(aDiv);

    return [div, button];
}

document.addEventListener('DOMContentLoaded', installLineSelect, false);