Mercurial > hg
view mercurial/templates/static/followlines.js @ 35407:27ab3150cd50
hgweb: calculate <canvas> width and height client-side
hgweb determines and passes to templates some variables related to graph
appearance, like bg_height, canvaswidth and canvasheight. bg_height was and
still is used for graph.scale() call in graph.tmpl, and the two latter
variables were used in <canvas> element as width and height properties, and
they were set before JS code got to run. Setting these properties server-side
doesn't make a lot of sense, because a graph that has been scaled should
calculate things like width and height on its own when being rendered.
Let's move (re)sizing <canvas> to JavaScript (to Graph.render function) and
stop parsing HTML with regular expressions just to know new width and height.
That extra loop that only counts cols is required because <canvas> can't
be resized after or in the process of rendering (or it gets cleared).
Incidentally, SVG doesn't have this problem and I'm hoping to switch graph to
using it in future.
There also was truecanvasheight, but according to hg grep --all it was never
used, see d490edc71146.
author | Anton Shestakov <av6@dwimlabs.net> |
---|---|
date | Sun, 10 Dec 2017 15:56:22 +0800 |
parents | 9f44d44626a0 |
children | 685ad41feba0 |
line wrap: on
line source
// 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.children[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);