// 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.innerHTML = '+';

        btn.appendChild(plusSpan);

        var br = document.createElement('br');

        btn.appendChild(br);

        var minusSpan = document.createElement('span');

        minusSpan.classList.add('followlines-minus');

        minusSpan.innerHTML = '−';

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