Many hyperlinks are disabled.
Use anonymous login
to enable hyperlinks.
Overview
| Comment: | Resolve the fork. |
|---|---|
| Downloads: | Tarball | ZIP archive |
| Timelines: | family | ancestors | descendants | both | tooltip-experiments |
| Files: | files | file ages | folders |
| SHA3-256: |
fde231b274e3b0e6abe3e17e2f587c91 |
| User & Date: | florian 2019-05-21 08:27:00.000 |
Context
|
2019-05-21
| ||
| 09:12 | Also add a configuration option to set the closeTimeout for tooltips. ... (check-in: e45429d7f4 user: florian tags: tooltip-experiments) | |
| 08:27 | Resolve the fork. ... (check-in: fde231b274 user: florian tags: tooltip-experiments) | |
| 08:20 | Deduplicate more code. ... (check-in: 7fbad143e6 user: florian tags: tooltip-experiments) | |
| 02:15 | Add a configuration option under the Admin/Timeline setup menu to set the dwellTimeout for tooltips. ... (check-in: 5fc142df07 user: drh tags: tooltip-experiments) | |
Changes
Changes to src/graph.js.
| ︙ | ︙ | |||
73 74 75 76 77 78 79 |
style.textContent = css;
document.querySelector("head").appendChild(style);
}
amendCssOnce = 0;
}
var tooltipObj = document.createElement("span");
tooltipObj.className = "tl-tooltip";
| | > > > > > > > > > > | > | > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > | > | > > > < < | < > | | > > | > > | > | | > > > > | > | | | < < | 73 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 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 |
style.textContent = css;
document.querySelector("head").appendChild(style);
}
amendCssOnce = 0;
}
var tooltipObj = document.createElement("span");
tooltipObj.className = "tl-tooltip";
tooltipObj.style.display = "none";
document.getElementsByClassName("content")[0].appendChild(tooltipObj);
/* Clear the close timer if the mouse is over the tooltip. */
tooltipObj.onmouseenter = function(e) {
stopCloseTimer();
};
/* Init the close timer if the mouse is no longer over the tooltip. */
tooltipObj.onmouseleave = function(e) {
if (tooltipInfo.ixActive != -1)
resumeCloseTimer();
};
/* 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. */
closeTimeout: 3000, /* The tooltip close timeout. */
idTimer: 0, /* The tooltip dwell timer id. */
idTimerClose: 0, /* The tooltip close timer id. */
ixHover: -1, /* The id of the element with the mouse. */
ixActive: -1, /* The id of the element with the tooltip. */
posX: 0, posY: 0 /* The last mouse position. */
};
/* These functions must be in the global scope, so that access is possible from
** within (non-local) event handlers. */
var hideGraphTooltip = function() {
stopCloseTimer();
tooltipObj.style.display = "none";
this.tooltipInfo.ixActive = -1;
}.bind(window);
var stopDwellTimer = function() {
if (this.tooltipInfo.idTimer != 0) {
clearTimeout(this.tooltipInfo.idTimer);
this.tooltipInfo.idTimer = 0;
}
}.bind(window);
var resumeCloseTimer = function() {
/* This timer must be stopped explicitly to reset the elapsed timeout. */
if (this.tooltipInfo.idTimerClose == 0) {
this.tooltipInfo.idTimerClose = setTimeout(function() {
this.tooltipInfo.idTimerClose = 0;
hideGraphTooltip();
}.bind(window),this.tooltipInfo.closeTimeout);
}
}.bind(window);
var stopCloseTimer = function() {
if (this.tooltipInfo.idTimerClose != 0) {
clearTimeout(this.tooltipInfo.idTimerClose);
this.tooltipInfo.idTimerClose = 0;
}
}.bind(window);
/* 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);
tooltipInfo.dwellTimeout = tx.dwellTimeout
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. */
var isReentry = false; // Detect mouse move back to same element.
if (tooltipObj.style.display != "none") {
if (ix == tooltipInfo.ixHover)
return;
if (-1 == tooltipInfo.ixHover && ix == tooltipInfo.ixActive)
isReentry = true;
}
/* 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. */
stopDwellTimer();
if (ix >= 0) {
/* Close the tooltip only if the mouse is over another element, and init
** the dwell timer again. */
if (!isReentry)
hideGraphTooltip();
tooltipInfo.ixHover = ix;
tooltipInfo.posX = e.x;
tooltipInfo.posY = e.y;
/* Clear the close timer, if not already cleared by hideGraphTooltip(). */
stopCloseTimer();
if (!isReentry && tooltipInfo.dwellTimeout>0) {
tooltipInfo.idTimer = setTimeout(function() {
this.tooltipInfo.idTimer = 0;
/* Clear the timer to hide the tooltip. */
stopCloseTimer();
showGraphTooltip(
this.tooltipInfo.ixHover,
this.tooltipInfo.posX,
this.tooltipInfo.posY);
this.tooltipInfo.ixActive = this.tooltipInfo.ixHover;
}.bind(window),tooltipInfo.dwellTimeout);
}
}
else {
tooltipInfo.ixHover = -1;
/* The mouse is not over an element with a tooltip, init the hide
** timer. */
resumeCloseTimer();
}
};
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) {
tooltipInfo.ixHover = -1;
hideGraphTooltip();
/* Clear the dwell timer. */
stopDwellTimer();
/* Clear the close timer. */
stopCloseTimer();
}
};
var canvasDiv;
var railPitch;
var mergeOffset;
var node, arrow, arrowSmall, line, mArrow, mLine, wArrow, wLine;
|
| ︙ | ︙ | |||
470 471 472 473 474 475 476 |
for( var i=0; i<tx.nrail; i++) mergeBtm[i] = btm;
for( var i=tx.rowinfo.length-1; i>=0; i-- ){
drawNode(tx.rowinfo[i], btm);
}
}
var selRow;
function clickOnNode(e){
| | | 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 |
for( var i=0; i<tx.nrail; i++) mergeBtm[i] = btm;
for( var i=tx.rowinfo.length-1; i>=0; i-- ){
drawNode(tx.rowinfo[i], btm);
}
}
var selRow;
function clickOnNode(e){
hideGraphTooltip()
var p = tx.rowinfo[parseInt(this.id.match(/\d+$/)[0], 10)-tx.iTopRow];
if( !selRow ){
selRow = p;
this.className += " sel";
canvasDiv.className += " sel";
}else if( selRow==p ){
selRow = null;
|
| ︙ | ︙ | |||
528 529 530 531 532 533 534 |
}
function clickOnGraph(e){
var ix = findTxIndex(e);
showGraphTooltip(ix,e.x,e.y);
}
function showGraphTooltip(ix,posX,posY){
if( ix<0 ){
| | < | | | 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 |
}
function clickOnGraph(e){
var ix = findTxIndex(e);
showGraphTooltip(ix,e.x,e.y);
}
function showGraphTooltip(ix,posX,posY){
if( ix<0 ){
hideGraphTooltip()
}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.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.display = "inline"
}
}
function dblclickOnGraph(e){
var ix = findTxIndex(e);
var dest = branchHyperlink(ix)
hideGraphTooltip()
window.location.href = dest
}
function changeDisplay(selector,value){
var x = document.getElementsByClassName(selector);
var n = x.length;
for(var i=0; i<n; i++) {x[i].style.display = value;}
}
|
| ︙ | ︙ |