comparison mercurial/templates/static/followlines.js @ 31848:7160bdd56b84

hgweb: add a floating tooltip to invite on followlines action

In followlines.js, we create a <div id="followlines-tooltip"> element to draw
attention of users on "followlines" feature. The element shows up on hover of
source lines after one second and follows the cursor. After first click (start
line selection), the text changes and indicates that next click will terminate
selection.

31847:39d36c2db68e

    // 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' });

        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);

            }

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

                // 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

31848:7160bdd56b84

    // URL to complement with "linerange" query parameter
    var targetUri = sourcelines.dataset.logurl;
    if (typeof targetUri === 'undefined') {
        return;
    }

    // tooltip to invite on lines selection
    var tooltip = document.createElement('div');
    tooltip.id = 'followlines-tooltip';
    tooltip.classList.add('hidden');
    var initTooltipText = 'click to start following lines history from here';
    tooltip.textContent = initTooltipText;
    sourcelines.appendChild(tooltip);

    var tooltipTimeoutID;
    //* move the "tooltip" with cursor (top-right) and show it after 1s */
    function moveAndShowTooltip(e) {
        if (typeof tooltipTimeoutID !== 'undefined') {
            // avoid accumulation of timeout callbacks (blinking)
            window.clearTimeout(tooltipTimeoutID);
        }
        tooltip.classList.add('hidden');
        var x = (e.clientX + 10) + 'px',
            y = (e.clientY - 20) + 'px';
        tooltip.style.top = y;
        tooltip.style.left = x;
        tooltipTimeoutID = window.setTimeout(function() {
            tooltip.classList.remove('hidden');
        }, 1000);
    }

    // on mousemove, show tooltip close to cursor position
    sourcelines.addEventListener('mousemove', moveAndShowTooltip);

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

        if (startElement === null) {
            // not a <span> (maybe <a>): abort, keeping event listener
            // registered for other click with <span> target
            return;
        }

        // update tooltip text
        tooltip.textContent = 'click again to terminate line block selection here';

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

        // remove this event listener
        sourcelines.removeEventListener('click', lineSelectStart);

            }

            // remove this event listener
            sourcelines.removeEventListener('click', lineSelectEnd);

            // hide tooltip and disable motion tracking
            tooltip.classList.add('hidden');
            sourcelines.removeEventListener('mousemove', moveAndShowTooltip);
            window.clearTimeout(tooltipTimeoutID);

            //* restore initial "tooltip" state */
            function restoreTooltip() {
                tooltip.textContent = initTooltipText;
                sourcelines.addEventListener('mousemove', moveAndShowTooltip);
            }

            // 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, tooltip)
                removeSelectedCSSClass();
                sourcelines.addEventListener('click', lineSelectStart);
                restoreTooltip();
                return;
            }
            var inviteElement = endElement;
            if (endId < startId) {
                var tmp = endId;

                // restore initial event listeners
                sourcelines.addEventListener('click', lineSelectStart);
                sourcelines.removeEventListener('click', cancel);
                // remove styles on selected lines
                removeSelectedCSSClass();
                // restore tooltip element
                restoreTooltip();
            }

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