view mercurial/templates/static/followlines.js @ 49407:23dd636852b8

bundlespec: add documentation about existing option

We have some documentation, lets make it complete.

// followlines.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 */
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.innerHTML = '&plus;';
        btn.appendChild(plusSpan);
        var br = document.createElement('br');
        btn.appendChild(br);
        var minusSpan = document.createElement('span');
        minusSpan.classList.add('followlines-minus');
        minusSpan.innerHTML = '&minus;';
        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);