Many hyperlinks are disabled.
Use anonymous login
to enable hyperlinks.
Overview
| Comment: | Experimental change to have the tooltip appear automatically after a "dwell timeout", in addition to mouse clicks. See the wiki page linked to this branch for more information. |
|---|---|
| Downloads: | Tarball | ZIP archive |
| Timelines: | family | ancestors | descendants | both | tooltip-experiments |
| Files: | files | file ages | folders |
| SHA3-256: |
bba5337010c0e5e3b12d83e244dddda7 |
| User & Date: | florian 2019-05-20 08:32:00.000 |
Context
|
2019-05-20
| ||
| 09:45 | Fix coding typos from the previous commit. ... (check-in: b4f1eb9043 user: florian tags: tooltip-experiments) | |
| 08:32 | Experimental change to have the tooltip appear automatically after a "dwell timeout", in addition to mouse clicks. See the wiki page linked to this branch for more information. ... (check-in: bba5337010 user: florian tags: tooltip-experiments) | |
| 08:21 | Classic styling for the tooltip (grey shadow, also works with dark backgrounds) and the hyperlink (blue and underlined, to indicate it can be clicked). ... (check-in: cdb85ba9c9 user: florian tags: tooltip-experiments) | |
Changes
Changes to src/graph.js.
| ︙ | ︙ | |||
74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
}
amendCssOnce = 0;
}
var tooltipObj = document.createElement("span");
tooltipObj.className = "tl-tooltip";
tooltipObj.style.visibility = "hidden";
document.getElementsByClassName("content")[0].appendChild(tooltipObj);
/* Construct that graph corresponding to the timeline-data-N object */
function TimelineGraph(tx){
var topObj = document.getElementById("timelineTable"+tx.iTableId);
amendCss(tx.circleNodes, tx.showArrowheads);
topObj.onclick = clickOnGraph
topObj.ondblclick = dblclickOnGraph
topObj.onmousemove = function(e) {
var ix = findTxIndex(e);
var cursor = (ix<0) ? "" : "pointer"; /* Or: cursor = "help"? */
document.getElementsByTagName('body')[0].style.cursor = cursor;
};
topObj.onmouseleave = function(e) {
/* Hide the tooltip if the mouse is outside the "timelineTableN" element,
** and outside the tooltip. */
if (tooltipObj.style.display != "none" &&
e.relatedTarget &&
e.relatedTarget != tooltipObj) {
tooltipObj.style.display = "none";
}
};
var canvasDiv;
var railPitch;
var mergeOffset;
var node, arrow, arrowSmall, line, mArrow, mLine, wArrow, wLine;
| > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > | 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 |
}
amendCssOnce = 0;
}
var tooltipObj = document.createElement("span");
tooltipObj.className = "tl-tooltip";
tooltipObj.style.visibility = "hidden";
document.getElementsByClassName("content")[0].appendChild(tooltipObj);
/* This object must be in the global scope, so that (non-shadowed) access is
** possible from within a setTimeout() closure. */
window.tooltipInfo = {
dwellTimeout: 250, /* The tooltip dwell timeout. */
idTimer: 0, /* The tooltip dwell timer. */
ixElement: -1, /* The id of the last hovered element. */
posX: 0, posY: 0 /* The last mouse position. */
};
/* Construct that graph corresponding to the timeline-data-N object */
function TimelineGraph(tx){
var topObj = document.getElementById("timelineTable"+tx.iTableId);
amendCss(tx.circleNodes, tx.showArrowheads);
topObj.onclick = clickOnGraph
topObj.ondblclick = dblclickOnGraph
topObj.onmousemove = function(e) {
var ix = findTxIndex(e);
var cursor = (ix<0) ? "" : "pointer"; /* Or: cursor = "help"? */
document.getElementsByTagName('body')[0].style.cursor = cursor;
/* Keep the already visible tooltip at a constant position, as long as the
** mouse is over the same element. */
if (tooltipObj.style.display != "none" && ix == tooltipInfo.ixElement)
return;
/* The tooltip is either not visible, or the mouse is over a different
** element, so clear the dwell timer, and record the new element id and
** mouse position. */
if (tooltipInfo.idTimer != 0) {
clearTimeout(tooltipInfo.idTimer);
tooltipInfo.idTimer = 0;
}
if (ix >= 0) {
/* Close the tooltip only if the mouse is over another element, and init
** the dwell timer again. */
tooltipObj.style.display = "none";
tooltipInfo.ixElement = ix;
tooltipInfo.posX = e.x;
tooltipInfo.posY = e.y;
tooltipInfo.idTimer = setTimeout(function() {
this.tooltipInfo.idTimer = 0;
showGraphTooltip(
this.tooltipInfo.ixElement,
this.tooltipInfo.posX,
this.tooltipInfo.posY);
}.bind(window),tooltipInfo.dwellTimeout);
}
else
tooltipInfo.ix = -1;
};
topObj.onmouseleave = function(e) {
/* Hide the tooltip if the mouse is outside the "timelineTableN" element,
** and outside the tooltip. */
if (tooltipObj.style.display != "none" &&
e.relatedTarget &&
e.relatedTarget != tooltipObj) {
tooltipObj.style.display = "none";
/* Clear the dwell timer. */
if (tooltipInfo.idTimer != 0) {
clearTimeout(tooltipInfo.idTimer);
tooltipInfo.idTimer = 0;
}
tooltipInfo.ix = -1;
}
};
var canvasDiv;
var railPitch;
var mergeOffset;
var node, arrow, arrowSmall, line, mArrow, mLine, wArrow, wLine;
|
| ︙ | ︙ | |||
478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 |
var dest = tx.baseUrl + "/timeline?r=" + encodeURIComponent(br)
dest += tx.fileDiff ? "&m&cf=" : "&m&c="
dest += encodeURIComponent(tx.rowinfo[ix].h)
return dest
}
function clickOnGraph(e){
var ix = findTxIndex(e);
if( ix<0 ){
tooltipObj.style.display = "none"
}else{
var br = tx.rowinfo[ix].br
var dest = branchHyperlink(ix)
var hbr = br.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
tooltipObj.innerHTML = "<a href=\""+dest+"\">"+hbr+"</a>"
tooltipObj.style.display = "inline"
tooltipObj.style.position = "absolute"
| > > > | | | 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 |
var dest = tx.baseUrl + "/timeline?r=" + encodeURIComponent(br)
dest += tx.fileDiff ? "&m&cf=" : "&m&c="
dest += encodeURIComponent(tx.rowinfo[ix].h)
return dest
}
function clickOnGraph(e){
var ix = findTxIndex(e);
showGraphTooltip(ix,e.x,e.y);
}
function showGraphTooltip(ix,posX,posY){
if( ix<0 ){
tooltipObj.style.display = "none"
}else{
var br = tx.rowinfo[ix].br
var dest = branchHyperlink(ix)
var hbr = br.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
tooltipObj.innerHTML = "<a href=\""+dest+"\">"+hbr+"</a>"
tooltipObj.style.display = "inline"
tooltipObj.style.position = "absolute"
var x = posX + 4 + window.pageXOffset
tooltipObj.style.left = x+"px"
var y = posY + window.pageYOffset - tooltipObj.clientHeight - 4
tooltipObj.style.top = y+"px"
tooltipObj.style.visibility = "visible"
}
}
function dblclickOnGraph(e){
var ix = findTxIndex(e);
var dest = branchHyperlink(ix)
|
| ︙ | ︙ |