Mercurial > infra > home / templates/static/followlines.js

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