mercurial/templates/static/followlines.js
author Martin von Zweigbergk <martinvonz@google.com>
Sat, 05 May 2018 00:16:43 -0700
changeset 37909 da083d9fafab
parent 37491 685ad41feba0
child 49206 2c0570a6d5ae
permissions -rw-r--r--
shortest: don't keep checking for longer prefix if node doesn't exist (API) If revlog.shortest() is called with an invalid nodeid, we keep checking if longer and longer prefixes are valid. We call revlog._partialmatch() for each prefix. That function will give us None if the node doesn't exist (and a RevlogError if it's ambiguous), so there's no need to keep checking. This patch instead makes revlog.shortest() raise a LookupError is the node does not exist, and updates the caller to handle it. Before this patch, revlog.shortest() would return the full hexnode for nonexistent nodeids. By the same reasoning as in 7b2955624777 (scmutil: make shortesthexnodeidprefix() take a full binary nodeid, 2018-04-14), it's not revlog.shortest() that should decide how to present nonexistent nodeids, so that's now moved to the template function. This should speed up cases where {shortest()} is applied to an invalid nodeid, but I couldn't think of a reasonable case where that would happen. Differential Revision: https://phab.mercurial-scm.org/D3461

// followlines.js - JavaScript utilities for followlines UI
//
// Copyright 2017 Logilab SA <contact@logilab.fr>
//
// 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 */
document.addEventListener('DOMContentLoaded', function() {
    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;
    }

    // Tag of children of "sourcelines" element on which to add "line
    // selection" style.
    var selectableTag = sourcelines.dataset.selectabletag;
    if (typeof selectableTag === 'undefined') {
        return;
    }

    var isHead = parseInt(sourcelines.dataset.ishead || "0");

    //* position "element" on top-right of cursor */
    function positionTopRight(element, event) {
        var x = (event.clientX + 10) + 'px',
            y = (event.clientY - 20) + 'px';
        element.style.top = y;
        element.style.left = x;
    }

    // retrieve all direct *selectable* children of class="sourcelines"
    // element
    var selectableElements = Array.prototype.filter.call(
        sourcelines.children,
        function(x) { return x.tagName === selectableTag; });

    var btnTitleStart = 'start following lines history from here';
    var btnTitleEnd = 'terminate line block selection here';

    //** return a <button> element with +/- spans */
    function createButton() {
        var btn = document.createElement('button');
        btn.title = btnTitleStart;
        btn.classList.add('btn-followlines');
        var plusSpan = document.createElement('span');
        plusSpan.classList.add('followlines-plus');
        plusSpan.textContent = '+';
        btn.appendChild(plusSpan);
        var br = document.createElement('br');
        btn.appendChild(br);
        var minusSpan = document.createElement('span');
        minusSpan.classList.add('followlines-minus');
        minusSpan.textContent = '−';
        btn.appendChild(minusSpan);
        return btn;
    }

    // extend DOM with CSS class for selection highlight and action buttons
    var followlinesButtons = [];
    for (var i = 0; i < selectableElements.length; i++) {
        selectableElements[i].classList.add('followlines-select');
        var btn = createButton();
        followlinesButtons.push(btn);
        // insert the <button> as child of `selectableElements[i]` unless the
        // latter has itself a child  with a "followlines-btn-parent" class
        // (annotate view)
        var btnSupportElm = selectableElements[i];
        var childSupportElms = btnSupportElm.getElementsByClassName(
            'followlines-btn-parent');
        if ( childSupportElms.length > 0 ) {
            btnSupportElm = childSupportElms[0];
        }
        var refNode = btnSupportElm.childNodes[0]; // node to insert <button> before
        btnSupportElm.insertBefore(btn, refNode);
    }

    // ** re-initialize followlines buttons */
    function resetButtons() {
        for (var i = 0; i < followlinesButtons.length; i++) {
            var btn = followlinesButtons[i];
            btn.title = btnTitleStart;
            btn.classList.remove('btn-followlines-end');
            btn.classList.remove('btn-followlines-hidden');
        }
    }

    var lineSelectedCSSClass = 'followlines-selected';

    //** add CSS class on selectable elements in `from`-`to` line range */
    function addSelectedCSSClass(from, to) {
        for (var i = from; i <= to; i++) {
            selectableElements[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 element of type "selectableTag" parent of `element` */
    function selectableParent(element) {
        var parent = element.parentElement;
        if (parent === null) {
            return null;
        }
        if (element.tagName === selectableTag && parent.isSameNode(sourcelines)) {
            return element;
        }
        return selectableParent(parent);
    }

    // ** update buttons title and style upon first click */
    function updateButtons(selectable) {
        for (var i = 0; i < followlinesButtons.length; i++) {
            var btn = followlinesButtons[i];
            btn.title = btnTitleEnd;
            btn.classList.add('btn-followlines-end');
        }
        // on clicked button, change title to "cancel"
        var clicked = selectable.getElementsByClassName('btn-followlines')[0];
        clicked.title = 'cancel';
        clicked.classList.remove('btn-followlines-end');
    }

    //** add `listener` on "click" event for all `followlinesButtons` */
    function buttonsAddEventListener(listener) {
        for (var i = 0; i < followlinesButtons.length; i++) {
            followlinesButtons[i].addEventListener('click', listener);
        }
    }

    //** remove `listener` on "click" event for all `followlinesButtons` */
    function buttonsRemoveEventListener(listener) {
        for (var i = 0; i < followlinesButtons.length; i++) {
            followlinesButtons[i].removeEventListener('click', listener);
        }
    }

    //** event handler for "click" on the first line of a block */
    function lineSelectStart(e) {
        var startElement = selectableParent(e.target.parentElement);
        if (startElement === null) {
            // not a "selectable" element (maybe <a>): abort, keeping event
            // listener registered for other click with a "selectable" target
            return;
        }

        // update button tooltip text and CSS
        updateButtons(startElement);

        var startId = parseInt(startElement.id.slice(1));
        startElement.classList.add(lineSelectedCSSClass); // CSS

        // remove this event listener
        buttonsRemoveEventListener(lineSelectStart);

        //** event handler for "click" on the last line of the block */
        function lineSelectEnd(e) {
            var endElement = selectableParent(e.target.parentElement);
            if (endElement === null) {
                // not a <span> (maybe <a>): abort, keeping event listener
                // registered for other click with <span> target
                return;
            }

            // remove this event listener
            buttonsRemoveEventListener(lineSelectEnd);

            // reset button tooltip text
            resetButtons();

            // 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, event listener for selection start)
                removeSelectedCSSClass();
                buttonsAddEventListener(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, isHead);
            var div = divAndButton[0],
                button = divAndButton[1];
            inviteElement.appendChild(div);
            // set position close to cursor (top-right)
            positionTopRight(div, e);
            // hide all buttons
            for (var i = 0; i < followlinesButtons.length; i++) {
                followlinesButtons[i].classList.add('btn-followlines-hidden');
            }

            //** event handler for cancelling selection */
            function cancel() {
                // remove invite box
                div.parentNode.removeChild(div);
                // restore initial event listeners
                buttonsAddEventListener(lineSelectStart);
                buttonsRemoveEventListener(cancel);
                for (var i = 0; i < followlinesButtons.length; i++) {
                    followlinesButtons[i].classList.remove('btn-followlines-hidden');
                }
                // remove styles on selected lines
                removeSelectedCSSClass();
                resetButtons();
            }

            // bind cancel event to click on <button>
            button.addEventListener('click', cancel);
            // as well as on an click on any source line
            buttonsAddEventListener(cancel);
        }

        buttonsAddEventListener(lineSelectEnd);

    }

    buttonsAddEventListener(lineSelectStart);

    //** return a <div id="followlines"> and inner cancel <button> elements */
    function followlinesBox(targetUri, fromline, toline, isHead) {
        // <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');
        aDiv.textContent = 'follow history of lines ' + fromline + ':' + toline + ':';
        var linesep = document.createElement('br');
        aDiv.appendChild(linesep);
        //     link to "ascending" followlines
        var aAsc = document.createElement('a');
        var url = targetUri + '?patch=&linerange=' + fromline + ':' + toline;
        aAsc.setAttribute('href', url);
        aAsc.textContent = 'older';
        aDiv.appendChild(aAsc);

        if (!isHead) {
            var sep = document.createTextNode(' / ');
            aDiv.appendChild(sep);
            //     link to "descending" followlines
            var aDesc = document.createElement('a');
            aDesc.setAttribute('href', url + '&descend=');
            aDesc.textContent = 'newer';
            aDiv.appendChild(aDesc);
        }

        div.appendChild(aDiv);

        return [div, button];
    }

}, false);